• 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.   <!-- 
    9. 			Point ZingChart to modules folder so ZingChart
    10. 			can automatically grab the CSV module 
    11. 		-->
    12.   <script nonce="undefined">
    13.     zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
    14.   </script>
    15.   <!-- load image data -->
    16.   <script nonce="undefined" src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/people.js'></script>
    17.   <style>
    18.     .zc-html,
    19.     .zc-body {
    20.       margin: 0;
    21.       padding: 0;
    22.       width: 100%;
    23.       height: 100%;
    24.     }
    25.  
    26.     .chart--container {
    27.       height: 100%;
    28.       width: 100%;
    29.       min-height: 530px;
    30.     }
    31.  
    32.     .zc-ref {
    33.       display: none;
    34.     }
    35.   </style>
    36. </head>
    37.  
    38. <body class="zc-body">
    39.   <!-- CHART CONTAINER -->
    40.   <div id="myChart" class="chart--container">
    41.     <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
    42.   </div>
    43.   <script>
    44.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // window:load event for Javascript to run after HTML
    45.     // because this Javascript is injected into the document head
    46.     window.addEventListener('load', () => {
    47.       let chartData = [{
    48.           id: 'america',
    49.           parent: '',
    50.           name: 'America'
    51.         },
    52.         {
    53.           id: 'southamerica',
    54.           parent: 'america',
    55.           name: 'South America'
    56.         },
    57.         {
    58.           id: 'brazil',
    59.           parent: 'southamerica',
    60.           name: 'Brazil',
    61.           value: 209288278
    62.         },
    63.         {
    64.           id: 'colombia',
    65.           parent: 'southamerica',
    66.           name: 'Colombia',
    67.           value: 49065615
    68.         },
    69.         {
    70.           id: 'argentina',
    71.           parent: 'southamerica',
    72.           name: 'Argentina',
    73.           value: 44271041
    74.         },
    75.         {
    76.           id: 'peru',
    77.           parent: 'southamerica',
    78.           name: 'Peru',
    79.           value: 32165485
    80.         },
    81.         {
    82.           id: 'venezuela',
    83.           parent: 'southamerica',
    84.           name: 'Venezuela',
    85.           value: 31977065
    86.         },
    87.         {
    88.           id: 'chile',
    89.           parent: 'southamerica',
    90.           name: 'Chile',
    91.           value: 18054726
    92.         },
    93.         {
    94.           id: 'ecuador',
    95.           parent: 'southamerica',
    96.           name: 'Ecuador',
    97.           value: 16624858
    98.         },
    99.         {
    100.           id: 'bolivia',
    101.           parent: 'southamerica',
    102.           name: 'Bolivia',
    103.           value: 11051600
    104.         },
    105.         {
    106.           id: 'paraguay',
    107.           parent: 'southamerica',
    108.           name: 'Paraguay',
    109.           value: 6811297
    110.         },
    111.         {
    112.           id: 'uruguay',
    113.           parent: 'southamerica',
    114.           name: 'Uruguay',
    115.           value: 3456750
    116.         },
    117.         {
    118.           id: 'guyana',
    119.           parent: 'southamerica',
    120.           name: 'Guyana',
    121.           value: 777859
    122.         },
    123.         {
    124.           id: 'suriname',
    125.           parent: 'southamerica',
    126.           name: 'Suriname',
    127.           value: 563402
    128.         },
    129.         {
    130.           id: 'frenchguiana',
    131.           parent: 'southamerica',
    132.           name: 'French Guiana',
    133.           value: 282731
    134.         },
    135.         {
    136.           id: 'falklandislands',
    137.           parent: 'southamerica',
    138.           name: 'Falkland Islands',
    139.           value: 2910
    140.         },
    141.         {
    142.           id: 'northernamerica',
    143.           parent: 'america',
    144.           name: 'Northern America'
    145.         },
    146.         {
    147.           id: 'unitedstates',
    148.           parent: 'northernamerica',
    149.           name: 'United States',
    150.           value: 324459463
    151.         },
    152.         {
    153.           id: 'canada',
    154.           parent: 'northernamerica',
    155.           name: 'Canada',
    156.           value: 36624199
    157.         },
    158.         {
    159.           id: 'bermuda',
    160.           parent: 'northernamerica',
    161.           name: 'Bermuda',
    162.           value: 61349
    163.         },
    164.         {
    165.           id: 'greenland',
    166.           parent: 'northernamerica',
    167.           name: 'Greenland',
    168.           value: 56480
    169.         },
    170.         {
    171.           id: 'saintpierreandmiquelon',
    172.           parent: 'northernamerica',
    173.           name: 'Saint Pierre and Miquelon',
    174.           value: 6320
    175.         },
    176.         {
    177.           id: 'centralamerica',
    178.           parent: 'america',
    179.           name: 'Central America'
    180.         },
    181.         {
    182.           id: 'mexico',
    183.           parent: 'centralamerica',
    184.           name: 'Mexico',
    185.           value: 129163276
    186.         },
    187.         {
    188.           id: 'guatemala',
    189.           parent: 'centralamerica',
    190.           name: 'Guatemala',
    191.           value: 16913503
    192.         },
    193.         {
    194.           id: 'honduras',
    195.           parent: 'centralamerica',
    196.           name: 'Honduras',
    197.           value: 9265067
    198.         },
    199.         {
    200.           id: 'elsalvador',
    201.           parent: 'centralamerica',
    202.           name: 'El Salvador',
    203.           value: 6377853
    204.         },
    205.         {
    206.           id: 'nicaragua',
    207.           parent: 'centralamerica',
    208.           name: 'Nicaragua',
    209.           value: 6217581
    210.         },
    211.         {
    212.           id: 'costarica',
    213.           parent: 'centralamerica',
    214.           name: 'Costa Rica',
    215.           value: 4905769
    216.         },
    217.         {
    218.           id: 'panama',
    219.           parent: 'centralamerica',
    220.           name: 'Panama',
    221.           value: 4098587
    222.         },
    223.         {
    224.           id: 'belize',
    225.           parent: 'centralamerica',
    226.           name: 'Belize',
    227.           value: 374681
    228.         },
    229.         {
    230.           id: 'caribbean',
    231.           parent: 'america',
    232.           name: 'Caribbean'
    233.         },
    234.  
    235.       ];
    236.  
    237.       let chartConfig = {
    238.         type: 'tree',
    239.         options: {
    240.           link: {
    241.             aspect: 'arc'
    242.           },
    243.           maxSize: 20,
    244.           minSize: 4,
    245.           node: {
    246.             type: 'circle',
    247.             borderWidth: '0px',
    248.             topState: {
    249.               backgroundColor: 'red',
    250.               offsetX: 10,
    251.               offsetY: 10,
    252.             }
    253.           },
    254.           'node[level0]': {
    255.             size: 20,
    256.           },
    257.           'node[collapsed]': {
    258.             borderColor: 'red',
    259.             borderWidth: '2px'
    260.           },
    261.           'node[parent]': {
    262.             type: 'star6',
    263.           },
    264.           'node[leaf]': {
    265.             backgroundColor: 'orange'
    266.           },
    267.           progression: 0,
    268.           textAttr: 'name',
    269.           valueAttr: 'value'
    270.         },
    271.         series: chartData
    272.       };
    273.  
    274.       zingchart.render({
    275.         id: 'myChart',
    276.         data: chartConfig,
    277.         height: '100%',
    278.         output: 'canvas'
    279.       });
    280.     });
    281.   </script>
    282. </body>
    283.  
    284. </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.   <!-- 
    9. 			Point ZingChart to modules folder so ZingChart
    10. 			can automatically grab the CSV module 
    11. 		-->
    12.   <script>
    13.     zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
    14.   </script>
    15.   <!-- load image data -->
    16.   <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/people.js'></script>
    17. </head>
    18.  
    19. <body class="zc-body">
    20.   <!-- CHART CONTAINER -->
    21.   <div id="myChart" class="chart--container">
    22.     <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
    23.   </div>
    24. </body>
    25.  
    26. </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: 'america',
    6.       parent: '',
    7.       name: 'America'
    8.     },
    9.     {
    10.       id: 'southamerica',
    11.       parent: 'america',
    12.       name: 'South America'
    13.     },
    14.     {
    15.       id: 'brazil',
    16.       parent: 'southamerica',
    17.       name: 'Brazil',
    18.       value: 209288278
    19.     },
    20.     {
    21.       id: 'colombia',
    22.       parent: 'southamerica',
    23.       name: 'Colombia',
    24.       value: 49065615
    25.     },
    26.     {
    27.       id: 'argentina',
    28.       parent: 'southamerica',
    29.       name: 'Argentina',
    30.       value: 44271041
    31.     },
    32.     {
    33.       id: 'peru',
    34.       parent: 'southamerica',
    35.       name: 'Peru',
    36.       value: 32165485
    37.     },
    38.     {
    39.       id: 'venezuela',
    40.       parent: 'southamerica',
    41.       name: 'Venezuela',
    42.       value: 31977065
    43.     },
    44.     {
    45.       id: 'chile',
    46.       parent: 'southamerica',
    47.       name: 'Chile',
    48.       value: 18054726
    49.     },
    50.     {
    51.       id: 'ecuador',
    52.       parent: 'southamerica',
    53.       name: 'Ecuador',
    54.       value: 16624858
    55.     },
    56.     {
    57.       id: 'bolivia',
    58.       parent: 'southamerica',
    59.       name: 'Bolivia',
    60.       value: 11051600
    61.     },
    62.     {
    63.       id: 'paraguay',
    64.       parent: 'southamerica',
    65.       name: 'Paraguay',
    66.       value: 6811297
    67.     },
    68.     {
    69.       id: 'uruguay',
    70.       parent: 'southamerica',
    71.       name: 'Uruguay',
    72.       value: 3456750
    73.     },
    74.     {
    75.       id: 'guyana',
    76.       parent: 'southamerica',
    77.       name: 'Guyana',
    78.       value: 777859
    79.     },
    80.     {
    81.       id: 'suriname',
    82.       parent: 'southamerica',
    83.       name: 'Suriname',
    84.       value: 563402
    85.     },
    86.     {
    87.       id: 'frenchguiana',
    88.       parent: 'southamerica',
    89.       name: 'French Guiana',
    90.       value: 282731
    91.     },
    92.     {
    93.       id: 'falklandislands',
    94.       parent: 'southamerica',
    95.       name: 'Falkland Islands',
    96.       value: 2910
    97.     },
    98.     {
    99.       id: 'northernamerica',
    100.       parent: 'america',
    101.       name: 'Northern America'
    102.     },
    103.     {
    104.       id: 'unitedstates',
    105.       parent: 'northernamerica',
    106.       name: 'United States',
    107.       value: 324459463
    108.     },
    109.     {
    110.       id: 'canada',
    111.       parent: 'northernamerica',
    112.       name: 'Canada',
    113.       value: 36624199
    114.     },
    115.     {
    116.       id: 'bermuda',
    117.       parent: 'northernamerica',
    118.       name: 'Bermuda',
    119.       value: 61349
    120.     },
    121.     {
    122.       id: 'greenland',
    123.       parent: 'northernamerica',
    124.       name: 'Greenland',
    125.       value: 56480
    126.     },
    127.     {
    128.       id: 'saintpierreandmiquelon',
    129.       parent: 'northernamerica',
    130.       name: 'Saint Pierre and Miquelon',
    131.       value: 6320
    132.     },
    133.     {
    134.       id: 'centralamerica',
    135.       parent: 'america',
    136.       name: 'Central America'
    137.     },
    138.     {
    139.       id: 'mexico',
    140.       parent: 'centralamerica',
    141.       name: 'Mexico',
    142.       value: 129163276
    143.     },
    144.     {
    145.       id: 'guatemala',
    146.       parent: 'centralamerica',
    147.       name: 'Guatemala',
    148.       value: 16913503
    149.     },
    150.     {
    151.       id: 'honduras',
    152.       parent: 'centralamerica',
    153.       name: 'Honduras',
    154.       value: 9265067
    155.     },
    156.     {
    157.       id: 'elsalvador',
    158.       parent: 'centralamerica',
    159.       name: 'El Salvador',
    160.       value: 6377853
    161.     },
    162.     {
    163.       id: 'nicaragua',
    164.       parent: 'centralamerica',
    165.       name: 'Nicaragua',
    166.       value: 6217581
    167.     },
    168.     {
    169.       id: 'costarica',
    170.       parent: 'centralamerica',
    171.       name: 'Costa Rica',
    172.       value: 4905769
    173.     },
    174.     {
    175.       id: 'panama',
    176.       parent: 'centralamerica',
    177.       name: 'Panama',
    178.       value: 4098587
    179.     },
    180.     {
    181.       id: 'belize',
    182.       parent: 'centralamerica',
    183.       name: 'Belize',
    184.       value: 374681
    185.     },
    186.     {
    187.       id: 'caribbean',
    188.       parent: 'america',
    189.       name: 'Caribbean'
    190.     },
    191.  
    192.   ];
    193.  
    194.   let chartConfig = {
    195.     type: 'tree',
    196.     options: {
    197.       link: {
    198.         aspect: 'arc'
    199.       },
    200.       maxSize: 20,
    201.       minSize: 4,
    202.       node: {
    203.         type: 'circle',
    204.         borderWidth: '0px',
    205.         topState: {
    206.           backgroundColor: 'red',
    207.           offsetX: 10,
    208.           offsetY: 10,
    209.         }
    210.       },
    211.       'node[level0]': {
    212.         size: 20,
    213.       },
    214.       'node[collapsed]': {
    215.         borderColor: 'red',
    216.         borderWidth: '2px'
    217.       },
    218.       'node[parent]': {
    219.         type: 'star6',
    220.       },
    221.       'node[leaf]': {
    222.         backgroundColor: 'orange'
    223.       },
    224.       progression: 0,
    225.       textAttr: 'name',
    226.       valueAttr: 'value'
    227.     },
    228.     series: chartData
    229.   };
    230.  
    231.   zingchart.render({
    232.     id: 'myChart',
    233.     data: chartConfig,
    234.     height: '100%',
    235.     output: 'canvas'
    236.   });
    237. });