<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
<style>
html,
body,
#myChart {
height: 100%;
width: 100%;
}
zing-grid[loading] {
height: 450px;
}
</style>
</head>
<body>
<div id='myChart'></div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
var myConfig = {
"graphset": [{
"type": "treemap",
"plotarea": {
"margin": "0 0 30 0"
},
"options": {
"aspect-type": "transition",
"color-start": "#c00",
"color-end": "#300"
},
"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: myConfig,
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%;
}
var myConfig = {
"graphset":[
{
"type":"treemap",
"plotarea":{
"margin":"0 0 30 0"
},
"options":{
"aspect-type":"transition",
"color-start":"#c00",
"color-end":"#300"
},
"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 : myConfig,
height: "100%",
width: "100%"
});