<!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 Time-Series Scale"
},
"scale-x": {
"min-value": 1420218000000,
"step": "day",
"transform": {
"type": "date",
"all": "%m/%d/%y"
},
"items-overlap": true,
"max-items": 5
},
"scale-y": {
"values": "0:50:10",
"format": "$%v"
},
"scale-y-2": {
"values": "0:15000:3000",
"visible": false
},
"series": [{
"type": "stock",
"scales": "scale-x,scale-y",
"values": [
[1420218000000, [30, 39, 25, 34]], //01/02/15
[1420477200000, [34, 40, 29, 30]], //01/05/15
[1420563600000, [30, 45, 25, 36]], //01/06/15
[1420650000000, [36, 39, 25, 29]], //01/07/15
[1420736400000, [29, 33, 21, 25]], //01/08/15
[1420822800000, [25, 37, 25, 33]], //01/09/15
[1421082000000, [33, 41, 31, 35]], //01/12/15
[1421168400000, [35, 39, 28, 31]], //01/13/15
[1421254800000, [31, 40, 28, 30]], //01/14/15
[1421341200000, [30, 36, 25, 28]], //01/15/15
[1421427600000, [28, 38, 28, 37]], //01/16/15
[1421773200000, [37, 48, 37, 40]], //01/20/15
[1421859600000, [40, 45, 34, 35]], //01/21/15
[1421946000000, [35, 39, 31, 33]], //01/22/15
[1422032400000, [33, 34, 24, 26]], //01/23/15
[1422291600000, [26, 34, 25, 31]], //01/26/15
[1422378000000, [31, 38, 28, 33]], //01/27/15
[1422464400000, [33, 37, 27, 29]], //01/28/15
[1422550800000, [29, 35, 25, 30]], //01/29/15
[1422637200000, [30, 39, 29, 34]] //01/30/15
],
"tooltip": {
"text": "On %kv:<br><br>Open: $%v0<br>High: $%v1<br>Low: $%v2<br>Close: $%v3<br>",
"decimals": 2
}
},
{
"type": "bar",
"scales": "scale-x,scale-y-2",
"values": [
[1420218000000, 3000], //01/02/15
[1420477200000, 3400], //01/05/15
[1420563600000, 1500], //01/06/15
[1420650000000, 2900], //01/07/15
[1420736400000, 3100], //01/08/15
[1420822800000, 2000], //01/09/15
[1421082000000, 2500], //01/12/15
[1421168400000, 3900], //01/13/15
[1421254800000, 3500], //01/14/15
[1421341200000, 2200], //01/15/15
[1421427600000, 2600], //01/16/15
[1421773200000, 2700], //01/20/15
[1421859600000, 3100], //01/21/15
[1421946000000, 3400], //01/22/15
[1422032400000, 3000], //01/23/15
[1422291600000, 3200], //01/26/15
[1422378000000, 2900], //01/27/15
[1422464400000, 2400], //01/28/15
[1422550800000, 2100], //01/29/15
[1422637200000, 3400] //01/30/15
],
"tooltip": {
"text": "Volume: %v shares",
"thousands-separator": ","
}
}
]
};
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 Time-Series Scale"
},
"scale-x": {
"min-value": 1420218000000,
"step": "day",
"transform": {
"type": "date",
"all": "%m/%d/%y"
},
"items-overlap": true,
"max-items": 5
},
"scale-y": {
"values": "0:50:10",
"format": "$%v"
},
"scale-y-2": {
"values": "0:15000:3000",
"visible": false
},
"series": [{
"type": "stock",
"scales": "scale-x,scale-y",
"values": [
[1420218000000, [30, 39, 25, 34]], //01/02/15
[1420477200000, [34, 40, 29, 30]], //01/05/15
[1420563600000, [30, 45, 25, 36]], //01/06/15
[1420650000000, [36, 39, 25, 29]], //01/07/15
[1420736400000, [29, 33, 21, 25]], //01/08/15
[1420822800000, [25, 37, 25, 33]], //01/09/15
[1421082000000, [33, 41, 31, 35]], //01/12/15
[1421168400000, [35, 39, 28, 31]], //01/13/15
[1421254800000, [31, 40, 28, 30]], //01/14/15
[1421341200000, [30, 36, 25, 28]], //01/15/15
[1421427600000, [28, 38, 28, 37]], //01/16/15
[1421773200000, [37, 48, 37, 40]], //01/20/15
[1421859600000, [40, 45, 34, 35]], //01/21/15
[1421946000000, [35, 39, 31, 33]], //01/22/15
[1422032400000, [33, 34, 24, 26]], //01/23/15
[1422291600000, [26, 34, 25, 31]], //01/26/15
[1422378000000, [31, 38, 28, 33]], //01/27/15
[1422464400000, [33, 37, 27, 29]], //01/28/15
[1422550800000, [29, 35, 25, 30]], //01/29/15
[1422637200000, [30, 39, 29, 34]] //01/30/15
],
"tooltip": {
"text": "On %kv:<br><br>Open: $%v0<br>High: $%v1<br>Low: $%v2<br>Close: $%v3<br>",
"decimals": 2
}
},
{
"type": "bar",
"scales": "scale-x,scale-y-2",
"values": [
[1420218000000, 3000], //01/02/15
[1420477200000, 3400], //01/05/15
[1420563600000, 1500], //01/06/15
[1420650000000, 2900], //01/07/15
[1420736400000, 3100], //01/08/15
[1420822800000, 2000], //01/09/15
[1421082000000, 2500], //01/12/15
[1421168400000, 3900], //01/13/15
[1421254800000, 3500], //01/14/15
[1421341200000, 2200], //01/15/15
[1421427600000, 2600], //01/16/15
[1421773200000, 2700], //01/20/15
[1421859600000, 3100], //01/21/15
[1421946000000, 3400], //01/22/15
[1422032400000, 3000], //01/23/15
[1422291600000, 3200], //01/26/15
[1422378000000, 2900], //01/27/15
[1422464400000, 2400], //01/28/15
[1422550800000, 2100], //01/29/15
[1422637200000, 3400] //01/30/15
],
"tooltip": {
"text": "Volume: %v shares",
"thousands-separator": ","
}
}
]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: "100%",
width: "100%"
});