• 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: 'Progression = 0 (default)',
    95.         },
    96.         plotarea: {
    97.           marginTop: 50,
    98.         },
    99.         options: {
    100.           maxSize: 15,
    101.           minSize: 5,
    102.           node: {
    103.             type: 'circle',
    104.             tooltip: {
    105.               padding: '8px 10px',
    106.               borderRadius: '3px',
    107.             }
    108.           }
    109.         },
    110.         series: chartData
    111.       }
    112.  
    113.       zingchart.render({
    114.         id: 'myChart',
    115.         data: chartConfig,
    116.         height: '45%',
    117.         width: '100%',
    118.         output: 'canvas'
    119.       });
    120.  
    121.  
    122.       let chartConfig2 = {
    123.         type: 'tree',
    124.         title: {
    125.           text: 'Progression = 0.5',
    126.           marginTop: 50,
    127.         },
    128.         plotarea: {
    129.           marginTop: 100,
    130.         },
    131.         options: {
    132.           progression: 0.5,
    133.           maxSize: 15,
    134.           minSize: 5,
    135.           node: {
    136.             type: 'circle',
    137.             tooltip: {
    138.               padding: '8px 10px',
    139.               borderRadius: '3px',
    140.             }
    141.           }
    142.         },
    143.         series: chartData
    144.       }
    145.  
    146.       zingchart.render({
    147.         id: 'myChart2',
    148.         data: chartConfig2,
    149.         height: '45%',
    150.         width: '100%',
    151.         output: 'canvas'
    152.       });
    153.     });
    154.   </script>
    155. </body>
    156.  
    157. </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: 'Progression = 0 (default)',
    57.     },
    58.     plotarea: {
    59.       marginTop: 50,
    60.     },
    61.     options: {
    62.       maxSize: 15,
    63.       minSize: 5,
    64.       node: {
    65.         type: 'circle',
    66.         tooltip: {
    67.           padding: '8px 10px',
    68.           borderRadius: '3px',
    69.         }
    70.       }
    71.     },
    72.     series: chartData
    73.   }
    74.  
    75.   zingchart.render({
    76.     id: 'myChart',
    77.     data: chartConfig,
    78.     height: '45%',
    79.     width: '100%',
    80.     output: 'canvas'
    81.   });
    82.  
    83.  
    84.   let chartConfig2 = {
    85.     type: 'tree',
    86.     title: {
    87.       text: 'Progression = 0.5',
    88.       marginTop: 50,
    89.     },
    90.     plotarea: {
    91.       marginTop: 100,
    92.     },
    93.     options: {
    94.       progression: 0.5,
    95.       maxSize: 15,
    96.       minSize: 5,
    97.       node: {
    98.         type: 'circle',
    99.         tooltip: {
    100.           padding: '8px 10px',
    101.           borderRadius: '3px',
    102.         }
    103.       }
    104.     },
    105.     series: chartData
    106.   }
    107.  
    108.   zingchart.render({
    109.     id: 'myChart2',
    110.     data: chartConfig2,
    111.     height: '45%',
    112.     width: '100%',
    113.     output: 'canvas'
    114.   });
    115. });