<!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 = {
"graphset": [{
"background-color": "#fff",
"type": "bar",
"height": "50%",
"width": "100%",
"x": 0,
"y": 0,
"shapes": [{
"type": "circle",
"id": "stack",
"name": "stack",
"size": 5,
"border-width": 2,
"background-color": "black",
"x": 100,
"y": 25,
"cursor": "pointer",
"label": {
"text": "Stacked",
"offset-x": 30
},
},
{
"type": "circle",
"id": "group",
"name": "group",
"size": 5,
"border-width": 2,
"background-color": "white",
"cursor": "pointer",
"x": 200,
"y": 25,
"label": {
"text": "Grouped",
"offset-x": 30
}
}
],
"legend": {
"shared": true,
"toggle-action": "remove",
"layout": "x3",
"x": "55%",
"background-color": "none",
"border-width": 0,
"marker": {
"type": "circle",
"border-width": 0
}
},
"plotarea": {
"margin": "50px 60px 30px 60px"
},
"plot": {
"stacked": true,
"mask-tolerance": [0, 0] // helps hide bar when zooming and have value below scale
},
"scale-x": {
"line-color": "#555",
"line-width": 1,
"max-labels": 6,
"zooming": true,
"tick": {
"line-color": "none"
},
"guide": {
"line-style": "solid"
}
},
"zoom": {
"shared": true
},
"scale-y": {
"line-width": 1,
"zooming": true,
"line-color": "#555",
"step": 0.5,
"tick": {
"line-color": "none"
},
"guide": {
"line-style": "solid"
}
},
"tooltip": {
"text": "%v on %i"
},
"series": [{
"background-color": "#5698c6",
"hover-state": {
"background-color": "#000"
},
"values": [1.7, 2.2, 2.4, 2.6, 2.5, 2.3, 1.7, 1.2, 0.7, 0.4, 0.3, 0.3, 0.2, 0.25, 0.1, 0.2, 0.1, 0.3, 0.25, 0.15, 0.2, 0.3, 0.25, 0.15, 0.2, 0.2, 0.25, 0.3, 0.15, 0.2, 0.3, 0.5, 0.8, 1.3, 1.45, 2.2, 2.8, 2.9, 3.2, 2.4, 1.3, 0.7, 0.3, 0.15, 0.1, 0.25, 0.3, 0.25, 0.35, 0.5, 0.6, 0.7, 0.65, 0.6, 0.5, 0.45, 0.4, 0.35, 0.37, 0.3],
"legend-text": "Stream 1",
"visible": true
},
{
"values": [0.2, 0.2, 0.4, 1.4, 3.4, 4.2, 5.1, 4.4, 3.7, 1.2, 0.3, 0.2, 0.2, 0.2, 0.2, 0.2, 0.1, 0.4, 0.3, 0.25, 0.3, 0.35, 0.2, 0.15, 0.1, 0.07, 0.2, 0.32, 0.27, 0.12, 0.28, 0.32, 0.38, 0.4, 0.44, 0.3, 0.2, 0.15, 0.1, 0.175, 0.2, 0.24, 0.2, 0.3, 0.35, 0.3, 0.2, 0.15, 0.5, 0.6, 0.75, 1, 1.3, 0.7, 0.85, 0.8, 0.7, 0.55, 0.45, 0.26],
"text": "Stream 2",
"background-color": "#FE9E49",
"hover-state": {
"background-color": "#000"
},
"visible": true
},
{
"values": [3, 2.5, 1.7, 1.1, 0.8, 0.9, 0.9, 0.7, 0.8, 0.85, 1, 0.7, 0.5, 0.4, 0.3, 0.25, 0.15, 0.2, 0.2, 0.1, 0.25, 0.15, 0.2, 0.35, 0.1, 0.07, 0.2, 0.3, 0.25, 0.2, 0.2, 0.22, 0.25, 0.4, 0.45, 0.5, 0.7, 0.65, 0.51, 0.375, 0.2, 0.24, 0.2, 0.3, 0.35, 0.3, 0.2, 0.15, 0.5, 1.2, 1.7, 2, 2.3, 2.1, 1.7, 1.3, 1, 0.7, 0.35, 0.2],
"text": "Stream 3",
"background-color": "#C1D4ED",
"hover-state": {
"background-color": "#000"
}
}
]
},
{
"type": "area",
"height": "25%",
"y": "50%",
"width": "100%",
"x": 0,
"background-color": "#fff",
"legend": {
"shared": true,
"visible": false,
"toggle-action": "remove"
},
"plotarea": {
"margin": "20px 60px"
},
"plot": {
"stacked": true,
"alpha-area": 1,
"line-width": 0,
"marker": {
"visible": false
},
"active-area": true,
"hover-state": {
"background-color": "black"
}
},
"scale-x": {
"line-color": "#555",
"line-width": 1,
"values": "1:60",
"max-labels": 6,
"zooming": true,
"tick": {
"line-color": "none"
},
"guide": {
"line-style": "solid"
}
},
"zoom": {
"shared": true
},
"scale-y": {
"zooming": true,
"line-color": "#555",
"line-width": 1,
"tick": {
"line-color": "none"
},
"guide": {
"line-style": "solid"
}
},
"series": [{
"values": [1.7, 2.2, 2.4, 2.6, 2.5, 2.3, 1.7, 1.2, 0.7, 0.4, 0.3, 0.3, 0.2, 0.25, 0.1, 0.2, 0.1, 0.3, 0.25, 0.15, 0.2, 0.3, 0.25, 0.15, 0.2, 0.2, 0.25, 0.3, 0.15, 0.2, 0.3, 0.5, 0.8, 1.3, 1.45, 2.2, 2.8, 2.9, 3.2, 2.4, 1.3, 0.7, 0.3, 0.15, 0.1, 0.25, 0.3, 0.25, 0.35, 0.5, 0.6, 0.7, 0.65, 0.6, 0.5, 0.45, 0.4, 0.35, 0.37, 0.3],
"background-color": "#5698c6",
"line-color": "#5698c6"
},
{
"values": [0.2, 0.2, 0.4, 1.4, 3.4, 4.2, 5.1, 4.4, 3.7, 1.2, 0.3, 0.2, 0.2, 0.2, 0.2, 0.2, 0.1, 0.4, 0.3, 0.25, 0.3, 0.35, 0.2, 0.15, 0.1, 0.07, 0.2, 0.32, 0.27, 0.12, 0.28, 0.32, 0.38, 0.4, 0.44, 0.3, 0.2, 0.15, 0.1, 0.175, 0.2, 0.24, 0.2, 0.3, 0.35, 0.3, 0.2, 0.15, 0.5, 0.6, 0.75, 1, 1.3, 0.7, 0.85, 0.8, 0.7, 0.55, 0.45, 0.26],
"background-color": "#FE9E49",
"line-color": "#FE9E49"
},
{
"values": [3, 2.5, 1.7, 1.1, 0.8, 0.9, 0.9, 0.7, 0.8, 0.85, 1, 0.7, 0.5, 0.4, 0.3, 0.25, 0.15, 0.2, 0.2, 0.1, 0.25, 0.15, 0.2, 0.35, 0.1, 0.07, 0.2, 0.3, 0.25, 0.2, 0.2, 0.22, 0.25, 0.4, 0.45, 0.5, 0.7, 0.65, 0.51, 0.375, 0.2, 0.24, 0.2, 0.3, 0.35, 0.3, 0.2, 0.15, 0.5, 1.2, 1.7, 2, 2.3, 2.1, 1.7, 1.3, 1, 0.7, 0.35, 0.2],
"background-color": "#C1D4ED",
"line-color": "#C1D4ED"
}
]
},
{
"type": "line",
"height": "25%",
"y": "75%",
"width": "100%",
"x": 0,
"background-color": "#fff",
"legend": {
"shared": true,
"visible": false,
"toggle-action": "remove"
},
"plotarea": {
"margin": "20px 60px 30px 60px"
},
"plot": {
"line-width": 2,
"marker": {
"size": 0,
"border-width": 0
},
"hover-marker": {
"size": 5,
"background-color": "black"
}
},
"scale-x": {
"line-color": "#555",
"line-width": 1,
"values": "1:60",
"max-labels": 6,
"zooming": true,
"tick": {
"line-color": "none"
},
"guide": {
"line-style": "solid"
}
},
"scale-y": {
"zooming": true,
"line-color": "#555",
"line-width": 1,
"tick": {
"line-color": "none"
},
"guide": {
"line-style": "solid"
}
},
"zoom": {
"shared": true
},
"series": [{
"values": [1.7, 2.2, 2.4, 2.6, 2.5, 2.3, 1.7, 1.2, 0.7, 0.4, 0.3, 0.3, 0.2, 0.25, 0.1, 0.2, 0.1, 0.3, 0.25, 0.15, 0.2, 0.3, 0.25, 0.15, 0.2, 0.2, 0.25, 0.3, 0.15, 0.2, 0.3, 0.5, 0.8, 1.3, 1.45, 2.2, 2.8, 2.9, 3.2, 2.4, 1.3, 0.7, 0.3, 0.15, 0.1, 0.25, 0.3, 0.25, 0.35, 0.5, 0.6, 0.7, 0.65, 0.6, 0.5, 0.45, 0.4, 0.35, 0.37, 0.3],
"line-color": "#5698c6",
"marker": {
"background-color": "#5698c6",
}
},
{
"values": [0.2, 0.2, 0.4, 1.4, 3.4, 4.2, 5.1, 4.4, 3.7, 1.2, 0.3, 0.2, 0.2, 0.2, 0.2, 0.2, 0.1, 0.4, 0.3, 0.25, 0.3, 0.35, 0.2, 0.15, 0.1, 0.07, 0.2, 0.32, 0.27, 0.12, 0.28, 0.32, 0.38, 0.4, 0.44, 0.3, 0.2, 0.15, 0.1, 0.175, 0.2, 0.24, 0.2, 0.3, 0.35, 0.3, 0.2, 0.15, 0.5, 0.6, 0.75, 1, 1.3, 0.7, 0.85, 0.8, 0.7, 0.55, 0.45, 0.26],
"line-color": "#FE9E49",
"marker": {
"background-color": "#FE9E49",
}
},
{
"values": [3, 2.5, 1.7, 1.1, 0.8, 0.9, 0.9, 0.7, 0.8, 0.85, 1, 0.7, 0.5, 0.4, 0.3, 0.25, 0.15, 0.2, 0.2, 0.1, 0.25, 0.15, 0.2, 0.35, 0.1, 0.07, 0.2, 0.3, 0.25, 0.2, 0.2, 0.22, 0.25, 0.4, 0.45, 0.5, 0.7, 0.65, 0.51, 0.375, 0.2, 0.24, 0.2, 0.3, 0.35, 0.3, 0.2, 0.15, 0.5, 1.2, 1.7, 2, 2.3, 2.1, 1.7, 1.3, 1, 0.7, 0.35, 0.2],
"line-color": "#C1D4ED",
"marker": {
"background-color": "#C1D4ED",
}
}
]
}
]
};
function toggleCharts(e) {
// just referencing original config. You can get chart info as well
if (e.shapeid === 'stack') {
myConfig.graphset[0].plot.stacked = true;
myConfig.graphset[1].plot.stacked = true;
myConfig.graphset[0].shapes[0]['background-color'] = 'black';
myConfig.graphset[0].shapes[1]['background-color'] = 'white';
} else if (e.shapeid === 'group') {
myConfig.graphset[0].plot.stacked = false;
myConfig.graphset[1].plot.stacked = false;
myConfig.graphset[0].shapes[0]['background-color'] = 'white';
myConfig.graphset[0].shapes[1]['background-color'] = 'black';
}
zingchart.exec('myChart', 'setdata', {
data: myConfig
});
}
zingchart.bind('myChart', 'shape_click', toggleCharts);
zingchart.render({
id: 'myChart',
data: myConfig,
height: "100%",
width: "100%"
});
</script>
</body>
</html>
var myConfig = {
"graphset": [{
"background-color": "#fff",
"type": "bar",
"height": "50%",
"width": "100%",
"x": 0,
"y": 0,
"shapes": [{
"type": "circle",
"id": "stack",
"name": "stack",
"size": 5,
"border-width": 2,
"background-color": "black",
"x": 100,
"y": 25,
"cursor": "pointer",
"label": {
"text": "Stacked",
"offset-x": 30
},
},
{
"type": "circle",
"id": "group",
"name": "group",
"size": 5,
"border-width": 2,
"background-color": "white",
"cursor": "pointer",
"x": 200,
"y": 25,
"label": {
"text": "Grouped",
"offset-x": 30
}
}
],
"legend": {
"shared": true,
"toggle-action": "remove",
"layout": "x3",
"x": "55%",
"background-color": "none",
"border-width": 0,
"marker": {
"type": "circle",
"border-width": 0
}
},
"plotarea": {
"margin": "50px 60px 30px 60px"
},
"plot": {
"stacked": true,
"mask-tolerance": [0, 0] // helps hide bar when zooming and have value below scale
},
"scale-x": {
"line-color": "#555",
"line-width": 1,
"max-labels": 6,
"zooming": true,
"tick": {
"line-color": "none"
},
"guide": {
"line-style": "solid"
}
},
"zoom": {
"shared": true
},
"scale-y": {
"line-width": 1,
"zooming": true,
"line-color": "#555",
"step": 0.5,
"tick": {
"line-color": "none"
},
"guide": {
"line-style": "solid"
}
},
"tooltip": {
"text": "%v on %i"
},
"series": [{
"background-color": "#5698c6",
"hover-state": {
"background-color": "#000"
},
"values": [1.7, 2.2, 2.4, 2.6, 2.5, 2.3, 1.7, 1.2, 0.7, 0.4, 0.3, 0.3, 0.2, 0.25, 0.1, 0.2, 0.1, 0.3, 0.25, 0.15, 0.2, 0.3, 0.25, 0.15, 0.2, 0.2, 0.25, 0.3, 0.15, 0.2, 0.3, 0.5, 0.8, 1.3, 1.45, 2.2, 2.8, 2.9, 3.2, 2.4, 1.3, 0.7, 0.3, 0.15, 0.1, 0.25, 0.3, 0.25, 0.35, 0.5, 0.6, 0.7, 0.65, 0.6, 0.5, 0.45, 0.4, 0.35, 0.37, 0.3],
"legend-text": "Stream 1",
"visible": true
},
{
"values": [0.2, 0.2, 0.4, 1.4, 3.4, 4.2, 5.1, 4.4, 3.7, 1.2, 0.3, 0.2, 0.2, 0.2, 0.2, 0.2, 0.1, 0.4, 0.3, 0.25, 0.3, 0.35, 0.2, 0.15, 0.1, 0.07, 0.2, 0.32, 0.27, 0.12, 0.28, 0.32, 0.38, 0.4, 0.44, 0.3, 0.2, 0.15, 0.1, 0.175, 0.2, 0.24, 0.2, 0.3, 0.35, 0.3, 0.2, 0.15, 0.5, 0.6, 0.75, 1, 1.3, 0.7, 0.85, 0.8, 0.7, 0.55, 0.45, 0.26],
"text": "Stream 2",
"background-color": "#FE9E49",
"hover-state": {
"background-color": "#000"
},
"visible": true
},
{
"values": [3, 2.5, 1.7, 1.1, 0.8, 0.9, 0.9, 0.7, 0.8, 0.85, 1, 0.7, 0.5, 0.4, 0.3, 0.25, 0.15, 0.2, 0.2, 0.1, 0.25, 0.15, 0.2, 0.35, 0.1, 0.07, 0.2, 0.3, 0.25, 0.2, 0.2, 0.22, 0.25, 0.4, 0.45, 0.5, 0.7, 0.65, 0.51, 0.375, 0.2, 0.24, 0.2, 0.3, 0.35, 0.3, 0.2, 0.15, 0.5, 1.2, 1.7, 2, 2.3, 2.1, 1.7, 1.3, 1, 0.7, 0.35, 0.2],
"text": "Stream 3",
"background-color": "#C1D4ED",
"hover-state": {
"background-color": "#000"
}
}
]
},
{
"type": "area",
"height": "25%",
"y": "50%",
"width": "100%",
"x": 0,
"background-color": "#fff",
"legend": {
"shared": true,
"visible": false,
"toggle-action": "remove"
},
"plotarea": {
"margin": "20px 60px"
},
"plot": {
"stacked": true,
"alpha-area": 1,
"line-width": 0,
"marker": {
"visible": false
},
"active-area": true,
"hover-state": {
"background-color": "black"
}
},
"scale-x": {
"line-color": "#555",
"line-width": 1,
"values": "1:60",
"max-labels": 6,
"zooming": true,
"tick": {
"line-color": "none"
},
"guide": {
"line-style": "solid"
}
},
"zoom": {
"shared": true
},
"scale-y": {
"zooming": true,
"line-color": "#555",
"line-width": 1,
"tick": {
"line-color": "none"
},
"guide": {
"line-style": "solid"
}
},
"series": [{
"values": [1.7, 2.2, 2.4, 2.6, 2.5, 2.3, 1.7, 1.2, 0.7, 0.4, 0.3, 0.3, 0.2, 0.25, 0.1, 0.2, 0.1, 0.3, 0.25, 0.15, 0.2, 0.3, 0.25, 0.15, 0.2, 0.2, 0.25, 0.3, 0.15, 0.2, 0.3, 0.5, 0.8, 1.3, 1.45, 2.2, 2.8, 2.9, 3.2, 2.4, 1.3, 0.7, 0.3, 0.15, 0.1, 0.25, 0.3, 0.25, 0.35, 0.5, 0.6, 0.7, 0.65, 0.6, 0.5, 0.45, 0.4, 0.35, 0.37, 0.3],
"background-color": "#5698c6",
"line-color": "#5698c6"
},
{
"values": [0.2, 0.2, 0.4, 1.4, 3.4, 4.2, 5.1, 4.4, 3.7, 1.2, 0.3, 0.2, 0.2, 0.2, 0.2, 0.2, 0.1, 0.4, 0.3, 0.25, 0.3, 0.35, 0.2, 0.15, 0.1, 0.07, 0.2, 0.32, 0.27, 0.12, 0.28, 0.32, 0.38, 0.4, 0.44, 0.3, 0.2, 0.15, 0.1, 0.175, 0.2, 0.24, 0.2, 0.3, 0.35, 0.3, 0.2, 0.15, 0.5, 0.6, 0.75, 1, 1.3, 0.7, 0.85, 0.8, 0.7, 0.55, 0.45, 0.26],
"background-color": "#FE9E49",
"line-color": "#FE9E49"
},
{
"values": [3, 2.5, 1.7, 1.1, 0.8, 0.9, 0.9, 0.7, 0.8, 0.85, 1, 0.7, 0.5, 0.4, 0.3, 0.25, 0.15, 0.2, 0.2, 0.1, 0.25, 0.15, 0.2, 0.35, 0.1, 0.07, 0.2, 0.3, 0.25, 0.2, 0.2, 0.22, 0.25, 0.4, 0.45, 0.5, 0.7, 0.65, 0.51, 0.375, 0.2, 0.24, 0.2, 0.3, 0.35, 0.3, 0.2, 0.15, 0.5, 1.2, 1.7, 2, 2.3, 2.1, 1.7, 1.3, 1, 0.7, 0.35, 0.2],
"background-color": "#C1D4ED",
"line-color": "#C1D4ED"
}
]
},
{
"type": "line",
"height": "25%",
"y": "75%",
"width": "100%",
"x": 0,
"background-color": "#fff",
"legend": {
"shared": true,
"visible": false,
"toggle-action": "remove"
},
"plotarea": {
"margin": "20px 60px 30px 60px"
},
"plot": {
"line-width": 2,
"marker": {
"size": 0,
"border-width": 0
},
"hover-marker": {
"size": 5,
"background-color": "black"
}
},
"scale-x": {
"line-color": "#555",
"line-width": 1,
"values": "1:60",
"max-labels": 6,
"zooming": true,
"tick": {
"line-color": "none"
},
"guide": {
"line-style": "solid"
}
},
"scale-y": {
"zooming": true,
"line-color": "#555",
"line-width": 1,
"tick": {
"line-color": "none"
},
"guide": {
"line-style": "solid"
}
},
"zoom": {
"shared": true
},
"series": [{
"values": [1.7, 2.2, 2.4, 2.6, 2.5, 2.3, 1.7, 1.2, 0.7, 0.4, 0.3, 0.3, 0.2, 0.25, 0.1, 0.2, 0.1, 0.3, 0.25, 0.15, 0.2, 0.3, 0.25, 0.15, 0.2, 0.2, 0.25, 0.3, 0.15, 0.2, 0.3, 0.5, 0.8, 1.3, 1.45, 2.2, 2.8, 2.9, 3.2, 2.4, 1.3, 0.7, 0.3, 0.15, 0.1, 0.25, 0.3, 0.25, 0.35, 0.5, 0.6, 0.7, 0.65, 0.6, 0.5, 0.45, 0.4, 0.35, 0.37, 0.3],
"line-color": "#5698c6",
"marker": {
"background-color": "#5698c6",
}
},
{
"values": [0.2, 0.2, 0.4, 1.4, 3.4, 4.2, 5.1, 4.4, 3.7, 1.2, 0.3, 0.2, 0.2, 0.2, 0.2, 0.2, 0.1, 0.4, 0.3, 0.25, 0.3, 0.35, 0.2, 0.15, 0.1, 0.07, 0.2, 0.32, 0.27, 0.12, 0.28, 0.32, 0.38, 0.4, 0.44, 0.3, 0.2, 0.15, 0.1, 0.175, 0.2, 0.24, 0.2, 0.3, 0.35, 0.3, 0.2, 0.15, 0.5, 0.6, 0.75, 1, 1.3, 0.7, 0.85, 0.8, 0.7, 0.55, 0.45, 0.26],
"line-color": "#FE9E49",
"marker": {
"background-color": "#FE9E49",
}
},
{
"values": [3, 2.5, 1.7, 1.1, 0.8, 0.9, 0.9, 0.7, 0.8, 0.85, 1, 0.7, 0.5, 0.4, 0.3, 0.25, 0.15, 0.2, 0.2, 0.1, 0.25, 0.15, 0.2, 0.35, 0.1, 0.07, 0.2, 0.3, 0.25, 0.2, 0.2, 0.22, 0.25, 0.4, 0.45, 0.5, 0.7, 0.65, 0.51, 0.375, 0.2, 0.24, 0.2, 0.3, 0.35, 0.3, 0.2, 0.15, 0.5, 1.2, 1.7, 2, 2.3, 2.1, 1.7, 1.3, 1, 0.7, 0.35, 0.2],
"line-color": "#C1D4ED",
"marker": {
"background-color": "#C1D4ED",
}
}
]
}
]
};
function toggleCharts(e) {
// just referencing original config. You can get chart info as well
if (e.shapeid === 'stack') {
myConfig.graphset[0].plot.stacked = true;
myConfig.graphset[1].plot.stacked = true;
myConfig.graphset[0].shapes[0]['background-color'] = 'black';
myConfig.graphset[0].shapes[1]['background-color'] = 'white';
} else if (e.shapeid === 'group') {
myConfig.graphset[0].plot.stacked = false;
myConfig.graphset[1].plot.stacked = false;
myConfig.graphset[0].shapes[0]['background-color'] = 'white';
myConfig.graphset[0].shapes[1]['background-color'] = 'black';
}
zingchart.exec('myChart', 'setdata', {
data: myConfig
});
}
zingchart.bind('myChart', 'shape_click', toggleCharts);
zingchart.render({
id: 'myChart',
data: myConfig,
height: "100%",
width: "100%"
});