<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
<style>
html,
body,
#myChart {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id='myChart'></div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
let chartConfig = {
"graphset": [{
"type": "treemap",
"plotarea": {
"margin": "0 0 30 0"
},
"options": {
"split-type": "alternate",
"aspect-type": "transition",
"color-start": "#f4f700",
"color-end": "#f20707"
},
"series": [{
"text": "North America",
"children": [{
"text": "United States",
"children": [{
"text": "Texas",
"value": 21
},
{
"text": "California",
"value": 53
},
{
"text": "Ohio",
"value": 12
},
{
"text": "New York",
"value": 46
},
{
"text": "Michigan",
"value": 39
},
{
"text": "Alabama",
"value": 25
}
]
},
{
"text": "Canada",
"value": 113
},
{
"text": "Mexico",
"value": 78
}
]
},
{
"text": "Europe",
"children": [{
"text": "France",
"value": 42
},
{
"text": "Spain",
"value": 28
},
{
"text": "Switzerland",
"value": 13
},
{
"text": "Germany",
"value": 56
},
{
"text": "Cyprus",
"value": 7
}
]
},
{
"text": "Africa",
"children": [{
"text": "Egypt",
"value": 22
},
{
"text": "Congo",
"value": 38
},
{
"text": "Lesotho",
"value": 9
}
]
},
{
"text": "Asia",
"children": [{
"text": "India",
"value": 92
},
{
"text": "China",
"value": 68
},
{
"text": "Mongolia",
"value": 25
}
]
},
{
"text": "South America",
"children": [{
"text": "Brazil",
"value": 42
},
{
"text": "Argentina",
"value": 28
},
{
"text": "Peru",
"value": 15
},
{
"text": "Uruguay",
"value": 33
}
]
},
{
"text": "Australia (continent)",
"children": [{
"text": "Australia (country)",
"value": 121
},
{
"text": "New Zealand",
"value": 24
}
]
}
]
}]
};
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>
</head>
<body>
<div id='myChart'></div>
</body>
</html>
html,
body,
#myChart {
height: 100%;
width: 100%;
}
let chartConfig = {
"graphset": [{
"type": "treemap",
"plotarea": {
"margin": "0 0 30 0"
},
"options": {
"split-type": "alternate",
"aspect-type": "transition",
"color-start": "#f4f700",
"color-end": "#f20707"
},
"series": [{
"text": "North America",
"children": [{
"text": "United States",
"children": [{
"text": "Texas",
"value": 21
},
{
"text": "California",
"value": 53
},
{
"text": "Ohio",
"value": 12
},
{
"text": "New York",
"value": 46
},
{
"text": "Michigan",
"value": 39
},
{
"text": "Alabama",
"value": 25
}
]
},
{
"text": "Canada",
"value": 113
},
{
"text": "Mexico",
"value": 78
}
]
},
{
"text": "Europe",
"children": [{
"text": "France",
"value": 42
},
{
"text": "Spain",
"value": 28
},
{
"text": "Switzerland",
"value": 13
},
{
"text": "Germany",
"value": 56
},
{
"text": "Cyprus",
"value": 7
}
]
},
{
"text": "Africa",
"children": [{
"text": "Egypt",
"value": 22
},
{
"text": "Congo",
"value": 38
},
{
"text": "Lesotho",
"value": 9
}
]
},
{
"text": "Asia",
"children": [{
"text": "India",
"value": 92
},
{
"text": "China",
"value": 68
},
{
"text": "Mongolia",
"value": 25
}
]
},
{
"text": "South America",
"children": [{
"text": "Brazil",
"value": 42
},
{
"text": "Argentina",
"value": 28
},
{
"text": "Peru",
"value": 15
},
{
"text": "Uruguay",
"value": 33
}
]
},
{
"text": "Australia (continent)",
"children": [{
"text": "Australia (country)",
"value": 121
},
{
"text": "New Zealand",
"value": 24
}
]
}
]
}]
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: "100%",
width: "100%"
});