• Edit
  • Download
  • <!DOCTYPE html>
    <html class="zc-html">
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
      <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
      <!-- 
    			Point ZingChart to modules folder so ZingChart
    			can automatically grab the CSV module 
    		-->
      <script nonce="undefined">
        zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
      </script>
      <!-- load image data -->
      <script nonce="undefined" src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/people.js'></script>
      <style>
        .zc-html,
        .zc-body {
          margin: 0;
          padding: 0;
          width: 100%;
          height: 100%;
        }
    
        .chart--container {
          height: 100%;
          width: 100%;
          min-height: 530px;
        }
    
        .zc-ref {
          display: none;
        }
      </style>
    </head>
    
    <body class="zc-body">
      <!-- CHART CONTAINER -->
      <div id="myChart" class="chart--container">
        <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
      </div>
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // window:load event for Javascript to run after HTML
        // because this Javascript is injected into the document head
        window.addEventListener('load', () => {
          let chartData = [{
              id: 'america',
              parent: '',
              name: 'America'
            },
            {
              id: 'southamerica',
              parent: 'america',
              name: 'South America'
            },
            {
              id: 'brazil',
              parent: 'southamerica',
              name: 'Brazil',
              value: 209288278
            },
            {
              id: 'colombia',
              parent: 'southamerica',
              name: 'Colombia',
              value: 49065615
            },
            {
              id: 'argentina',
              parent: 'southamerica',
              name: 'Argentina',
              value: 44271041
            },
            {
              id: 'peru',
              parent: 'southamerica',
              name: 'Peru',
              value: 32165485
            },
            {
              id: 'venezuela',
              parent: 'southamerica',
              name: 'Venezuela',
              value: 31977065
            },
            {
              id: 'chile',
              parent: 'southamerica',
              name: 'Chile',
              value: 18054726
            },
            {
              id: 'ecuador',
              parent: 'southamerica',
              name: 'Ecuador',
              value: 16624858
            },
            {
              id: 'bolivia',
              parent: 'southamerica',
              name: 'Bolivia',
              value: 11051600
            },
            {
              id: 'paraguay',
              parent: 'southamerica',
              name: 'Paraguay',
              value: 6811297
            },
            {
              id: 'uruguay',
              parent: 'southamerica',
              name: 'Uruguay',
              value: 3456750
            },
            {
              id: 'guyana',
              parent: 'southamerica',
              name: 'Guyana',
              value: 777859
            },
            {
              id: 'suriname',
              parent: 'southamerica',
              name: 'Suriname',
              value: 563402
            },
            {
              id: 'frenchguiana',
              parent: 'southamerica',
              name: 'French Guiana',
              value: 282731
            },
            {
              id: 'falklandislands',
              parent: 'southamerica',
              name: 'Falkland Islands',
              value: 2910
            },
            {
              id: 'northernamerica',
              parent: 'america',
              name: 'Northern America'
            },
            {
              id: 'unitedstates',
              parent: 'northernamerica',
              name: 'United States',
              value: 324459463
            },
            {
              id: 'canada',
              parent: 'northernamerica',
              name: 'Canada',
              value: 36624199
            },
            {
              id: 'bermuda',
              parent: 'northernamerica',
              name: 'Bermuda',
              value: 61349
            },
            {
              id: 'greenland',
              parent: 'northernamerica',
              name: 'Greenland',
              value: 56480
            },
            {
              id: 'saintpierreandmiquelon',
              parent: 'northernamerica',
              name: 'Saint Pierre and Miquelon',
              value: 6320
            },
            {
              id: 'centralamerica',
              parent: 'america',
              name: 'Central America'
            },
            {
              id: 'mexico',
              parent: 'centralamerica',
              name: 'Mexico',
              value: 129163276
            },
            {
              id: 'guatemala',
              parent: 'centralamerica',
              name: 'Guatemala',
              value: 16913503
            },
            {
              id: 'honduras',
              parent: 'centralamerica',
              name: 'Honduras',
              value: 9265067
            },
            {
              id: 'elsalvador',
              parent: 'centralamerica',
              name: 'El Salvador',
              value: 6377853
            },
            {
              id: 'nicaragua',
              parent: 'centralamerica',
              name: 'Nicaragua',
              value: 6217581
            },
            {
              id: 'costarica',
              parent: 'centralamerica',
              name: 'Costa Rica',
              value: 4905769
            },
            {
              id: 'panama',
              parent: 'centralamerica',
              name: 'Panama',
              value: 4098587
            },
            {
              id: 'belize',
              parent: 'centralamerica',
              name: 'Belize',
              value: 374681
            },
            {
              id: 'caribbean',
              parent: 'america',
              name: 'Caribbean'
            },
    
          ];
    
          let chartConfig = {
            type: 'tree',
            options: {
              link: {
                aspect: 'arc'
              },
              maxSize: 20,
              minSize: 4,
              node: {
                type: 'circle',
                hoverState: {
                  borderAlpha: 1,
                  borderColor: '#000',
                  borderWidth: '2px'
                },
                label: {
                  width: '100px'
                }
              },
              nodes: {
                'america': {
                  type: 'star6',
                  size: 20,
                  hoverState: {
                    backgroundColor: 'yellow'
                  },
                  tooltip: {
                    text: 'We are located in the bordered nodes!',
                    bottomState: {
                      backgroundColor: 'red',
                      offsetX: 10,
                      offsetY: 10
                    }
                  }
                },
                'northernamerica': {
                  borderColor: 'blue',
                  borderWidth: 5,
                },
                'unitedstates': {
                  borderColor: 'blue',
                  borderWidth: 5,
                }
              },
    
              progression: 0,
              textAttr: 'name',
              valueAttr: 'value'
            },
            series: chartData
          };
    
          zingchart.render({
            id: 'myChart',
            data: chartConfig,
            height: '100%',
            output: 'canvas'
          });
        });
      </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html class="zc-html">
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
      <!-- 
    			Point ZingChart to modules folder so ZingChart
    			can automatically grab the CSV module 
    		-->
      <script>
        zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
      </script>
      <!-- load image data -->
      <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/people.js'></script>
    </head>
    
    <body class="zc-body">
      <!-- CHART CONTAINER -->
      <div id="myChart" class="chart--container">
        <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
      </div>
    </body>
    
    </html>
    .zc-html,
    .zc-body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }
    
    .chart--container {
      height: 100%;
      width: 100%;
      min-height: 530px;
    }
    
    .zc-ref {
      display: none;
    }
    // window:load event for Javascript to run after HTML
    // because this Javascript is injected into the document head
    window.addEventListener('load', () => {
      let chartData = [{
          id: 'america',
          parent: '',
          name: 'America'
        },
        {
          id: 'southamerica',
          parent: 'america',
          name: 'South America'
        },
        {
          id: 'brazil',
          parent: 'southamerica',
          name: 'Brazil',
          value: 209288278
        },
        {
          id: 'colombia',
          parent: 'southamerica',
          name: 'Colombia',
          value: 49065615
        },
        {
          id: 'argentina',
          parent: 'southamerica',
          name: 'Argentina',
          value: 44271041
        },
        {
          id: 'peru',
          parent: 'southamerica',
          name: 'Peru',
          value: 32165485
        },
        {
          id: 'venezuela',
          parent: 'southamerica',
          name: 'Venezuela',
          value: 31977065
        },
        {
          id: 'chile',
          parent: 'southamerica',
          name: 'Chile',
          value: 18054726
        },
        {
          id: 'ecuador',
          parent: 'southamerica',
          name: 'Ecuador',
          value: 16624858
        },
        {
          id: 'bolivia',
          parent: 'southamerica',
          name: 'Bolivia',
          value: 11051600
        },
        {
          id: 'paraguay',
          parent: 'southamerica',
          name: 'Paraguay',
          value: 6811297
        },
        {
          id: 'uruguay',
          parent: 'southamerica',
          name: 'Uruguay',
          value: 3456750
        },
        {
          id: 'guyana',
          parent: 'southamerica',
          name: 'Guyana',
          value: 777859
        },
        {
          id: 'suriname',
          parent: 'southamerica',
          name: 'Suriname',
          value: 563402
        },
        {
          id: 'frenchguiana',
          parent: 'southamerica',
          name: 'French Guiana',
          value: 282731
        },
        {
          id: 'falklandislands',
          parent: 'southamerica',
          name: 'Falkland Islands',
          value: 2910
        },
        {
          id: 'northernamerica',
          parent: 'america',
          name: 'Northern America'
        },
        {
          id: 'unitedstates',
          parent: 'northernamerica',
          name: 'United States',
          value: 324459463
        },
        {
          id: 'canada',
          parent: 'northernamerica',
          name: 'Canada',
          value: 36624199
        },
        {
          id: 'bermuda',
          parent: 'northernamerica',
          name: 'Bermuda',
          value: 61349
        },
        {
          id: 'greenland',
          parent: 'northernamerica',
          name: 'Greenland',
          value: 56480
        },
        {
          id: 'saintpierreandmiquelon',
          parent: 'northernamerica',
          name: 'Saint Pierre and Miquelon',
          value: 6320
        },
        {
          id: 'centralamerica',
          parent: 'america',
          name: 'Central America'
        },
        {
          id: 'mexico',
          parent: 'centralamerica',
          name: 'Mexico',
          value: 129163276
        },
        {
          id: 'guatemala',
          parent: 'centralamerica',
          name: 'Guatemala',
          value: 16913503
        },
        {
          id: 'honduras',
          parent: 'centralamerica',
          name: 'Honduras',
          value: 9265067
        },
        {
          id: 'elsalvador',
          parent: 'centralamerica',
          name: 'El Salvador',
          value: 6377853
        },
        {
          id: 'nicaragua',
          parent: 'centralamerica',
          name: 'Nicaragua',
          value: 6217581
        },
        {
          id: 'costarica',
          parent: 'centralamerica',
          name: 'Costa Rica',
          value: 4905769
        },
        {
          id: 'panama',
          parent: 'centralamerica',
          name: 'Panama',
          value: 4098587
        },
        {
          id: 'belize',
          parent: 'centralamerica',
          name: 'Belize',
          value: 374681
        },
        {
          id: 'caribbean',
          parent: 'america',
          name: 'Caribbean'
        },
    
      ];
    
      let chartConfig = {
        type: 'tree',
        options: {
          link: {
            aspect: 'arc'
          },
          maxSize: 20,
          minSize: 4,
          node: {
            type: 'circle',
            hoverState: {
              borderAlpha: 1,
              borderColor: '#000',
              borderWidth: '2px'
            },
            label: {
              width: '100px'
            }
          },
          nodes: {
            'america': {
              type: 'star6',
              size: 20,
              hoverState: {
                backgroundColor: 'yellow'
              },
              tooltip: {
                text: 'We are located in the bordered nodes!',
                bottomState: {
                  backgroundColor: 'red',
                  offsetX: 10,
                  offsetY: 10
                }
              }
            },
            'northernamerica': {
              borderColor: 'blue',
              borderWidth: 5,
            },
            'unitedstates': {
              borderColor: 'blue',
              borderWidth: 5,
            }
          },
    
          progression: 0,
          textAttr: 'name',
          valueAttr: 'value'
        },
        series: chartData
      };
    
      zingchart.render({
        id: 'myChart',
        data: chartConfig,
        height: '100%',
        output: 'canvas'
      });
    });