<!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>
<style>
.zc-html,
.zc-body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.chart--container {
height: 100%;
width: 450px;
min-height: 800px;
}
.zc-ref {
display: none;
}
</style>
</head>
<body class="zc-body">
<!-- CHART CONTAINER -->
<div id="myChart" class="chart--container">
<a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">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 chartConfig = {
"graphset": [{
"type": "bubble-pie",
"borderColor": "#C0C0C0",
"borderWidth": 1,
"title": {
"adjustLayout": true,
"text": "Bubble Pie with Y-scrolling",
"textAlign": "left",
"fontColor": "#01573E",
"fontFamily": "Nunito Sans",
"fontSize": 18
},
"plotarea": {
"marginBottom": "dynamic",
"marginLeft": "dynamic",
"marginTop": "dynamic"
},
"plot": {
"values": [
[23439, "Label 1", 725],
[17987, "Label 2", 1693],
[475, "Label 3", 47],
[941, "Label 4", 219],
[526, "Label 5", 357],
[460, "Label 6", 197],
[15641, "Label 7", 2438],
[13881, "Label 8", 597],
[6705, "Label 9", 823],
[58, "Label 10", 15],
[159, "Label 11", 63],
[766, "Label 12", 329],
[857, "Label 13", 262],
[124, "Label 14", 28]
],
"minSize": 7,
"maxSize": 35,
"tooltip": {
"text": "%data-pie: %data-v (%data-pv%)"
},
"valueBox": {
"visible": false
}
},
"scaleX": {
"values": [0, 1000, 2000, 3000, 4000, 5000, 6000, 7000, 8000, 9000, 10000, 11000, 12000, 13000, 14000, 15000, 16000, 17000, 18000, 19000, 20000, 21000, 22000, 23000, 24000, 25000, 26000, 27000, 28000, 29000, 30000, 31000, 32000, 33000, 34000, 35000],
"label": {
"text": "values"
},
"tooltip": {
"text": "%v"
},
"item": {
"maxChars": 30
},
"guide": {
"visible": false
}
},
"scaleY": {
"fixedStep": true,
"itemsOverlap": true,
"maxItems": 39,
"mirrored": true,
"values": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13],
"labels": ["Label 1", "Label 2", "Label 3", "Label 4", "Label 5", "Label 6", "Label 7", "Label 8", "Label 9", "Label 10", "Label 11", "Label 12", "Label 13", "Label 14"],
"zoomTo": [0, 5],
"zooming": true,
"step": 1,
"label": {
"text": "Categories"
},
"item": {
"maxChars": 10
},
"tooltip": {
"text": "%v"
},
"guide": {
"visible": false
}
},
"scrollY": {
"handle": {
"width": 6
},
"bar": {
"width": 10
}
},
"legend": {
"visible": true,
"dragHandler": "icon",
"draggable": true,
"minimize": true,
"y": "25px",
"item": {
"text": "%data-pie",
"maxChars": 30
},
"tooltip": {
"backgroundColor": "white",
"fontColor": "black",
"text": "%t"
}
},
"series": [{
"dataV": [362, 361, 9, 98, 107, 95, 644, 246, 299, 21, 113, 68, 13, 47],
"dataPie": "Male",
"marker": {
"backgroundColor": "#004154"
}
},
{
"dataV": [149, 212, 5, 79, 182, 69, 1486, 153, 348, 21, 162, 142, 5, 104],
"dataPie": "Female",
"marker": {
"backgroundColor": "#F56E63"
}
}
]
}]
};
// render chart
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
});
</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>
</head>
<body class="zc-body">
<!-- CHART CONTAINER -->
<div id="myChart" class="chart--container">
<a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
</div>
</body>
</html>
.zc-html,
.zc-body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.chart--container {
height: 100%;
width: 450px;
min-height: 800px;
}
.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', () => {
// Javascript code to execute after DOM content
// full ZingChart schema can be found here:
// https://www.zingchart.com/docs/api/json-configuration/
let chartConfig = {
"graphset": [{
"type": "bubble-pie",
"borderColor": "#C0C0C0",
"borderWidth": 1,
"title": {
"adjustLayout": true,
"text": "Bubble Pie with Y-scrolling",
"textAlign": "left",
"fontColor": "#01573E",
"fontFamily": "Nunito Sans",
"fontSize": 18
},
"plotarea": {
"marginBottom": "dynamic",
"marginLeft": "dynamic",
"marginTop": "dynamic"
},
"plot": {
"values": [
[23439, "Label 1", 725],
[17987, "Label 2", 1693],
[475, "Label 3", 47],
[941, "Label 4", 219],
[526, "Label 5", 357],
[460, "Label 6", 197],
[15641, "Label 7", 2438],
[13881, "Label 8", 597],
[6705, "Label 9", 823],
[58, "Label 10", 15],
[159, "Label 11", 63],
[766, "Label 12", 329],
[857, "Label 13", 262],
[124, "Label 14", 28]
],
"minSize": 7,
"maxSize": 35,
"tooltip": {
"text": "%data-pie: %data-v (%data-pv%)"
},
"valueBox": {
"visible": false
}
},
"scaleX": {
"values": [0, 1000, 2000, 3000, 4000, 5000, 6000, 7000, 8000, 9000, 10000, 11000, 12000, 13000, 14000, 15000, 16000, 17000, 18000, 19000, 20000, 21000, 22000, 23000, 24000, 25000, 26000, 27000, 28000, 29000, 30000, 31000, 32000, 33000, 34000, 35000],
"label": {
"text": "values"
},
"tooltip": {
"text": "%v"
},
"item": {
"maxChars": 30
},
"guide": {
"visible": false
}
},
"scaleY": {
"fixedStep": true,
"itemsOverlap": true,
"maxItems": 39,
"mirrored": true,
"values": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13],
"labels": ["Label 1", "Label 2", "Label 3", "Label 4", "Label 5", "Label 6", "Label 7", "Label 8", "Label 9", "Label 10", "Label 11", "Label 12", "Label 13", "Label 14"],
"zoomTo": [0, 5],
"zooming": true,
"step": 1,
"label": {
"text": "Categories"
},
"item": {
"maxChars": 10
},
"tooltip": {
"text": "%v"
},
"guide": {
"visible": false
}
},
"scrollY": {
"handle": {
"width": 6
},
"bar": {
"width": 10
}
},
"legend": {
"visible": true,
"dragHandler": "icon",
"draggable": true,
"minimize": true,
"y": "25px",
"item": {
"text": "%data-pie",
"maxChars": 30
},
"tooltip": {
"backgroundColor": "white",
"fontColor": "black",
"text": "%t"
}
},
"series": [{
"dataV": [362, 361, 9, 98, 107, 95, 644, 246, 299, 21, 113, 68, 13, 47],
"dataPie": "Male",
"marker": {
"backgroundColor": "#004154"
}
},
{
"dataV": [149, 212, 5, 79, 182, 69, 1486, 153, 348, 21, 162, 142, 5, 104],
"dataPie": "Female",
"marker": {
"backgroundColor": "#F56E63"
}
}
]
}]
};
// render chart
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
});