<!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',
borderWidth: '0px',
tooltip: {
text: 'Custom tooltip text',
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,
}
}
},
'node[level0]': {
size: 20,
},
'node[collapsed]': {
borderColor: 'red',
borderWidth: '2px'
},
'node[parent]': {
type: 'star6',
},
'node[leaf]': {
backgroundColor: 'orange'
},
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',
borderWidth: '0px',
tooltip: {
text: 'Custom tooltip text',
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,
}
}
},
'node[level0]': {
size: 20,
},
'node[collapsed]': {
borderColor: 'red',
borderWidth: '2px'
},
'node[parent]': {
type: 'star6',
},
'node[leaf]': {
backgroundColor: 'orange'
},
progression: 0,
textAttr: 'name',
valueAttr: 'value'
},
series: chartData
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
output: 'canvas'
});
});