• Edit
  • Download
    1. <!doctype html>
    2. <html class="zc-html">
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8.   <style>
    9.     .zc-body {
    10.       background: #fff;
    11.     }
    12.  
    13.     .chart--container {
    14.       height: 100%;
    15.       width: 100%;
    16.       min-height: 900px;
    17.     }
    18.  
    19.     .zc-ref {
    20.       display: none;
    21.     }
    22.   </style>
    23. </head>
    24. ​
    25.  
    26. <body class="zc-body">
    27.   <div id="myChart" class="chart--container">
    28.     <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    29.   </div>
    30.   <script>
    31.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    32.     let chartData = [{
    33.         id: 'collegeboard',
    34.         name: 'COLLEGE BOARD',
    35.         parent: '',
    36.         cls: 'bdegblue'
    37.       },
    38.  
    39.       {
    40.         id: 'fkn1',
    41.         fake: true,
    42.         name: '1',
    43.         parent: 'collegeboard',
    44.         sibling: 'president'
    45.       },
    46.       {
    47.         id: 'president',
    48.         name: 'President',
    49.         parent: 'collegeboard',
    50.         cls: 'byellow'
    51.       },
    52.       {
    53.         id: 'execasspres',
    54.         name: 'Executive Assistant to<br>the President',
    55.         parent: 'collegeboard',
    56.         sibling: 'president',
    57.         cls: 'bwhite'
    58.       },
    59.  
    60.       {
    61.         id: 'execvicepres',
    62.         name: 'Executive Vice<br>President/<br>Administrative<br>Services',
    63.         parent: 'president',
    64.         cls: 'bred'
    65.       },
    66.       {
    67.         id: 'chinof',
    68.         name: 'Chief Information Officer',
    69.         parent: 'execvicepres',
    70.         cls: 'bgreen'
    71.       },
    72.       {
    73.         id: 'assvicepres',
    74.         name: 'Associate Vice President',
    75.         parent: 'execvicepres',
    76.         cls: 'bgreen'
    77.       },
    78.  
    79.       {
    80.         id: 'fkn2',
    81.         fake: true,
    82.         name: '2',
    83.         parent: 'president'
    84.       },
    85.       {
    86.         id: 'fkn3',
    87.         fake: true,
    88.         name: '3',
    89.         parent: 'fkn2'
    90.       },
    91.  
    92.       {
    93.         id: 'prmdir',
    94.         name: 'Public Relations & Marketing<br>Senior Director',
    95.         parent: 'fkn3',
    96.         cls: 'bblue'
    97.       },
    98.       {
    99.         id: 'prc',
    100.         name: 'Public Relations<br>Coordinator',
    101.         parent: 'prmdir',
    102.         cls: 'bwhite'
    103.       },
    104.       {
    105.         id: 'sw',
    106.         name: 'Switchboard',
    107.         parent: 'prmdir',
    108.         reference: 'prc',
    109.         cls: 'bwhite'
    110.       },
    111.       {
    112.         id: 'ps',
    113.         name: 'Publications Specialist',
    114.         parent: 'prmdir',
    115.         reference: 'prc',
    116.         cls: 'bwhite'
    117.       },
    118.       {
    119.         id: 'gd',
    120.         name: 'Graphic Designer',
    121.         parent: 'prmdir',
    122.         reference: 'prc',
    123.         cls: 'bwhite'
    124.       },
    125.       {
    126.         id: 'ms',
    127.         name: 'Marketing Specialist',
    128.         parent: 'prmdir',
    129.         reference: 'prc',
    130.         cls: 'bwhite'
    131.       },
    132.       {
    133.         id: 'wcm',
    134.         name: 'Web Content Manager',
    135.         parent: 'prmdir',
    136.         reference: 'prc',
    137.         cls: 'bwhite'
    138.       },
    139.  
    140.       {
    141.         id: 'fed',
    142.         name: 'Foundation<br>Executive Director',
    143.         parent: 'fkn3',
    144.         cls: 'bblue'
    145.       },
    146.       {
    147.         id: 'safed',
    148.         name: 'Senior Accountant',
    149.         parent: 'fed',
    150.         cls: 'bwhite'
    151.       },
    152.       {
    153.         id: 'dps',
    154.         name: 'Development Program<br>Specialist',
    155.         parent: 'fed',
    156.         reference: 'safed',
    157.         cls: 'bwhite'
    158.       },
    159.  
    160.       {
    161.         id: 'sdirsp',
    162.         name: 'Senior Director<br>Institutional Research and<br>Strategic Planning',
    163.         parent: 'fkn3',
    164.         cls: 'bblue'
    165.       },
    166.       {
    167.         id: 'sra',
    168.         name: 'Senior Research Analyst',
    169.         parent: 'sdirsp',
    170.         cls: 'bwhite'
    171.       },
    172.       {
    173.         id: 'rs',
    174.         name: 'Research Specialist',
    175.         parent: 'sdirsp',
    176.         reference: 'sra',
    177.         cls: 'bwhite'
    178.       },
    179.  
    180.       {
    181.         id: 'vicepresle',
    182.         name: 'Vice President<br>for Learning',
    183.         parent: 'president',
    184.         cls: 'bred'
    185.       },
    186.       {
    187.         id: 'assvicepresl',
    188.         name: 'Associate Vice President',
    189.         parent: 'vicepresle',
    190.         cls: 'bgreen'
    191.       },
    192.  
    193.       {
    194.         id: 'vicepresstu',
    195.         name: 'Vice President for<br>Student Services',
    196.         parent: 'president',
    197.         cls: 'bred'
    198.       }
    199.     ];
    200.  
    201.     let chartConfig = {
    202.       type: 'tree',
    203.       options: {
    204.         aspect: 'tree-down',
    205.         orgChart: true,
    206.         packingFactor: 10,
    207.         link: {
    208.           lineColor: '#000',
    209.           lineWidth: '2px',
    210.         },
    211.         'link[parent-prmdir]': {
    212.           aspect: 'side-before'
    213.         },
    214.         'link[parent-fed]': {
    215.           aspect: 'side-before'
    216.         },
    217.         'link[parent-sdirsp]': {
    218.           aspect: 'side-before'
    219.         },
    220.         node: {
    221.           borderColor: '#000',
    222.           borderWidth: '2px',
    223.           fillAngle: 0,
    224.           gradientStops: '0.01 0.5 0.55 0.99',
    225.           shadow: true,
    226.           shadowColor: '#ccc',
    227.           shadowDistance: '4px',
    228.           hoverState: {
    229.             visible: false
    230.           },
    231.           label: {
    232.             color: '#000',
    233.             fontSize: '10px'
    234.           }
    235.         },
    236.         'node[cls-byellow]': {
    237.           gradientColors: '#FDDA58 #FBF4BD #FBF4BD #FDDA58',
    238.           label: {
    239.             fontSize: '15px',
    240.             fontWeight: 'bold'
    241.           },
    242.           width: '200px',
    243.           height: '60px'
    244.         },
    245.         'node[cls-bred]': {
    246.           gradientColors: '#A15A58 #D6B2B2 #D6B2B2 #A15A58',
    247.           width: '120px',
    248.           height: '70px'
    249.         },
    250.         'node[cls-bdegblue]': {
    251.           gradientColors: '#51B7CD #C0E0EB #C0E0EB #51B7CD',
    252.           label: {
    253.             fontSize: '15px',
    254.             fontWeight: 'bold'
    255.           },
    256.           width: '300px',
    257.           height: '70px'
    258.         },
    259.         'node[cls-bblue]': {
    260.           backgroundColor: '#B7DDE8',
    261.           width: '180px',
    262.           height: '65px'
    263.         },
    264.         'node[cls-bgreen]': {
    265.           backgroundColor: '#C3D79A',
    266.           width: '130px',
    267.           height: '50px',
    268.         },
    269.         'node[cls-bwhite]': {
    270.           backgroundColor: '#fff',
    271.           offsetX: '30px',
    272.           width: '140px',
    273.           height: '50px'
    274.         }
    275.       },
    276.       plotarea: {
    277.         margin: '20px'
    278.       },
    279.       series: chartData
    280.     };
    281.  
    282.     zingchart.render({
    283.       id: 'myChart',
    284.       width: '100%',
    285.       height: '100%',
    286.       data: chartConfig
    287.     });
    288.   </script>
    289. </body>
    290.  
    291. </html>
    1. <!doctype html>
    2. <html class="zc-html">
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8. </head>
    9. ​
    10.  
    11. <body class="zc-body">
    12.   <div id="myChart" class="chart--container">
    13.     <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    14.   </div>
    15. </body>
    16.  
    17. </html>
    1. .zc-body {
    2.   background: #fff;
    3. }
    4.  
    5. .chart--container {
    6.   height: 100%;
    7.   width: 100%;
    8.   min-height: 900px;
    9. }
    10.  
    11. .zc-ref {
    12.   display: none;
    13. }
    1. let chartData = [{
    2.     id: 'collegeboard',
    3.     name: 'COLLEGE BOARD',
    4.     parent: '',
    5.     cls: 'bdegblue'
    6.   },
    7.  
    8.   {
    9.     id: 'fkn1',
    10.     fake: true,
    11.     name: '1',
    12.     parent: 'collegeboard',
    13.     sibling: 'president'
    14.   },
    15.   {
    16.     id: 'president',
    17.     name: 'President',
    18.     parent: 'collegeboard',
    19.     cls: 'byellow'
    20.   },
    21.   {
    22.     id: 'execasspres',
    23.     name: 'Executive Assistant to<br>the President',
    24.     parent: 'collegeboard',
    25.     sibling: 'president',
    26.     cls: 'bwhite'
    27.   },
    28.  
    29.   {
    30.     id: 'execvicepres',
    31.     name: 'Executive Vice<br>President/<br>Administrative<br>Services',
    32.     parent: 'president',
    33.     cls: 'bred'
    34.   },
    35.   {
    36.     id: 'chinof',
    37.     name: 'Chief Information Officer',
    38.     parent: 'execvicepres',
    39.     cls: 'bgreen'
    40.   },
    41.   {
    42.     id: 'assvicepres',
    43.     name: 'Associate Vice President',
    44.     parent: 'execvicepres',
    45.     cls: 'bgreen'
    46.   },
    47.  
    48.   {
    49.     id: 'fkn2',
    50.     fake: true,
    51.     name: '2',
    52.     parent: 'president'
    53.   },
    54.   {
    55.     id: 'fkn3',
    56.     fake: true,
    57.     name: '3',
    58.     parent: 'fkn2'
    59.   },
    60.  
    61.   {
    62.     id: 'prmdir',
    63.     name: 'Public Relations & Marketing<br>Senior Director',
    64.     parent: 'fkn3',
    65.     cls: 'bblue'
    66.   },
    67.   {
    68.     id: 'prc',
    69.     name: 'Public Relations<br>Coordinator',
    70.     parent: 'prmdir',
    71.     cls: 'bwhite'
    72.   },
    73.   {
    74.     id: 'sw',
    75.     name: 'Switchboard',
    76.     parent: 'prmdir',
    77.     reference: 'prc',
    78.     cls: 'bwhite'
    79.   },
    80.   {
    81.     id: 'ps',
    82.     name: 'Publications Specialist',
    83.     parent: 'prmdir',
    84.     reference: 'prc',
    85.     cls: 'bwhite'
    86.   },
    87.   {
    88.     id: 'gd',
    89.     name: 'Graphic Designer',
    90.     parent: 'prmdir',
    91.     reference: 'prc',
    92.     cls: 'bwhite'
    93.   },
    94.   {
    95.     id: 'ms',
    96.     name: 'Marketing Specialist',
    97.     parent: 'prmdir',
    98.     reference: 'prc',
    99.     cls: 'bwhite'
    100.   },
    101.   {
    102.     id: 'wcm',
    103.     name: 'Web Content Manager',
    104.     parent: 'prmdir',
    105.     reference: 'prc',
    106.     cls: 'bwhite'
    107.   },
    108.  
    109.   {
    110.     id: 'fed',
    111.     name: 'Foundation<br>Executive Director',
    112.     parent: 'fkn3',
    113.     cls: 'bblue'
    114.   },
    115.   {
    116.     id: 'safed',
    117.     name: 'Senior Accountant',
    118.     parent: 'fed',
    119.     cls: 'bwhite'
    120.   },
    121.   {
    122.     id: 'dps',
    123.     name: 'Development Program<br>Specialist',
    124.     parent: 'fed',
    125.     reference: 'safed',
    126.     cls: 'bwhite'
    127.   },
    128.  
    129.   {
    130.     id: 'sdirsp',
    131.     name: 'Senior Director<br>Institutional Research and<br>Strategic Planning',
    132.     parent: 'fkn3',
    133.     cls: 'bblue'
    134.   },
    135.   {
    136.     id: 'sra',
    137.     name: 'Senior Research Analyst',
    138.     parent: 'sdirsp',
    139.     cls: 'bwhite'
    140.   },
    141.   {
    142.     id: 'rs',
    143.     name: 'Research Specialist',
    144.     parent: 'sdirsp',
    145.     reference: 'sra',
    146.     cls: 'bwhite'
    147.   },
    148.  
    149.   {
    150.     id: 'vicepresle',
    151.     name: 'Vice President<br>for Learning',
    152.     parent: 'president',
    153.     cls: 'bred'
    154.   },
    155.   {
    156.     id: 'assvicepresl',
    157.     name: 'Associate Vice President',
    158.     parent: 'vicepresle',
    159.     cls: 'bgreen'
    160.   },
    161.  
    162.   {
    163.     id: 'vicepresstu',
    164.     name: 'Vice President for<br>Student Services',
    165.     parent: 'president',
    166.     cls: 'bred'
    167.   }
    168. ];
    169.  
    170. let chartConfig = {
    171.   type: 'tree',
    172.   options: {
    173.     aspect: 'tree-down',
    174.     orgChart: true,
    175.     packingFactor: 10,
    176.     link: {
    177.       lineColor: '#000',
    178.       lineWidth: '2px',
    179.     },
    180.     'link[parent-prmdir]': {
    181.       aspect: 'side-before'
    182.     },
    183.     'link[parent-fed]': {
    184.       aspect: 'side-before'
    185.     },
    186.     'link[parent-sdirsp]': {
    187.       aspect: 'side-before'
    188.     },
    189.     node: {
    190.       borderColor: '#000',
    191.       borderWidth: '2px',
    192.       fillAngle: 0,
    193.       gradientStops: '0.01 0.5 0.55 0.99',
    194.       shadow: true,
    195.       shadowColor: '#ccc',
    196.       shadowDistance: '4px',
    197.       hoverState: {
    198.         visible: false
    199.       },
    200.       label: {
    201.         color: '#000',
    202.         fontSize: '10px'
    203.       }
    204.     },
    205.     'node[cls-byellow]': {
    206.       gradientColors: '#FDDA58 #FBF4BD #FBF4BD #FDDA58',
    207.       label: {
    208.         fontSize: '15px',
    209.         fontWeight: 'bold'
    210.       },
    211.       width: '200px',
    212.       height: '60px'
    213.     },
    214.     'node[cls-bred]': {
    215.       gradientColors: '#A15A58 #D6B2B2 #D6B2B2 #A15A58',
    216.       width: '120px',
    217.       height: '70px'
    218.     },
    219.     'node[cls-bdegblue]': {
    220.       gradientColors: '#51B7CD #C0E0EB #C0E0EB #51B7CD',
    221.       label: {
    222.         fontSize: '15px',
    223.         fontWeight: 'bold'
    224.       },
    225.       width: '300px',
    226.       height: '70px'
    227.     },
    228.     'node[cls-bblue]': {
    229.       backgroundColor: '#B7DDE8',
    230.       width: '180px',
    231.       height: '65px'
    232.     },
    233.     'node[cls-bgreen]': {
    234.       backgroundColor: '#C3D79A',
    235.       width: '130px',
    236.       height: '50px',
    237.     },
    238.     'node[cls-bwhite]': {
    239.       backgroundColor: '#fff',
    240.       offsetX: '30px',
    241.       width: '140px',
    242.       height: '50px'
    243.     }
    244.   },
    245.   plotarea: {
    246.     margin: '20px'
    247.   },
    248.   series: chartData
    249. };
    250.  
    251. zingchart.render({
    252.   id: 'myChart',
    253.   width: '100%',
    254.   height: '100%',
    255.   data: chartConfig
    256. });