<!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"];
var myConfig = {
"type": "mixed",
"title": {
"text": "Mixed Chart with Multiple Scales"
},
"scale-x": {
"labels": ["Start", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "End"],
"label": {
"text": "scale-x"
}
},
"scale-y": {
"values": "0:200:50",
"label": {
"text": "scale-y"
}
},
"scale-y-2": {
"values": "0:100:25",
"label": {
"text": "scale-y-2"
}
},
"series": [{
"type": "bar",
"scales": "scale-x,scale-y",
"values": [
34, 30, 36, 29, 25, 33, 35, 31, 30, 28,
37, 40, 35, 33, 26, 31, 33, 29, 30, 34,
33, 25, 15, 23, 41, 29, 17, 29, 12, 39
],
"stacked": true,
"stack": 1,
"bar-width": "80%"
},
{
"type": "bar",
"scales": "scale-x,scale-y",
"values": [
30, 34, 15, 29, 31, 20, 25, 39, 35, 22,
26, 27, 31, 34, 30, 32, 29, 24, 21, 34,
14, 21, 10, 24, 18, 29, 33, 20, 30, 19
],
"stacked": true,
"stack": 1,
"bar-width": "80%"
},
{
"type": "bar",
"scales": "scale-x,scale-y",
"values": [
3, 5, 2, 1, 9, 7, 6, 4, 5, 2,
4, 3, 8, 5, 7, 9, 1, 2, 6, 4,
7, 1, 9, 3, 3, 5, 2, 5, 3, 4
],
"stacked": true,
"stack": 1,
"bar-width": "80%"
},
{
"type": "line",
"scales": "scale-x,scale-y-2",
"values": [
75, 81, 73, 69, 79, 83, 92, 74, 68, 78,
83, 76, 65, 78, 72, 82, 78, 86, 73, 67,
74, 61, 89, 74, 70, 80, 63, 88, 71, 80
],
"marker": {
"size": 3
}
},
{
"type": "line",
"scales": "scale-x,scale-y-2",
"values": [
61, 75, 78, 65, 83, 79, 91, 87, 76, 91,
85, 76, 83, 98, 67, 87, 76, 68, 85, 73,
83, 95, 71, 84, 90, 88, 73, 82, 62, 90
],
"marker": {
"size": 3
}
}
]
};
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 = {
"type": "mixed",
"title": {
"text": "Mixed Chart with Multiple Scales"
},
"scale-x": {
"labels": ["Start", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "End"],
"label": {
"text": "scale-x"
}
},
"scale-y": {
"values": "0:200:50",
"label": {
"text": "scale-y"
}
},
"scale-y-2": {
"values": "0:100:25",
"label": {
"text": "scale-y-2"
}
},
"series": [{
"type": "bar",
"scales": "scale-x,scale-y",
"values": [
34, 30, 36, 29, 25, 33, 35, 31, 30, 28,
37, 40, 35, 33, 26, 31, 33, 29, 30, 34,
33, 25, 15, 23, 41, 29, 17, 29, 12, 39
],
"stacked": true,
"stack": 1,
"bar-width": "80%"
},
{
"type": "bar",
"scales": "scale-x,scale-y",
"values": [
30, 34, 15, 29, 31, 20, 25, 39, 35, 22,
26, 27, 31, 34, 30, 32, 29, 24, 21, 34,
14, 21, 10, 24, 18, 29, 33, 20, 30, 19
],
"stacked": true,
"stack": 1,
"bar-width": "80%"
},
{
"type": "bar",
"scales": "scale-x,scale-y",
"values": [
3, 5, 2, 1, 9, 7, 6, 4, 5, 2,
4, 3, 8, 5, 7, 9, 1, 2, 6, 4,
7, 1, 9, 3, 3, 5, 2, 5, 3, 4
],
"stacked": true,
"stack": 1,
"bar-width": "80%"
},
{
"type": "line",
"scales": "scale-x,scale-y-2",
"values": [
75, 81, 73, 69, 79, 83, 92, 74, 68, 78,
83, 76, 65, 78, 72, 82, 78, 86, 73, 67,
74, 61, 89, 74, 70, 80, 63, 88, 71, 80
],
"marker": {
"size": 3
}
},
{
"type": "line",
"scales": "scale-x,scale-y-2",
"values": [
61, 75, 78, 65, 83, 79, 91, 87, 76, 91,
85, 76, 83, 98, 67, 87, 76, 68, 85, 73,
83, 95, 71, 84, 90, 88, 73, 82, 62, 90
],
"marker": {
"size": 3
}
}
]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: "100%",
width: "100%"
});