Add a horizontal report in getorgchart for family tree support - Javascript Chart.js

Javascript examples for Chart.js:Chart Configuration

  1. HOME
  2. Javascript
  3. Chart.js
  4. Chart Configuration

Description

Add a horizontal report in getorgchart for family tree support

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>GetOrgChart</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.js"></script> 
      <script type="text/javascript" src="https://www.getorgchart.com/GetOrgChart/getorgchart/getorgchart.js"></script> 
      <link rel="stylesheet" type="text/css" href="https://www.getorgchart.com/GetOrgChart/getorgchart/getorgchart.css"> 
      <style id="compiled-css" type="text/css">

html,/*from  w  w  w  .  j  av  a  2s  .c om*/
body {
   margin: 0px;
   padding: 0px;
   height: 100%;
   overflow: hidden;
}
#people {
   width: 100%;
   height: 100%;
}


      </style> 
      <script type="text/javascript">
    $(window).load(function(){
         var orgChart = new getOrgChart(document.getElementById("people"), {
            primaryFields: ["name", "title"],
            gridView: true,
            layout: getOrgChart.MIXED_HIERARCHY_RIGHT_LINKS,
            dataSource: [
                { id: 1, parentId: null, name: "Amber McKenzie", title: "CEO", phone: "678-772-470", mail: "lemmons@test.com", adress: "Atlanta, GA 30303", image: "images/f-11.jpg" },
                { id: 2, parentId: 1, name: "Ava Field", title: "Paper goods machine setter", phone: "937-912-4971", mail: "anderson@test.com", image: "images/f-22.jpg" },
                { id: 3, parentId: 1, name: "Evie Johnson", title: "Employer relations representative", phone: "314-722-6164", mail: "thornton@test.com", image: "images/f-24.jpg" },
                { id: 6, parentId: 2, name: "Rebecca Randall", title: "Optometrist", phone: "801-920-9842", mail: "JasonWGoodman@test.com", image: "images/f-8.jpg" },
                { id: 7, parentId: 2, name: "Spencer May", title: "System operator", phone: "Conservation scientist", mail: "hodges@teleworm.us", image: "images/f-7.jpg" },
                { id: 8, parentId: 3, name: "Max Ford", title: "Budget manager", phone: "989-474-8325", mail: "hunter@teleworm.us", image: "images/f-6.jpg" },
                { id: 9, parentId: 3, name: "Riley Bray", title: "Structural metal fabricator", phone: "479-359-2159", image: "images/f-3.jpg" }
            ],
        });
    });

      </script> 
   </head> 
   <body> 
      <div id="people"></div>  
   </body>
</html>

Related Tutorials