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