• 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-html,
    10.     .zc-body {
    11.       margin: 0;
    12.       padding: 0;
    13.       width: 100%;
    14.       height: 100%;
    15.     }
    16.  
    17.     .chart--container {
    18.       height: 100%;
    19.       width: 100%;
    20.       min-height: 530px;
    21.     }
    22.  
    23.     .zc-ref {
    24.       display: none;
    25.     }
    26.  
    27.     select {
    28.       margin: 10px;
    29.     }
    30.   </style>
    31. </head>
    32.  
    33. <body class="zc-body">
    34.   <!-- CHART CONTAINER -->
    35.   <div id="myChart" class="chart--container">
    36.     <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    37.     <label for="tree-aspect">Layout</label>
    38.     <select id="tree-aspect">
    39.       <option value="tree-right" selected>Right to left</option>
    40.       <option value="tree-left">Left to right</option>
    41.       <option value="tree-up">Bottom up</option>
    42.       <option value="tree-down">Top Down</option>
    43.       <option value="tree-radial">Circle</option>
    44.     </select>
    45.     <label for="tree-node">Node Connector Type</label>
    46.     <select id="tree-node">
    47.       <option value="arc" selected>Arc</option>
    48.       <option value="line">Line</option>
    49.       <option value="side-before">Side Before</option>
    50.       <option value="side-after">Side After</option>
    51.       <option value="side-between">Side Between</option>
    52.       <option value="split">Split</option>
    53.       <option value="sibling">Sibling</option>
    54.     </select>
    55.     <label for="tree-node">Node Shape</label>
    56.     <select id="tree-node-shape">
    57.       <option value="circle" selected>Circle</option>
    58.       <option value="square">Square</option>
    59.       <option value="diamond">Diamond</option>
    60.       <option value="triangle">Triangle</option>
    61.       <option value="star5">Star</option>
    62.       <option value="star6">Star Type 2</option>
    63.       <option value="star7">Star Type 3</option>
    64.       <option value="star8">Star Type 4</option>
    65.       <option value="rpoly5">Polygon</option>
    66.       <option value="gear5">Gear</option>
    67.       <option value="gear6">Gear 2</option>
    68.       <option value="gear7">Gear 3</option>
    69.       <option value="gear8">Gear 4</option>
    70.     </select>
    71.   </div>
    72.   <script>
    73.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // window:load event for Javascript to run after HTML
    74.     // because this Javascript is injected into the document head
    75.     window.addEventListener('load', () => {
    76.       let chartData = [{
    77.           id: 'theworld',
    78.           parent: '',
    79.           name: 'The World',
    80.         },
    81.         {
    82.           id: 'asia',
    83.           parent: 'theworld',
    84.           name: 'Asia',
    85.           value: 4100000000
    86.         },
    87.         {
    88.           id: 'africa',
    89.           parent: 'theworld',
    90.           name: 'Africa',
    91.           value: 1260000000
    92.         },
    93.         {
    94.           id: 'america',
    95.           parent: 'theworld',
    96.           name: 'America',
    97.           value: 328000000
    98.         },
    99.         {
    100.           id: 'europe',
    101.           parent: 'theworld',
    102.           name: 'Europe',
    103.           value: 741000000
    104.         },
    105.         {
    106.           id: 'ca',
    107.           parent: 'america',
    108.           name: 'California',
    109.           value: 32000000
    110.         },
    111.         {
    112.           id: 'ny',
    113.           parent: 'america',
    114.           name: 'New York',
    115.           value: 19000000
    116.         },
    117.         {
    118.           id: 'txt',
    119.           parent: 'america',
    120.           name: 'Texas',
    121.           value: 29000000
    122.         },
    123.       ];
    124.  
    125.       let chartConfig = {
    126.         type: 'tree',
    127.         options: {
    128.           link: {
    129.             aspect: 'arc'
    130.           },
    131.           maxSize: 15,
    132.           minSize: 5,
    133.           node: {
    134.             type: 'circle',
    135.             tooltip: {
    136.               padding: '8px 10px',
    137.               borderRadius: '3px',
    138.             }
    139.           }
    140.         },
    141.         series: chartData
    142.       };
    143.  
    144.       zingchart.render({
    145.         id: 'myChart',
    146.         data: chartConfig,
    147.         height: '95%',
    148.         width: '100%',
    149.         output: 'canvas'
    150.       });
    151.  
    152.       // change tree layout
    153.       document.getElementById('tree-aspect').addEventListener('change', function(e) {
    154.         chartConfig.options.aspect = e.srcElement.value;
    155.         zingchart.exec('myChart', 'setdata', {
    156.           data: chartConfig
    157.         });
    158.       });
    159.  
    160.       // change tree connector
    161.       document.getElementById('tree-node').addEventListener('change', function(e) {
    162.         chartConfig.options.link.aspect = e.srcElement.value;
    163.         zingchart.exec('myChart', 'setdata', {
    164.           data: chartConfig
    165.         });
    166.       });
    167.  
    168.       // change node type
    169.       document.getElementById('tree-node-shape').addEventListener('change', function(e) {
    170.         chartConfig.options.node.type = e.srcElement.value;
    171.         zingchart.exec('myChart', 'setdata', {
    172.           data: chartConfig
    173.         });
    174.       })
    175.     });
    176.   </script>
    177. </body>
    178.  
    179. </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. <body class="zc-body">
    11.   <!-- CHART CONTAINER -->
    12.   <div id="myChart" class="chart--container">
    13.     <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    14.     <label for="tree-aspect">Layout</label>
    15.     <select id="tree-aspect">
    16.       <option value="tree-right" selected>Right to left</option>
    17.       <option value="tree-left">Left to right</option>
    18.       <option value="tree-up">Bottom up</option>
    19.       <option value="tree-down">Top Down</option>
    20.       <option value="tree-radial">Circle</option>
    21.     </select>
    22.     <label for="tree-node">Node Connector Type</label>
    23.     <select id="tree-node">
    24.       <option value="arc" selected>Arc</option>
    25.       <option value="line">Line</option>
    26.       <option value="side-before">Side Before</option>
    27.       <option value="side-after">Side After</option>
    28.       <option value="side-between">Side Between</option>
    29.       <option value="split">Split</option>
    30.       <option value="sibling">Sibling</option>
    31.     </select>
    32.     <label for="tree-node">Node Shape</label>
    33.     <select id="tree-node-shape">
    34.       <option value="circle" selected>Circle</option>
    35.       <option value="square">Square</option>
    36.       <option value="diamond">Diamond</option>
    37.       <option value="triangle">Triangle</option>
    38.       <option value="star5">Star</option>
    39.       <option value="star6">Star Type 2</option>
    40.       <option value="star7">Star Type 3</option>
    41.       <option value="star8">Star Type 4</option>
    42.       <option value="rpoly5">Polygon</option>
    43.       <option value="gear5">Gear</option>
    44.       <option value="gear6">Gear 2</option>
    45.       <option value="gear7">Gear 3</option>
    46.       <option value="gear8">Gear 4</option>
    47.     </select>
    48.   </div>
    49. </body>
    50.  
    51. </html>
    1. .zc-html,
    2. .zc-body {
    3.   margin: 0;
    4.   padding: 0;
    5.   width: 100%;
    6.   height: 100%;
    7. }
    8.  
    9. .chart--container {
    10.   height: 100%;
    11.   width: 100%;
    12.   min-height: 530px;
    13. }
    14.  
    15. .zc-ref {
    16.   display: none;
    17. }
    18.  
    19. select {
    20.   margin: 10px;
    21. }
    1. // window:load event for Javascript to run after HTML
    2. // because this Javascript is injected into the document head
    3. window.addEventListener('load', () => {
    4.   let chartData = [{
    5.       id: 'theworld',
    6.       parent: '',
    7.       name: 'The World',
    8.     },
    9.     {
    10.       id: 'asia',
    11.       parent: 'theworld',
    12.       name: 'Asia',
    13.       value: 4100000000
    14.     },
    15.     {
    16.       id: 'africa',
    17.       parent: 'theworld',
    18.       name: 'Africa',
    19.       value: 1260000000
    20.     },
    21.     {
    22.       id: 'america',
    23.       parent: 'theworld',
    24.       name: 'America',
    25.       value: 328000000
    26.     },
    27.     {
    28.       id: 'europe',
    29.       parent: 'theworld',
    30.       name: 'Europe',
    31.       value: 741000000
    32.     },
    33.     {
    34.       id: 'ca',
    35.       parent: 'america',
    36.       name: 'California',
    37.       value: 32000000
    38.     },
    39.     {
    40.       id: 'ny',
    41.       parent: 'america',
    42.       name: 'New York',
    43.       value: 19000000
    44.     },
    45.     {
    46.       id: 'txt',
    47.       parent: 'america',
    48.       name: 'Texas',
    49.       value: 29000000
    50.     },
    51.   ];
    52.  
    53.   let chartConfig = {
    54.     type: 'tree',
    55.     options: {
    56.       link: {
    57.         aspect: 'arc'
    58.       },
    59.       maxSize: 15,
    60.       minSize: 5,
    61.       node: {
    62.         type: 'circle',
    63.         tooltip: {
    64.           padding: '8px 10px',
    65.           borderRadius: '3px',
    66.         }
    67.       }
    68.     },
    69.     series: chartData
    70.   };
    71.  
    72.   zingchart.render({
    73.     id: 'myChart',
    74.     data: chartConfig,
    75.     height: '95%',
    76.     width: '100%',
    77.     output: 'canvas'
    78.   });
    79.  
    80.   // change tree layout
    81.   document.getElementById('tree-aspect').addEventListener('change', function(e) {
    82.     chartConfig.options.aspect = e.srcElement.value;
    83.     zingchart.exec('myChart', 'setdata', {
    84.       data: chartConfig
    85.     });
    86.   });
    87.  
    88.   // change tree connector
    89.   document.getElementById('tree-node').addEventListener('change', function(e) {
    90.     chartConfig.options.link.aspect = e.srcElement.value;
    91.     zingchart.exec('myChart', 'setdata', {
    92.       data: chartConfig
    93.     });
    94.   });
    95.  
    96.   // change node type
    97.   document.getElementById('tree-node-shape').addEventListener('change', function(e) {
    98.     chartConfig.options.node.type = e.srcElement.value;
    99.     zingchart.exec('myChart', 'setdata', {
    100.       data: chartConfig
    101.     });
    102.   })
    103. });