• Edit
  • Download
  • <!DOCTYPE html>
    <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>
      <style>
        html,
        body {
          margin: 0;
          padding: 0;
          width: 100%;
          height: 100%;
        }
    
        .chart--container {
          min-height: 150px;
          overflow: auto;
          position: relative;
          width: 100%;
          height: 100%;
        }
    
        #myChart {
          width: 100%;
          height: 100%;
        }
    
        .zc-ref {
          display: none;
        }
      </style>
    </head>
    
    <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', () => {
          // Javascript code to execute after DOM content
    
          // full ZingChart schema can be found here:
          // https://www.zingchart.com/docs/api/json-configuration/
          let chartData = [{
              id: 'theworld',
              parent: '',
              name: 'The World',
              group: ''
            },
            {
              id: 'russia',
              parent: 'theworld',
              name: 'Russia',
              value: 143989754,
              group: 'europe'
            },
            {
              id: 'ukraine',
              parent: 'theworld',
              name: 'Ukraine',
              value: 44222947,
              group: 'europe'
            },
            {
              id: 'poland',
              parent: 'theworld',
              name: 'Poland',
              value: 38170712,
              group: 'europe'
            },
            {
              id: 'romania',
              parent: 'theworld',
              name: 'Romania',
              value: 19679306,
              group: 'europe'
            },
            {
              id: 'czechia',
              parent: 'theworld',
              name: 'Czechia',
              value: 10618303,
              group: 'europe'
            },
            {
              id: 'hungary',
              parent: 'theworld',
              name: 'Hungary',
              value: 9721559,
              group: 'europe'
            },
            {
              id: 'belarus',
              parent: 'theworld',
              name: 'Belarus',
              value: 9468338,
              group: 'europe'
            },
            {
              id: 'bulgaria',
              parent: 'theworld',
              name: 'Bulgaria',
              value: 7084571,
              group: 'europe'
            },
            {
              id: 'slovakia',
              parent: 'theworld',
              name: 'Slovakia',
              value: 5447662,
              group: 'europe'
            },
            {
              id: 'moldova',
              parent: 'theworld',
              name: 'Moldova',
              value: 4051212,
              group: 'europe'
            },
            {
              id: 'unitedkingdom',
              parent: 'theworld',
              name: 'United Kingdom',
              value: 66181585,
              group: 'europe'
            },
            {
              id: 'sweden',
              parent: 'theworld',
              name: 'Sweden',
              value: 9910701,
              group: 'europe'
            },
            {
              id: 'denmark',
              parent: 'theworld',
              name: 'Denmark',
              value: 5733551,
              group: 'europe'
            },
            {
              id: 'finland',
              parent: 'theworld',
              name: 'Finland',
              value: 5523231,
              group: 'europe'
            },
            {
              id: 'norway',
              parent: 'theworld',
              name: 'Norway',
              value: 5305383,
              group: 'europe'
            },
            {
              id: 'ireland',
              parent: 'theworld',
              name: 'Ireland',
              value: 4761657,
              group: 'europe'
            },
            {
              id: 'lithuania',
              parent: 'theworld',
              name: 'Lithuania',
              value: 2890297,
              group: 'europe'
            },
            {
              id: 'latvia',
              parent: 'theworld',
              name: 'Latvia',
              value: 1949670,
              group: 'europe'
            },
            {
              id: 'estonia',
              parent: 'theworld',
              name: 'Estonia',
              value: 1309632,
              group: 'europe'
            },
            {
              id: 'iceland',
              parent: 'theworld',
              name: 'Iceland',
              value: 335025,
              group: 'europe'
            },
            {
              id: 'guernseyandjersey',
              parent: 'theworld',
              name: 'Guernsey and Jersey',
              value: 165314,
              group: 'europe'
            },
            {
              id: 'isleofman',
              parent: 'theworld',
              name: 'Isle of Man',
              value: 84287,
              group: 'europe'
            },
            {
              id: 'faroeislands',
              parent: 'theworld',
              name: 'Faroe Islands',
              value: 49290,
              group: 'europe'
            },
            {
              id: 'italy',
              parent: 'theworld',
              name: 'Italy',
              value: 59359900,
              group: 'europe'
            },
            {
              id: 'spain',
              parent: 'theworld',
              name: 'Spain',
              value: 46354321,
              group: 'europe'
            },
            {
              id: 'greece',
              parent: 'theworld',
              name: 'Greece',
              value: 11159773,
              group: 'europe'
            },
            {
              id: 'cyprus',
              parent: 'theworld',
              name: 'Cyprus',
              value: 1179551,
              group: 'europe'
            },
            {
              id: 'portugal',
              parent: 'theworld',
              name: 'Portugal',
              value: 10329506,
              group: 'europe'
            },
            {
              id: 'serbia',
              parent: 'theworld',
              name: 'Serbia',
              value: 8790574,
              group: 'europe'
            },
            {
              id: 'croatia',
              parent: 'theworld',
              name: 'Croatia',
              value: 4189353,
              group: 'europe'
            },
            {
              id: 'bosniaandherzegovina',
              parent: 'theworld',
              name: 'Bosnia and Herzegovina',
              value: 3507017,
              group: 'europe'
            },
            {
              id: 'albania',
              parent: 'theworld',
              name: 'Albania',
              value: 2930187,
              group: 'europe'
            },
            {
              id: 'republicofmacedonia',
              parent: 'theworld',
              name: 'Republic of Macedonia',
              value: 2083160,
              group: 'europe'
            },
            {
              id: 'slovenia',
              parent: 'theworld',
              name: 'Slovenia',
              value: 2079976,
              group: 'europe'
            },
            {
              id: 'montenegro',
              parent: 'theworld',
              name: 'Montenegro',
              value: 628960,
              group: 'europe'
            },
            {
              id: 'malta',
              parent: 'theworld',
              name: 'Malta',
              value: 430835,
              group: 'europe'
            },
            {
              id: 'andorra',
              parent: 'theworld',
              name: 'Andorra',
              value: 76965,
              group: 'europe'
            },
            {
              id: 'gibraltar',
              parent: 'theworld',
              name: 'Gibraltar',
              value: 34571,
              group: 'europe'
            },
            {
              id: 'sanmarino',
              parent: 'theworld',
              name: 'San Marino',
              value: 33400,
              group: 'europe'
            },
            {
              id: 'vaticancity',
              parent: 'theworld',
              name: 'Vatican City',
              value: 792,
              group: 'europe'
            },
            {
              id: 'germany',
              parent: 'theworld',
              name: 'Germany',
              value: 82114224,
              group: 'europe'
            },
            {
              id: 'france',
              parent: 'theworld',
              name: 'France',
              value: 64979548,
              group: 'europe'
            },
            {
              id: 'netherlands',
              parent: 'theworld',
              name: 'Netherlands',
              value: 17035938,
              group: 'europe'
            },
            {
              id: 'belgium',
              parent: 'theworld',
              name: 'Belgium',
              value: 11429336,
              group: 'europe'
            },
            {
              id: 'austria',
              parent: 'theworld',
              name: 'Austria',
              value: 8735453,
              group: 'europe'
            },
            {
              id: 'switzerland',
              parent: 'theworld',
              name: 'Switzerland',
              value: 8476005,
              group: 'europe'
            },
            {
              id: 'luxembourg',
              parent: 'theworld',
              name: 'Luxembourg',
              value: 583455,
              group: 'europe'
            },
            {
              id: 'monaco',
              parent: 'theworld',
              name: 'Monaco',
              value: 38695,
              group: 'europe'
            },
            {
              id: 'liechtenstein',
              parent: 'theworld',
              name: 'Liechtenstein',
              value: 37922,
              group: 'europe'
            },
            {
              id: 'brazil',
              parent: 'theworld',
              name: 'Brazil',
              value: 209288278.71,
              group: 'southamerica'
            },
            {
              id: 'colombia',
              parent: 'theworld',
              name: 'Colombia',
              value: 49065615,
              group: 'southamerica'
            },
            {
              id: 'argentina',
              parent: 'theworld',
              name: 'Argentina',
              value: 44271041,
              group: 'southamerica'
            },
            {
              id: 'peru',
              parent: 'theworld',
              name: 'Peru',
              value: 32165485,
              group: 'southamerica'
            },
            {
              id: 'venezuela',
              parent: 'theworld',
              name: 'Venezuela',
              value: 31977065,
              group: 'southamerica'
            },
            {
              id: 'chile',
              parent: 'theworld',
              name: 'Chile',
              value: 18054726,
              group: 'southamerica'
            },
            {
              id: 'ecuador',
              parent: 'theworld',
              name: 'Ecuador',
              value: 16624858,
              group: 'southamerica'
            },
            {
              id: 'bolivia',
              parent: 'theworld',
              name: 'Bolivia',
              value: 11051600,
              group: 'southamerica'
            },
            {
              id: 'paraguay',
              parent: 'theworld',
              name: 'Paraguay',
              value: 6811297,
              group: 'southamerica'
            },
            {
              id: 'uruguay',
              parent: 'theworld',
              name: 'Uruguay',
              value: 3456750,
              group: 'southamerica'
            },
            {
              id: 'guyana',
              parent: 'theworld',
              name: 'Guyana',
              value: 777859,
              group: 'southamerica'
            },
            {
              id: 'suriname',
              parent: 'theworld',
              name: 'Suriname',
              value: 563402,
              group: 'southamerica'
            },
            {
              id: 'frenchguiana',
              parent: 'theworld',
              name: 'French Guiana',
              value: 282731,
              group: 'southamerica'
            },
            {
              id: 'falklandislands',
              parent: 'theworld',
              name: 'Falkland Islands',
              value: 2910,
              group: 'southamerica'
            },
          ];
    
          let chartConfig = {
            type: 'bubble-pack',
            plotarea: {
              margin: 10
            },
            options: {
              item: {
                label: {
                  text: '%value',
                  // %value, %fullvalue, %name, %fullname
                },
                tooltip: {
                  backgroundColor: 'yellow',
    
                  topState: {
                    backgroundColor: 'red',
                    offsetX: 10,
                    offsetY: 10,
                  }
                },
              },
              // we need to hide the label for "The World"
              'item-level-0': {
                label: {
                  text: ' '
                }
              },
              'item-level-1': {
                backgroundColor: 'green'
              },
              palette: ['#ff5252', '#448aff', '#ffab40'],
              padding: 2,
              minSize: 3,
              groupFilter: ['southamerica', 'europe'],
              format: {
                short: true,
                decimals: 1,
                decimalsSeparator: '.',
                thousandsSeparator: ','
              }
            },
            series: chartData
          };
    
          zingchart.loadModules('bubble-pack', function() {
            zingchart.render({
              id: 'myChart',
              data: chartConfig,
              height: '100%',
              width: '100%',
            });
          });
        });
      </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <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>
    </head>
    
    <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>
    html,
    body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }
    
    .chart--container {
      min-height: 150px;
      overflow: auto;
      position: relative;
      width: 100%;
      height: 100%;
    }
    
    #myChart {
      width: 100%;
      height: 100%;
    }
    
    .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', () => {
      // Javascript code to execute after DOM content
    
      // full ZingChart schema can be found here:
      // https://www.zingchart.com/docs/api/json-configuration/
      let chartData = [{
          id: 'theworld',
          parent: '',
          name: 'The World',
          group: ''
        },
        {
          id: 'russia',
          parent: 'theworld',
          name: 'Russia',
          value: 143989754,
          group: 'europe'
        },
        {
          id: 'ukraine',
          parent: 'theworld',
          name: 'Ukraine',
          value: 44222947,
          group: 'europe'
        },
        {
          id: 'poland',
          parent: 'theworld',
          name: 'Poland',
          value: 38170712,
          group: 'europe'
        },
        {
          id: 'romania',
          parent: 'theworld',
          name: 'Romania',
          value: 19679306,
          group: 'europe'
        },
        {
          id: 'czechia',
          parent: 'theworld',
          name: 'Czechia',
          value: 10618303,
          group: 'europe'
        },
        {
          id: 'hungary',
          parent: 'theworld',
          name: 'Hungary',
          value: 9721559,
          group: 'europe'
        },
        {
          id: 'belarus',
          parent: 'theworld',
          name: 'Belarus',
          value: 9468338,
          group: 'europe'
        },
        {
          id: 'bulgaria',
          parent: 'theworld',
          name: 'Bulgaria',
          value: 7084571,
          group: 'europe'
        },
        {
          id: 'slovakia',
          parent: 'theworld',
          name: 'Slovakia',
          value: 5447662,
          group: 'europe'
        },
        {
          id: 'moldova',
          parent: 'theworld',
          name: 'Moldova',
          value: 4051212,
          group: 'europe'
        },
        {
          id: 'unitedkingdom',
          parent: 'theworld',
          name: 'United Kingdom',
          value: 66181585,
          group: 'europe'
        },
        {
          id: 'sweden',
          parent: 'theworld',
          name: 'Sweden',
          value: 9910701,
          group: 'europe'
        },
        {
          id: 'denmark',
          parent: 'theworld',
          name: 'Denmark',
          value: 5733551,
          group: 'europe'
        },
        {
          id: 'finland',
          parent: 'theworld',
          name: 'Finland',
          value: 5523231,
          group: 'europe'
        },
        {
          id: 'norway',
          parent: 'theworld',
          name: 'Norway',
          value: 5305383,
          group: 'europe'
        },
        {
          id: 'ireland',
          parent: 'theworld',
          name: 'Ireland',
          value: 4761657,
          group: 'europe'
        },
        {
          id: 'lithuania',
          parent: 'theworld',
          name: 'Lithuania',
          value: 2890297,
          group: 'europe'
        },
        {
          id: 'latvia',
          parent: 'theworld',
          name: 'Latvia',
          value: 1949670,
          group: 'europe'
        },
        {
          id: 'estonia',
          parent: 'theworld',
          name: 'Estonia',
          value: 1309632,
          group: 'europe'
        },
        {
          id: 'iceland',
          parent: 'theworld',
          name: 'Iceland',
          value: 335025,
          group: 'europe'
        },
        {
          id: 'guernseyandjersey',
          parent: 'theworld',
          name: 'Guernsey and Jersey',
          value: 165314,
          group: 'europe'
        },
        {
          id: 'isleofman',
          parent: 'theworld',
          name: 'Isle of Man',
          value: 84287,
          group: 'europe'
        },
        {
          id: 'faroeislands',
          parent: 'theworld',
          name: 'Faroe Islands',
          value: 49290,
          group: 'europe'
        },
        {
          id: 'italy',
          parent: 'theworld',
          name: 'Italy',
          value: 59359900,
          group: 'europe'
        },
        {
          id: 'spain',
          parent: 'theworld',
          name: 'Spain',
          value: 46354321,
          group: 'europe'
        },
        {
          id: 'greece',
          parent: 'theworld',
          name: 'Greece',
          value: 11159773,
          group: 'europe'
        },
        {
          id: 'cyprus',
          parent: 'theworld',
          name: 'Cyprus',
          value: 1179551,
          group: 'europe'
        },
        {
          id: 'portugal',
          parent: 'theworld',
          name: 'Portugal',
          value: 10329506,
          group: 'europe'
        },
        {
          id: 'serbia',
          parent: 'theworld',
          name: 'Serbia',
          value: 8790574,
          group: 'europe'
        },
        {
          id: 'croatia',
          parent: 'theworld',
          name: 'Croatia',
          value: 4189353,
          group: 'europe'
        },
        {
          id: 'bosniaandherzegovina',
          parent: 'theworld',
          name: 'Bosnia and Herzegovina',
          value: 3507017,
          group: 'europe'
        },
        {
          id: 'albania',
          parent: 'theworld',
          name: 'Albania',
          value: 2930187,
          group: 'europe'
        },
        {
          id: 'republicofmacedonia',
          parent: 'theworld',
          name: 'Republic of Macedonia',
          value: 2083160,
          group: 'europe'
        },
        {
          id: 'slovenia',
          parent: 'theworld',
          name: 'Slovenia',
          value: 2079976,
          group: 'europe'
        },
        {
          id: 'montenegro',
          parent: 'theworld',
          name: 'Montenegro',
          value: 628960,
          group: 'europe'
        },
        {
          id: 'malta',
          parent: 'theworld',
          name: 'Malta',
          value: 430835,
          group: 'europe'
        },
        {
          id: 'andorra',
          parent: 'theworld',
          name: 'Andorra',
          value: 76965,
          group: 'europe'
        },
        {
          id: 'gibraltar',
          parent: 'theworld',
          name: 'Gibraltar',
          value: 34571,
          group: 'europe'
        },
        {
          id: 'sanmarino',
          parent: 'theworld',
          name: 'San Marino',
          value: 33400,
          group: 'europe'
        },
        {
          id: 'vaticancity',
          parent: 'theworld',
          name: 'Vatican City',
          value: 792,
          group: 'europe'
        },
        {
          id: 'germany',
          parent: 'theworld',
          name: 'Germany',
          value: 82114224,
          group: 'europe'
        },
        {
          id: 'france',
          parent: 'theworld',
          name: 'France',
          value: 64979548,
          group: 'europe'
        },
        {
          id: 'netherlands',
          parent: 'theworld',
          name: 'Netherlands',
          value: 17035938,
          group: 'europe'
        },
        {
          id: 'belgium',
          parent: 'theworld',
          name: 'Belgium',
          value: 11429336,
          group: 'europe'
        },
        {
          id: 'austria',
          parent: 'theworld',
          name: 'Austria',
          value: 8735453,
          group: 'europe'
        },
        {
          id: 'switzerland',
          parent: 'theworld',
          name: 'Switzerland',
          value: 8476005,
          group: 'europe'
        },
        {
          id: 'luxembourg',
          parent: 'theworld',
          name: 'Luxembourg',
          value: 583455,
          group: 'europe'
        },
        {
          id: 'monaco',
          parent: 'theworld',
          name: 'Monaco',
          value: 38695,
          group: 'europe'
        },
        {
          id: 'liechtenstein',
          parent: 'theworld',
          name: 'Liechtenstein',
          value: 37922,
          group: 'europe'
        },
        {
          id: 'brazil',
          parent: 'theworld',
          name: 'Brazil',
          value: 209288278.71,
          group: 'southamerica'
        },
        {
          id: 'colombia',
          parent: 'theworld',
          name: 'Colombia',
          value: 49065615,
          group: 'southamerica'
        },
        {
          id: 'argentina',
          parent: 'theworld',
          name: 'Argentina',
          value: 44271041,
          group: 'southamerica'
        },
        {
          id: 'peru',
          parent: 'theworld',
          name: 'Peru',
          value: 32165485,
          group: 'southamerica'
        },
        {
          id: 'venezuela',
          parent: 'theworld',
          name: 'Venezuela',
          value: 31977065,
          group: 'southamerica'
        },
        {
          id: 'chile',
          parent: 'theworld',
          name: 'Chile',
          value: 18054726,
          group: 'southamerica'
        },
        {
          id: 'ecuador',
          parent: 'theworld',
          name: 'Ecuador',
          value: 16624858,
          group: 'southamerica'
        },
        {
          id: 'bolivia',
          parent: 'theworld',
          name: 'Bolivia',
          value: 11051600,
          group: 'southamerica'
        },
        {
          id: 'paraguay',
          parent: 'theworld',
          name: 'Paraguay',
          value: 6811297,
          group: 'southamerica'
        },
        {
          id: 'uruguay',
          parent: 'theworld',
          name: 'Uruguay',
          value: 3456750,
          group: 'southamerica'
        },
        {
          id: 'guyana',
          parent: 'theworld',
          name: 'Guyana',
          value: 777859,
          group: 'southamerica'
        },
        {
          id: 'suriname',
          parent: 'theworld',
          name: 'Suriname',
          value: 563402,
          group: 'southamerica'
        },
        {
          id: 'frenchguiana',
          parent: 'theworld',
          name: 'French Guiana',
          value: 282731,
          group: 'southamerica'
        },
        {
          id: 'falklandislands',
          parent: 'theworld',
          name: 'Falkland Islands',
          value: 2910,
          group: 'southamerica'
        },
      ];
    
      let chartConfig = {
        type: 'bubble-pack',
        plotarea: {
          margin: 10
        },
        options: {
          item: {
            label: {
              text: '%value',
              // %value, %fullvalue, %name, %fullname
            },
            tooltip: {
              backgroundColor: 'yellow',
    
              topState: {
                backgroundColor: 'red',
                offsetX: 10,
                offsetY: 10,
              }
            },
          },
          // we need to hide the label for "The World"
          'item-level-0': {
            label: {
              text: ' '
            }
          },
          'item-level-1': {
            backgroundColor: 'green'
          },
          palette: ['#ff5252', '#448aff', '#ffab40'],
          padding: 2,
          minSize: 3,
          groupFilter: ['southamerica', 'europe'],
          format: {
            short: true,
            decimals: 1,
            decimalsSeparator: '.',
            thousandsSeparator: ','
          }
        },
        series: chartData
      };
    
      zingchart.loadModules('bubble-pack', function() {
        zingchart.render({
          id: 'myChart',
          data: chartConfig,
          height: '100%',
          width: '100%',
        });
      });
    });