• 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.   </style>
    27. </head>
    28.  
    29. <body class="zc-body">
    30.   <!-- CHART CONTAINER -->
    31.   <div id="myChart">
    32.     <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    33.   </div>
    34.  
    35.   <div id="myChart2">
    36.     <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    37.   </div>
    38.   <script>
    39.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // window:load event for Javascript to run after HTML
    40.     // because this Javascript is injected into the document head
    41.     window.addEventListener('load', () => {
    42.       let chartData = [{
    43.           id: 'theworld',
    44.           parent: '',
    45.           name: 'The World',
    46.         },
    47.         {
    48.           id: 'asia',
    49.           parent: 'theworld',
    50.           name: 'Asia',
    51.           value: 4100000000
    52.         },
    53.         {
    54.           id: 'africa',
    55.           parent: 'theworld',
    56.           name: 'Africa',
    57.           value: 1260000000
    58.         },
    59.         {
    60.           id: 'america',
    61.           parent: 'theworld',
    62.           name: 'America',
    63.           value: 328000000
    64.         },
    65.         {
    66.           id: 'europe',
    67.           parent: 'theworld',
    68.           name: 'Europe',
    69.           value: 741000000
    70.         },
    71.         {
    72.           id: 'ca',
    73.           parent: 'america',
    74.           name: 'California',
    75.           value: 32000000
    76.         },
    77.         {
    78.           id: 'ny',
    79.           parent: 'america',
    80.           name: 'New York',
    81.           value: 19000000
    82.         },
    83.         {
    84.           id: 'txt',
    85.           parent: 'america',
    86.           name: 'Texas',
    87.           value: 29000000
    88.         },
    89.       ];
    90.  
    91.       let chartConfig = {
    92.         type: 'tree',
    93.         title: {
    94.           text: 'depthRadio = 2 (default)',
    95.         },
    96.         plotarea: {
    97.           marginTop: 50,
    98.         },
    99.         options: {
    100.           link: {
    101.             aspect: 'arc'
    102.           },
    103.           maxSize: 15,
    104.           minSize: 5,
    105.           node: {
    106.             type: 'circle',
    107.             tooltip: {
    108.               padding: '8px 10px',
    109.               borderRadius: '3px',
    110.             }
    111.           }
    112.         },
    113.         series: chartData
    114.       }
    115.  
    116.       zingchart.render({
    117.         id: 'myChart',
    118.         data: chartConfig,
    119.         height: '45%',
    120.         width: '100%',
    121.         output: 'canvas'
    122.       });
    123.  
    124.  
    125.       let chartConfig2 = {
    126.         type: 'tree',
    127.         title: {
    128.           text: 'depthRadio = 100',
    129.           marginTop: 50,
    130.         },
    131.         plotarea: {
    132.           marginTop: 100,
    133.         },
    134.         options: {
    135.           depthRatio: 10,
    136.           link: {
    137.             aspect: 'arc'
    138.           },
    139.           maxSize: 15,
    140.           minSize: 5,
    141.           node: {
    142.             type: 'circle',
    143.             tooltip: {
    144.               padding: '8px 10px',
    145.               borderRadius: '3px',
    146.             }
    147.           }
    148.         },
    149.         series: chartData
    150.       }
    151.  
    152.       zingchart.render({
    153.         id: 'myChart2',
    154.         data: chartConfig2,
    155.         height: '45%',
    156.         width: '100%',
    157.         output: 'canvas'
    158.       });
    159.     });
    160.   </script>
    161. </body>
    162.  
    163. </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">
    13.     <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    14.   </div>
    15.  
    16.   <div id="myChart2">
    17.     <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    18.   </div>
    19. </body>
    20.  
    21. </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. }
    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.     title: {
    56.       text: 'depthRadio = 2 (default)',
    57.     },
    58.     plotarea: {
    59.       marginTop: 50,
    60.     },
    61.     options: {
    62.       link: {
    63.         aspect: 'arc'
    64.       },
    65.       maxSize: 15,
    66.       minSize: 5,
    67.       node: {
    68.         type: 'circle',
    69.         tooltip: {
    70.           padding: '8px 10px',
    71.           borderRadius: '3px',
    72.         }
    73.       }
    74.     },
    75.     series: chartData
    76.   }
    77.  
    78.   zingchart.render({
    79.     id: 'myChart',
    80.     data: chartConfig,
    81.     height: '45%',
    82.     width: '100%',
    83.     output: 'canvas'
    84.   });
    85.  
    86.  
    87.   let chartConfig2 = {
    88.     type: 'tree',
    89.     title: {
    90.       text: 'depthRadio = 100',
    91.       marginTop: 50,
    92.     },
    93.     plotarea: {
    94.       marginTop: 100,
    95.     },
    96.     options: {
    97.       depthRatio: 10,
    98.       link: {
    99.         aspect: 'arc'
    100.       },
    101.       maxSize: 15,
    102.       minSize: 5,
    103.       node: {
    104.         type: 'circle',
    105.         tooltip: {
    106.           padding: '8px 10px',
    107.           borderRadius: '3px',
    108.         }
    109.       }
    110.     },
    111.     series: chartData
    112.   }
    113.  
    114.   zingchart.render({
    115.     id: 'myChart2',
    116.     data: chartConfig2,
    117.     height: '45%',
    118.     width: '100%',
    119.     output: 'canvas'
    120.   });
    121. });