<!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 {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#myChart {
height: 100%;
width: 100%;
min-height: 150px;
}
</style>
</head>
<body>
<div id='myChart'></div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
var myConfig = {
"graphset": [{
"type": "mixed",
"title": {
"text": "Stock & Volume Chart (January)"
},
"scale-y": {
"offset-start": "35%",
"values": "29:33:2",
"format": "$%v",
"label": {
"text": "Prices"
}
},
"scale-y-2": {
"blended": true,
"offset-end": "75%",
"placement": "default",
"values": "0:3:3",
"format": "%vM",
"label": {
"text": "Volume"
}
},
"crosshairX": {
"plotLabel": {
"multiple": true,
"headerText": "Day %kv<br><hr>",
"fontSize": 16
}
},
"arrows": [{
"backgroundColor": "#f90",
"length": 15,
"size": 2,
"alpha": 1,
"offsetY": -30,
"borderWidth": 2,
"borderColor": "#f60",
"border-radius": 5,
"padding": 5,
"to": {
"hook": "node:plot=0, index=12"
},
"label": {
"text": "Some Event Happend",
"offsetY": -55
}
}],
"labels": [{
"hook": "node:plot=2,index=13",
"text": "Highest Sum Volume",
"padding": 10,
"backgroundColor": "#f90",
"borderWidth": 2,
"borderColor": "#f60",
"shadow": true,
"callout": true,
"calloutWidth": 12,
"callout-height": 15,
"border-radius": 5,
"calloutPosition": "bottom",
"offset-y": -35,
"calloutTip": {
"type": "circle",
"background-color": "#fff",
"border-width": 2,
"border-color": "#f60",
"size": 4,
"shadow": true
}
}],
"series": [{
"type": "stock",
"scales": "scale-x,scale-y",
"guideLabel": {
"text": "Open: %open<br>High: %high<br>Low: %low<br>Close: %close"
},
"values": [
[31.34, 31.46, 30.87, 31.06],
[31.8, 32.25, 31.52, 32.05],
[32.05, 32.57, 31.93, 32.3],
[32.21, 32.39, 31.98, 32.08],
[32.32, 32.38, 32.13, 32.37],
[32.52, 32.53, 31.95, 32.03],
[32.07, 32.14, 31.77, 31.98],
[32.26, 32.33, 31.61, 31.86],
[31.65, 31.85, 31.41, 31.78],
[31.86, 31.97, 31.56, 31.58],
[31.51, 31.65, 31.45, 31.59],
[31.84, 31.87, 31.55, 31.85],
[31.83, 32.08, 31.71, 32.04],
[32.3, 32.36, 31.96, 32.28],
[32.43, 32.88, 32.29, 32.48],
[32.72, 32.74, 32.4, 32.6],
[32.39, 32.46, 32.2, 32.38],
[32.47, 32.49, 31.81, 31.84],
[31.84, 32.2, 31.78, 32.08],
[31.88, 32.11, 31.82, 31.89]
]
},
{
"type": "bar",
"scales": "scale-x,scale-y-2",
"stacked": true,
"text": "volume 1",
"values": [1.3, 1.5, 2.1, 2.2, 1.9, 1.7, 1.8, 1.9, 1.9, 2, 1.4, 2.1, 2.3, 2.6, 2.5, 2.3, 1.5, 2.4, 1.6, 1.4]
},
{
"type": "bar",
"scales": "scale-x,scale-y-2",
"stacked": true,
"text": "volume 2",
"values": [1.3, 1.5, 2.1, 2.2, 1.9, 1.7, 1.8, 1.9, 1.9, 2, 1.4, 2.1, 2.3, 2.6, 2.5, 2.3, 1.5, 2.4, 1.6, 1.4]
}
]
}]
};
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 {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#myChart {
height: 100%;
width: 100%;
min-height: 150px;
}
var myConfig = {
"graphset": [{
"type": "mixed",
"title": {
"text": "Stock & Volume Chart (January)"
},
"scale-y": {
"offset-start": "35%",
"values": "29:33:2",
"format": "$%v",
"label": {
"text": "Prices"
}
},
"scale-y-2": {
"blended": true,
"offset-end": "75%",
"placement": "default",
"values": "0:3:3",
"format": "%vM",
"label": {
"text": "Volume"
}
},
"crosshairX": {
"plotLabel": {
"multiple": true,
"headerText": "Day %kv<br><hr>",
"fontSize": 16
}
},
"arrows": [{
"backgroundColor": "#f90",
"length": 15,
"size": 2,
"alpha": 1,
"offsetY": -30,
"borderWidth": 2,
"borderColor": "#f60",
"border-radius": 5,
"padding": 5,
"to": {
"hook": "node:plot=0, index=12"
},
"label": {
"text": "Some Event Happend",
"offsetY": -55
}
}],
"labels": [{
"hook": "node:plot=2,index=13",
"text": "Highest Sum Volume",
"padding": 10,
"backgroundColor": "#f90",
"borderWidth": 2,
"borderColor": "#f60",
"shadow": true,
"callout": true,
"calloutWidth": 12,
"callout-height": 15,
"border-radius": 5,
"calloutPosition": "bottom",
"offset-y": -35,
"calloutTip": {
"type": "circle",
"background-color": "#fff",
"border-width": 2,
"border-color": "#f60",
"size": 4,
"shadow": true
}
}],
"series": [{
"type": "stock",
"scales": "scale-x,scale-y",
"guideLabel": {
"text": "Open: %open<br>High: %high<br>Low: %low<br>Close: %close"
},
"values": [
[31.34, 31.46, 30.87, 31.06],
[31.8, 32.25, 31.52, 32.05],
[32.05, 32.57, 31.93, 32.3],
[32.21, 32.39, 31.98, 32.08],
[32.32, 32.38, 32.13, 32.37],
[32.52, 32.53, 31.95, 32.03],
[32.07, 32.14, 31.77, 31.98],
[32.26, 32.33, 31.61, 31.86],
[31.65, 31.85, 31.41, 31.78],
[31.86, 31.97, 31.56, 31.58],
[31.51, 31.65, 31.45, 31.59],
[31.84, 31.87, 31.55, 31.85],
[31.83, 32.08, 31.71, 32.04],
[32.3, 32.36, 31.96, 32.28],
[32.43, 32.88, 32.29, 32.48],
[32.72, 32.74, 32.4, 32.6],
[32.39, 32.46, 32.2, 32.38],
[32.47, 32.49, 31.81, 31.84],
[31.84, 32.2, 31.78, 32.08],
[31.88, 32.11, 31.82, 31.89]
]
},
{
"type": "bar",
"scales": "scale-x,scale-y-2",
"stacked": true,
"text": "volume 1",
"values": [1.3, 1.5, 2.1, 2.2, 1.9, 1.7, 1.8, 1.9, 1.9, 2, 1.4, 2.1, 2.3, 2.6, 2.5, 2.3, 1.5, 2.4, 1.6, 1.4]
},
{
"type": "bar",
"scales": "scale-x,scale-y-2",
"stacked": true,
"text": "volume 2",
"values": [1.3, 1.5, 2.1, 2.2, 1.9, 1.7, 1.8, 1.9, 1.9, 2, 1.4, 2.1, 2.3, 2.6, 2.5, 2.3, 1.5, 2.4, 1.6, 1.4]
}
]
}]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: '100%',
width: "100%"
});