• 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.   <script>
    35.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // window:load event for Javascript to run after HTML
    36.     // because this Javascript is injected into the document head
    37.     window.addEventListener('load', () => {
    38.       let chartData = [{
    39.           id: 'theworld',
    40.           parent: '',
    41.           name: 'The World',
    42.         },
    43.         {
    44.           id: 'asia',
    45.           parent: 'theworld',
    46.           name: 'Asia',
    47.           value: 4100000000
    48.         },
    49.         {
    50.           id: 'africa',
    51.           parent: 'theworld',
    52.           name: 'Africa',
    53.           value: 1260000000
    54.         },
    55.         {
    56.           id: 'america',
    57.           parent: 'theworld',
    58.           name: 'America',
    59.           value: 328000000
    60.         },
    61.         {
    62.           id: 'europe',
    63.           parent: 'theworld',
    64.           name: 'Europe',
    65.           value: 741000000
    66.         },
    67.         {
    68.           id: 'ca',
    69.           parent: 'america',
    70.           name: 'California',
    71.           value: 32000000
    72.         },
    73.         {
    74.           id: 'ny',
    75.           parent: 'america',
    76.           name: 'New York',
    77.           value: 19000000
    78.         },
    79.         {
    80.           id: 'txt',
    81.           parent: 'america',
    82.           name: 'Texas',
    83.           value: 29000000
    84.         },
    85.       ];
    86.  
    87.       let chartConfig = {
    88.         type: 'tree',
    89.         title: {
    90.           text: 'depthRadio = 2 (default)',
    91.         },
    92.         plotarea: {
    93.           marginTop: 50,
    94.         },
    95.         options: {
    96.           palette: ['#2196F3', '#3F51B5', '#42A5F5', '#5C6BC0', '#64B5F6', '#7986CB', '#90CAF9', '#9FA8DA', '#BBDEFB', '#C5CAE9'],
    97.           link: {
    98.             aspect: 'arc'
    99.           },
    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.   </script>
    122. </body>
    123.  
    124. </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. </body>
    16.  
    17. </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.       palette: ['#2196F3', '#3F51B5', '#42A5F5', '#5C6BC0', '#64B5F6', '#7986CB', '#90CAF9', '#9FA8DA', '#BBDEFB', '#C5CAE9'],
    63.       link: {
    64.         aspect: 'arc'
    65.       },
    66.       maxSize: 15,
    67.       minSize: 5,
    68.       node: {
    69.         type: 'circle',
    70.         tooltip: {
    71.           padding: '8px 10px',
    72.           borderRadius: '3px',
    73.         }
    74.       }
    75.     },
    76.     series: chartData
    77.   }
    78.  
    79.   zingchart.render({
    80.     id: 'myChart',
    81.     data: chartConfig,
    82.     height: '45%',
    83.     width: '100%',
    84.     output: 'canvas'
    85.   });
    86. });