<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingGrid: Blank Grid</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 {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#myChart {
height: 100%;
width: 100%;
min-height: 600px;
}
.zc-ref {
display: none;
}
</style>
</head>
<body>
<!-- CHART CONTAINER -->
<div id="myChart">
<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', () => {
// graph configuration
let chartConfig = {
"graphset": [{
"type": "treemap",
"plotarea": {
"margin": "0 0 30 0"
},
"tooltip": {
},
"options": {
},
"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
}
]
}
]
}]
};
// render chart with width and height to
// fill the parent container CSS dimensions
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingGrid: Blank Grid</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">
<a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a>
</div>
</body>
</html>
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#myChart {
height: 100%;
width: 100%;
min-height: 600px;
}
.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', () => {
// graph configuration
let chartConfig = {
"graphset": [{
"type": "treemap",
"plotarea": {
"margin": "0 0 30 0"
},
"tooltip": {
},
"options": {
},
"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
}
]
}
]
}]
};
// render chart with width and height to
// fill the parent container CSS dimensions
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
});