<!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'
}
];
let chartConfig = {
type: 'bubble-pack',
plotarea: {
margin: 10
},
options: {
padding: 2,
minSize: 3,
groupFilter: ['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>
// 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'
}
];
let chartConfig = {
type: 'bubble-pack',
plotarea: {
margin: 10
},
options: {
padding: 2,
minSize: 3,
groupFilter: ['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%',
});
});
});