<!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>
.container {
width: 400px;
height: 200px;
resize: both;
overflow: scroll;
min-width: 400px;
}
#myChart {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class='container'>
<div id='myChart'></div>
</div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
var myConfig = {
type: 'bar',
scaleX: {
minValue: 1435741200000,
step: 'day',
transform: {
type: 'date',
all: '%m/%d/%y'
},
item: {
fontSize: 10
},
zooming: true,
zoomToValues: [1441098000000, 1446195600000],
mediaRules: [{
maxWidth: 600,
maxItems: 5
},
{
maxWidth: 400,
maxItems: 3,
item: {
fontSize: 9
}
}
]
},
zoom: {
shared: true,
backgroundColor: '#29A2CC'
},
scrollX: {
bar: {
backgroundColor: '#7ecde7 #d4eef7',
alpha: 0.5,
height: '5%'
},
handle: {
backgroundColor: '#29A2CC',
height: '1%'
}
},
preview: {
adjustLayout: true,
height: '15%',
borderWidth: 1,
mask: {
backgroundColor: '#7ecde7'
},
handle: {
backgroundColor: '#1c7897',
borderWidth: 1,
borderColor: '#08222b',
height: '20px',
width: '5px'
}
},
scaleY: {
values: '0:15:5',
format: '%vM',
item: {
fontSize: 10
},
guide: {
lineStyle: 'dotted'
},
mediaRules: [{
maxWidth: 600,
values: '0:15:7.5'
},
{
maxWidth: 400,
decimals: 0,
item: {
fontSize: 9
}
}
]
},
plot: {
backgroundColor: '#7CA82B',
barWidth: '70%',
tooltip: {
visible: false
},
mediaRules: [{
maxWidth: 600,
barWidth: '80%'
},
{
maxWidth: 400,
barWidth: '90%'
}
]
},
plotarea: {
adjustLayout: true
},
crosshairX: {
plotLabel: {
text: 'Volume: %vM',
decimals: 2,
multiple: true,
placement: 'node-top',
backgroundColor: 'white',
alpha: 0.8,
padding: '5%',
borderColor: '#7CA82B',
borderRadius: '3px'
},
scaleLabel: {
fontColor: 'gray',
backgroundColor: 'white',
borderWidth: 1,
borderColor: '#29A2CC',
borderRadius: '3px'
},
mediaRules: [{
maxWidth: 600,
plotLabel: {
text: 'Volume:<br>%vM'
}
},
{
maxWidth: 400,
plotLabel: {
text: '%vM',
fontSize: 9
},
scaleLabel: {
fontSize: 9
}
}
]
},
series: [{
values: [
[1435741200000, 1.99], //07/01/15
[1435827600000, 1.34], //07/02/15
[1436173200000, 1.90], //07/06/15
[1436259600000, 3.45], //07/07/15
[1436346000000, 2.38], //07/08/15
[1436432400000, 2.27], //07/09/15
[1436518800000, 2.40], //07/10/15
[1436778000000, 3.96], //07/13/15
[1436864400000, 4.74], //07/14/15
[1436950800000, 2.99], //07/15/15
[1437037200000, 4.10], //07/16/15
[1437123600000, 4.93], //07/17/15
[1437382800000, 4.75], //07/20/15
[1437469200000, 3.18], //07/21/15
[1437555600000, 3.11], //07/22/15
[1437642000000, 9.37], //07/23/15
[1437728400000, 9.91], //07/24/15
[1437987600000, 7.49], //07/27/15
[1438074000000, 5.27], //07/28/15
[1438160400000, 3.75], //07/29/15
[1438246800000, 3.74], //07/30/15
[1438333200000, 3.03], //07/31/15
[1438592400000, 3.01], //08/03/15
[1438678800000, 2.93], //08/04/15
[1438765200000, 2.89], //08/05/15
[1438851600000, 3.82], //08/06/15
[1438938000000, 3.97], //08/07/15
[1439197200000, 2.62], //08/10/15
[1439283600000, 2.68], //08/11/15
[1439370000000, 4.01], //08/12/15
[1439456400000, 2.90], //08/13/15
[1439542800000, 1.99], //08/14/15
[1439802000000, 2.58], //08/17/15
[1439888400000, 2.07], //08/18/15
[1439974800000, 2.32], //08/19/15
[1440061200000, 4.41], //08/20/15
[1440147600000, 6.71], //08/21/15
[1440406800000, 10.10], //08/24/15
[1440493200000, 5.68], //08/25/15
[1440579600000, 6.36], //08/26/15
[1440666000000, 6.11], //08/27/15
[1440752400000, 2.75], //08/28/15
[1441011600000, 3.00], //08/31/15
[1441098000000, 3.86], //09/01/15
[1441184400000, 3.71], //09/02/15
[1441270800000, 3.15], //09/03/15
[1441357200000, 2.69], //09/04/15
[1441702800000, 3.81], //09/08/15
[1441789200000, 4.37], //09/09/15
[1441875600000, 2.58], //09/10/15
[1441962000000, 3.23], //09/11/15
[1442221200000, 3.13], //09/14/15
[1442307600000, 2.87], //09/15/15
[1442394000000, 2.25], //09/16/15
[1442480400000, 4.17], //09/17/15
[1442566800000, 6.16], //09/18/15
[1442826000000, 3.28], //09/21/15
[1442912400000, 3.84], //09/22/15
[1442998800000, 2.24], //09/23/15
[1443085200000, 3.50], //09/24/15
[1443171600000, 4.03], //09/25/15
[1443430800000, 5.43], //09/28/15
[1443517200000, 4.46], //09/29/15
[1443603600000, 4.00], //09/30/15
[1443690000000, 3.77], //10/01/15
[1443776400000, 4.60], //10/02/15
[1444035600000, 3.39], //10/05/15
[1444122000000, 4.55], //10/06/15
[1444208400000, 3.81], //10/07/15
[1444294800000, 4.68], //10/08/15
[1444381200000, 3.54], //10/09/15
[1444640400000, 2.78], //10/12/15
[1444726800000, 2.94], //10/13/15
[1444813200000, 3.58], //10/14/15
[1444899600000, 4.94], //10/15/15
[1444986000000, 4.32], //10/16/15
[1445245200000, 4.38], //10/19/15
[1445331600000, 4.35], //10/20/15
[1445418000000, 3.36], //10/21/15
[1445504400000, 7.78], //10/22/15
[1445590800000, 10.69], //10/23/15
[1445850000000, 4.27], //10/26/15
[1445936400000, 3.79], //10/27/15
[1446022800000, 3.93], //10/28/15
[1446109200000, 3.90], //10/29/15
[1446195600000, 3.87], //10/30/15
[1446454800000, 2.82], //11/02/15
[1446541200000, 3.25], //11/03/15
[1446627600000, 4.84], //11/04/15
[1446714000000, 4.72], //11/05/15
[1446800400000, 4.09], //11/06/15
[1447059600000, 4.05], //11/09/15
[1447146000000, 3.49], //11/10/15
[1447232400000, 5.39], //11/11/15
[1447318800000, 4.28], //11/12/15
[1447405200000, 6.26], //11/13/15
[1447664400000, 7.44], //11/16/15
[1447750800000, 4.32], //11/17/15
[1447837200000, 4.47], //11/18/15
[1447923600000, 4.71], //11/19/15
[1448010000000, 3.90], //11/20/15
[1448269200000, 4.39], //11/23/15
[1448355600000, 4.54], //11/24/15
[1448442000000, 2.70], //11/25/15
[1448614800000, 1.97], //11/27/15
[1448874000000, 5.69], //11/30/15
[1448960400000, 4.75], //12/01/15
[1449046800000, 4.27], //12/02/15
[1449133200000, 5.06], //12/03/15
[1449219600000, 4.53], //12/04/15
[1449478800000, 3.73], //12/07/15
[1449565200000, 3.65], //12/08/15
[1449651600000, 5.16], //12/09/15
[1449738000000, 3.46], //12/10/15
[1449824400000, 5.47], //12/11/15
[1450083600000, 4.36], //12/14/15
[1450170000000, 4.75], //12/15/15
[1450256400000, 3.96], //12/16/15
[1450342800000, 3.68], //12/17/15
[1450429200000, 6.84], //12/18/15
[1450688400000, 3.25], //12/21/15
[1450774800000, 2.67], //12/22/15
[1450861200000, 2.72], //12/23/15
[1450947600000, 1.09], //12/24/15
[1451293200000, 3.78], //12/28/15
[1451379600000, 5.73], //12/29/15
[1451466000000, 3.52], //12/30/15
[1451552400000, 3.75], //12/31/15
]
}]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: '100%',
width: '100%'
});
</script>
</body>
</html>
var myConfig = {
type: 'bar',
scaleX: {
minValue: 1435741200000,
step: 'day',
transform: {
type: 'date',
all: '%m/%d/%y'
},
item: {
fontSize: 10
},
zooming: true,
zoomToValues: [1441098000000, 1446195600000],
mediaRules: [{
maxWidth: 600,
maxItems: 5
},
{
maxWidth: 400,
maxItems: 3,
item: {
fontSize: 9
}
}
]
},
zoom: {
shared: true,
backgroundColor: '#29A2CC'
},
scrollX: {
bar: {
backgroundColor: '#7ecde7 #d4eef7',
alpha: 0.5,
height: '5%'
},
handle: {
backgroundColor: '#29A2CC',
height: '1%'
}
},
preview: {
adjustLayout: true,
height: '15%',
borderWidth: 1,
mask: {
backgroundColor: '#7ecde7'
},
handle: {
backgroundColor: '#1c7897',
borderWidth: 1,
borderColor: '#08222b',
height: '20px',
width: '5px'
}
},
scaleY: {
values: '0:15:5',
format: '%vM',
item: {
fontSize: 10
},
guide: {
lineStyle: 'dotted'
},
mediaRules: [{
maxWidth: 600,
values: '0:15:7.5'
},
{
maxWidth: 400,
decimals: 0,
item: {
fontSize: 9
}
}
]
},
plot: {
backgroundColor: '#7CA82B',
barWidth: '70%',
tooltip: {
visible: false
},
mediaRules: [{
maxWidth: 600,
barWidth: '80%'
},
{
maxWidth: 400,
barWidth: '90%'
}
]
},
plotarea: {
adjustLayout: true
},
crosshairX: {
plotLabel: {
text: 'Volume: %vM',
decimals: 2,
multiple: true,
placement: 'node-top',
backgroundColor: 'white',
alpha: 0.8,
padding: '5%',
borderColor: '#7CA82B',
borderRadius: '3px'
},
scaleLabel: {
fontColor: 'gray',
backgroundColor: 'white',
borderWidth: 1,
borderColor: '#29A2CC',
borderRadius: '3px'
},
mediaRules: [{
maxWidth: 600,
plotLabel: {
text: 'Volume:<br>%vM'
}
},
{
maxWidth: 400,
plotLabel: {
text: '%vM',
fontSize: 9
},
scaleLabel: {
fontSize: 9
}
}
]
},
series: [{
values: [
[1435741200000, 1.99], //07/01/15
[1435827600000, 1.34], //07/02/15
[1436173200000, 1.90], //07/06/15
[1436259600000, 3.45], //07/07/15
[1436346000000, 2.38], //07/08/15
[1436432400000, 2.27], //07/09/15
[1436518800000, 2.40], //07/10/15
[1436778000000, 3.96], //07/13/15
[1436864400000, 4.74], //07/14/15
[1436950800000, 2.99], //07/15/15
[1437037200000, 4.10], //07/16/15
[1437123600000, 4.93], //07/17/15
[1437382800000, 4.75], //07/20/15
[1437469200000, 3.18], //07/21/15
[1437555600000, 3.11], //07/22/15
[1437642000000, 9.37], //07/23/15
[1437728400000, 9.91], //07/24/15
[1437987600000, 7.49], //07/27/15
[1438074000000, 5.27], //07/28/15
[1438160400000, 3.75], //07/29/15
[1438246800000, 3.74], //07/30/15
[1438333200000, 3.03], //07/31/15
[1438592400000, 3.01], //08/03/15
[1438678800000, 2.93], //08/04/15
[1438765200000, 2.89], //08/05/15
[1438851600000, 3.82], //08/06/15
[1438938000000, 3.97], //08/07/15
[1439197200000, 2.62], //08/10/15
[1439283600000, 2.68], //08/11/15
[1439370000000, 4.01], //08/12/15
[1439456400000, 2.90], //08/13/15
[1439542800000, 1.99], //08/14/15
[1439802000000, 2.58], //08/17/15
[1439888400000, 2.07], //08/18/15
[1439974800000, 2.32], //08/19/15
[1440061200000, 4.41], //08/20/15
[1440147600000, 6.71], //08/21/15
[1440406800000, 10.10], //08/24/15
[1440493200000, 5.68], //08/25/15
[1440579600000, 6.36], //08/26/15
[1440666000000, 6.11], //08/27/15
[1440752400000, 2.75], //08/28/15
[1441011600000, 3.00], //08/31/15
[1441098000000, 3.86], //09/01/15
[1441184400000, 3.71], //09/02/15
[1441270800000, 3.15], //09/03/15
[1441357200000, 2.69], //09/04/15
[1441702800000, 3.81], //09/08/15
[1441789200000, 4.37], //09/09/15
[1441875600000, 2.58], //09/10/15
[1441962000000, 3.23], //09/11/15
[1442221200000, 3.13], //09/14/15
[1442307600000, 2.87], //09/15/15
[1442394000000, 2.25], //09/16/15
[1442480400000, 4.17], //09/17/15
[1442566800000, 6.16], //09/18/15
[1442826000000, 3.28], //09/21/15
[1442912400000, 3.84], //09/22/15
[1442998800000, 2.24], //09/23/15
[1443085200000, 3.50], //09/24/15
[1443171600000, 4.03], //09/25/15
[1443430800000, 5.43], //09/28/15
[1443517200000, 4.46], //09/29/15
[1443603600000, 4.00], //09/30/15
[1443690000000, 3.77], //10/01/15
[1443776400000, 4.60], //10/02/15
[1444035600000, 3.39], //10/05/15
[1444122000000, 4.55], //10/06/15
[1444208400000, 3.81], //10/07/15
[1444294800000, 4.68], //10/08/15
[1444381200000, 3.54], //10/09/15
[1444640400000, 2.78], //10/12/15
[1444726800000, 2.94], //10/13/15
[1444813200000, 3.58], //10/14/15
[1444899600000, 4.94], //10/15/15
[1444986000000, 4.32], //10/16/15
[1445245200000, 4.38], //10/19/15
[1445331600000, 4.35], //10/20/15
[1445418000000, 3.36], //10/21/15
[1445504400000, 7.78], //10/22/15
[1445590800000, 10.69], //10/23/15
[1445850000000, 4.27], //10/26/15
[1445936400000, 3.79], //10/27/15
[1446022800000, 3.93], //10/28/15
[1446109200000, 3.90], //10/29/15
[1446195600000, 3.87], //10/30/15
[1446454800000, 2.82], //11/02/15
[1446541200000, 3.25], //11/03/15
[1446627600000, 4.84], //11/04/15
[1446714000000, 4.72], //11/05/15
[1446800400000, 4.09], //11/06/15
[1447059600000, 4.05], //11/09/15
[1447146000000, 3.49], //11/10/15
[1447232400000, 5.39], //11/11/15
[1447318800000, 4.28], //11/12/15
[1447405200000, 6.26], //11/13/15
[1447664400000, 7.44], //11/16/15
[1447750800000, 4.32], //11/17/15
[1447837200000, 4.47], //11/18/15
[1447923600000, 4.71], //11/19/15
[1448010000000, 3.90], //11/20/15
[1448269200000, 4.39], //11/23/15
[1448355600000, 4.54], //11/24/15
[1448442000000, 2.70], //11/25/15
[1448614800000, 1.97], //11/27/15
[1448874000000, 5.69], //11/30/15
[1448960400000, 4.75], //12/01/15
[1449046800000, 4.27], //12/02/15
[1449133200000, 5.06], //12/03/15
[1449219600000, 4.53], //12/04/15
[1449478800000, 3.73], //12/07/15
[1449565200000, 3.65], //12/08/15
[1449651600000, 5.16], //12/09/15
[1449738000000, 3.46], //12/10/15
[1449824400000, 5.47], //12/11/15
[1450083600000, 4.36], //12/14/15
[1450170000000, 4.75], //12/15/15
[1450256400000, 3.96], //12/16/15
[1450342800000, 3.68], //12/17/15
[1450429200000, 6.84], //12/18/15
[1450688400000, 3.25], //12/21/15
[1450774800000, 2.67], //12/22/15
[1450861200000, 2.72], //12/23/15
[1450947600000, 1.09], //12/24/15
[1451293200000, 3.78], //12/28/15
[1451379600000, 5.73], //12/29/15
[1451466000000, 3.52], //12/30/15
[1451552400000, 3.75], //12/31/15
]
}]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: '100%',
width: '100%'
});