• 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.         plotarea: {
    90.           marginTop: 50,
    91.         },
    92.         options: {
    93.           layout: 'h',
    94.           link: {
    95.             aspect: 'arc',
    96.           },
    97.           'link[level-1]': {
    98.             lineColor: 'red',
    99.             bottomState: {
    100.               lineColor: 'blue',
    101.               offsetX: 10,
    102.               offsetY: 10,
    103.             }
    104.           },
    105.           maxSize: 15,
    106.           minSize: 5,
    107.           node: {
    108.             type: 'circle',
    109.             tooltip: {
    110.               padding: '8px 10px',
    111.               borderRadius: '3px',
    112.             }
    113.           }
    114.         },
    115.         series: chartData
    116.       }
    117.  
    118.       zingchart.render({
    119.         id: 'myChart',
    120.         data: chartConfig,
    121.         height: '32%',
    122.         width: '100%',
    123.         output: 'canvas'
    124.       });
    125.     });
    126.   </script>
    127. </body>
    128.  
    129. </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.     plotarea: {
    56.       marginTop: 50,
    57.     },
    58.     options: {
    59.       layout: 'h',
    60.       link: {
    61.         aspect: 'arc',
    62.       },
    63.       'link[level-1]': {
    64.         lineColor: 'red',
    65.         bottomState: {
    66.           lineColor: 'blue',
    67.           offsetX: 10,
    68.           offsetY: 10,
    69.         }
    70.       },
    71.       maxSize: 15,
    72.       minSize: 5,
    73.       node: {
    74.         type: 'circle',
    75.         tooltip: {
    76.           padding: '8px 10px',
    77.           borderRadius: '3px',
    78.         }
    79.       }
    80.     },
    81.     series: chartData
    82.   }
    83.  
    84.   zingchart.render({
    85.     id: 'myChart',
    86.     data: chartConfig,
    87.     height: '32%',
    88.     width: '100%',
    89.     output: 'canvas'
    90.   });
    91. });