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