<!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: {
hoverState: {
backgroundColor: 'pink',
borderColor: 'black'
},
label: {
text: '%value',
// %value, %fullvalue, %name, %fullname
},
tooltip: {
backgroundColor: '#f90',
borderColor: '#f60',
borderRadius: -5,
borderWidth: 2,
callout: true,
calloutHeight: 20,
calloutPosition: 'bottom',
calloutWidth: 0,
padding: 10,
shadow: true,
calloutTip: {
type: 'circle',
backgroundColor: '#fff',
borderWidth: 2,
borderColor: '#f60',
size: 5,
offsetY: 0,
}
},
mediaRules: [{
maxWidth: 500,
backgroundColor: 'blue'
}]
},
// 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>
// 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: {
hoverState: {
backgroundColor: 'pink',
borderColor: 'black'
},
label: {
text: '%value',
// %value, %fullvalue, %name, %fullname
},
tooltip: {
backgroundColor: '#f90',
borderColor: '#f60',
borderRadius: -5,
borderWidth: 2,
callout: true,
calloutHeight: 20,
calloutPosition: 'bottom',
calloutWidth: 0,
padding: 10,
shadow: true,
calloutTip: {
type: 'circle',
backgroundColor: '#fff',
borderWidth: 2,
borderColor: '#f60',
size: 5,
offsetY: 0,
}
},
mediaRules: [{
maxWidth: 500,
backgroundColor: 'blue'
}]
},
// 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%',
});
});
});