• Edit
  • Download
  • <!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>
      <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.onload 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'
            }
          ];
    
          let chartConfig = {
            type: 'bubble-pack',
            plotarea: {
              margin: 10
            },
            options: {
              padding: 2,
              minSize: 3,
              groupFilter: ['europe'],
              format: {
                short: false,
                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.onload 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'
        }
      ];
    
      let chartConfig = {
        type: 'bubble-pack',
        plotarea: {
          margin: 10
        },
        options: {
          padding: 2,
          minSize: 3,
          groupFilter: ['europe'],
          format: {
            short: false,
            decimals: 1,
            decimalsSeparator: '.',
            thousandsSeparator: ','
          }
        },
        series: chartData
      };
    
      zingchart.loadModules('bubble-pack', function() {
        zingchart.render({
          id: 'myChart',
          data: chartConfig,
          height: '100%',
          width: '100%',
        });
      });
    });