<!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></style>
</head>
<body>
<div id='myChart'></div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
var myConfig = {
type: 'scatter',
crosshairX: {
plotLabel: {
backgroundColor: 'white',
borderWidth: 1,
borderColor: 'gray',
borderRadius: '3px',
padding: '5%'
},
scaleLabel: {
text: '%v',
transform: {
type: 'date',
all: '%D,<br>%M %d'
},
fontColor: 'black',
backgroundColor: 'white',
borderWidth: 1,
borderColor: 'gray',
borderRadius: '3px',
padding: '5%'
}
},
plot: {
marker: {
type: 'cross',
lineWidth: 2,
size: 3
},
tooltip: {
text: '%v particles',
borderRadius: '3px'
}
},
scaleX: {
minValue: 1420232400000,
step: 'day',
transform: {
type: 'date',
all: '%D, %M %d, %Y'
},
item: {
fontSize: 10
},
guide: {
lineStyle: 'solid'
}
},
scaleY: {
values: '31:33:0.5',
item: {
fontSize: 10
},
guide: {
lineStyle: 'solid'
}
},
series: [{
values: [
[1420232400000, 32.34], //01/02/15
[1420491600000, 31.80], //01/05/15
[1420578000000, 32.05], //01/06/15
[1420664400000, 32.21], //01/07/15
[1420750800000, 32.32], //01/08/15
[1420837200000, 32.92], //01/09/15
[1421096400000, 32.07], //01/12/15
[1421182800000, 32.26], //01/13/15
[1421269200000, 31.65], //01/14/15
[1421355600000, 31.86], //01/15/15
[1421442000000, 31.51], //01/16/15
[1421787600000, 31.84], //01/20/15
[1421874000000, 31.83], //01/21/15
[1421960400000, 32.30], //01/22/15
[1422046800000, 32.43], //01/23/15
[1422306000000, 32.91], //01/26/15
[1422392400000, 32.39], //01/27/15
[1422478800000, 32.77], //01/28/15
[1422565200000, 31.84], //01/29/15
[1422651600000, 31.88], //01/30/15
],
text: 'Alpha'
},
{
values: [
[1420232400000, 31.46], //01/02/15
[1420491600000, 32.25], //01/05/15
[1420578000000, 32.57], //01/06/15
[1420664400000, 32.39], //01/07/15
[1420750800000, 31.38], //01/08/15
[1420837200000, 32.53], //01/09/15
[1421096400000, 32.14], //01/12/15
[1421182800000, 31.33], //01/13/15
[1421269200000, 31.85], //01/14/15
[1421355600000, 31.97], //01/15/15
[1421442000000, 31.65], //01/16/15
[1421787600000, 32.27], //01/20/15
[1421874000000, 32.08], //01/21/15
[1421960400000, 32.36], //01/22/15
[1422046800000, 31.88], //01/23/15
[1422306000000, 32.74], //01/26/15
[1422392400000, 32.46], //01/27/15
[1422478800000, 32.49], //01/28/15
[1422565200000, 32.20], //01/29/15
[1422651600000, 32.11], //01/30/15
],
text: 'Beta'
},
{
values: [
[1420232400000, 31.87], //01/02/15
[1420491600000, 31.52], //01/05/15
[1420578000000, 31.93], //01/06/15
[1420664400000, 31.98], //01/07/15
[1420750800000, 32.13], //01/08/15
[1420837200000, 31.95], //01/09/15
[1421096400000, 31.77], //01/12/15
[1421182800000, 31.61], //01/13/15
[1421269200000, 31.41], //01/14/15
[1421355600000, 31.56], //01/15/15
[1421442000000, 31.45], //01/16/15
[1421787600000, 31.55], //01/20/15
[1421874000000, 31.71], //01/21/15
[1421960400000, 31.96], //01/22/15
[1422046800000, 32.29], //01/23/15
[1422306000000, 32.40], //01/26/15
[1422392400000, 32.20], //01/27/15
[1422478800000, 31.51], //01/28/15
[1422565200000, 31.38], //01/29/15
[1422651600000, 31.42], //01/30/15
],
text: 'Gamma'
}
]
};
zingchart.TOUCHZOOM = 'pinch';
zingchart.render({
id: 'myChart',
data: myConfig,
height: 400,
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>
var myConfig = {
type: 'scatter',
crosshairX: {
plotLabel: {
backgroundColor: 'white',
borderWidth: 1,
borderColor: 'gray',
borderRadius: '3px',
padding: '5%'
},
scaleLabel: {
text: '%v',
transform: {
type: 'date',
all: '%D,<br>%M %d'
},
fontColor: 'black',
backgroundColor: 'white',
borderWidth: 1,
borderColor: 'gray',
borderRadius: '3px',
padding: '5%'
}
},
plot: {
marker: {
type: 'cross',
lineWidth: 2,
size: 3
},
tooltip: {
text: '%v particles',
borderRadius: '3px'
}
},
scaleX: {
minValue: 1420232400000,
step: 'day',
transform: {
type: 'date',
all: '%D, %M %d, %Y'
},
item: {
fontSize: 10
},
guide: {
lineStyle: 'solid'
}
},
scaleY: {
values: '31:33:0.5',
item: {
fontSize: 10
},
guide: {
lineStyle: 'solid'
}
},
series: [{
values: [
[1420232400000, 32.34], //01/02/15
[1420491600000, 31.80], //01/05/15
[1420578000000, 32.05], //01/06/15
[1420664400000, 32.21], //01/07/15
[1420750800000, 32.32], //01/08/15
[1420837200000, 32.92], //01/09/15
[1421096400000, 32.07], //01/12/15
[1421182800000, 32.26], //01/13/15
[1421269200000, 31.65], //01/14/15
[1421355600000, 31.86], //01/15/15
[1421442000000, 31.51], //01/16/15
[1421787600000, 31.84], //01/20/15
[1421874000000, 31.83], //01/21/15
[1421960400000, 32.30], //01/22/15
[1422046800000, 32.43], //01/23/15
[1422306000000, 32.91], //01/26/15
[1422392400000, 32.39], //01/27/15
[1422478800000, 32.77], //01/28/15
[1422565200000, 31.84], //01/29/15
[1422651600000, 31.88], //01/30/15
],
text: 'Alpha'
},
{
values: [
[1420232400000, 31.46], //01/02/15
[1420491600000, 32.25], //01/05/15
[1420578000000, 32.57], //01/06/15
[1420664400000, 32.39], //01/07/15
[1420750800000, 31.38], //01/08/15
[1420837200000, 32.53], //01/09/15
[1421096400000, 32.14], //01/12/15
[1421182800000, 31.33], //01/13/15
[1421269200000, 31.85], //01/14/15
[1421355600000, 31.97], //01/15/15
[1421442000000, 31.65], //01/16/15
[1421787600000, 32.27], //01/20/15
[1421874000000, 32.08], //01/21/15
[1421960400000, 32.36], //01/22/15
[1422046800000, 31.88], //01/23/15
[1422306000000, 32.74], //01/26/15
[1422392400000, 32.46], //01/27/15
[1422478800000, 32.49], //01/28/15
[1422565200000, 32.20], //01/29/15
[1422651600000, 32.11], //01/30/15
],
text: 'Beta'
},
{
values: [
[1420232400000, 31.87], //01/02/15
[1420491600000, 31.52], //01/05/15
[1420578000000, 31.93], //01/06/15
[1420664400000, 31.98], //01/07/15
[1420750800000, 32.13], //01/08/15
[1420837200000, 31.95], //01/09/15
[1421096400000, 31.77], //01/12/15
[1421182800000, 31.61], //01/13/15
[1421269200000, 31.41], //01/14/15
[1421355600000, 31.56], //01/15/15
[1421442000000, 31.45], //01/16/15
[1421787600000, 31.55], //01/20/15
[1421874000000, 31.71], //01/21/15
[1421960400000, 31.96], //01/22/15
[1422046800000, 32.29], //01/23/15
[1422306000000, 32.40], //01/26/15
[1422392400000, 32.20], //01/27/15
[1422478800000, 31.51], //01/28/15
[1422565200000, 31.38], //01/29/15
[1422651600000, 31.42], //01/30/15
],
text: 'Gamma'
}
]
};
zingchart.TOUCHZOOM = 'pinch';
zingchart.render({
id: 'myChart',
data: myConfig,
height: 400,
width: '100%'
});