<!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: 'line',
utc: true,
timezone: -5,
scaleX: {
minValue: 1373045400000,
step: 60000,
transform: {
type: 'date',
all: '%D, %d %M %Y<br>%h:%i %A',
itemsOverlap: true,
},
item: {
fontSize: 10
}
},
plot: {
tooltip: {
visible: false
}
},
crosshairX: {
plotLabel: {
fontSize: 10,
multiple: true
},
scaleLabel: {
fontSize: 10
}
},
scaleY: {
item: {
fontSize: 10
},
guide: {
lineStyle: 'dotted'
}
},
series: [{
values: [10, 10.2, 35, 1, 5, 10.2, 35, 1, 5, 10.2, 35, 1, 5, 10, 10.2, 35, 1, 5, 10.2, 35, 1, 5, 10.2, 35, 1, 5, 10, 10.2, 35, 1, 5, 10.2, 35, 1, 5, 10.2, 35, 1, 5, 10, 10.2, 35, 1, 5, 10.2, 35, 1, 5, 10.2, 35, 1],
lineColor: '#3F51B5',
lineWidth: 1,
marker: {
backgroundColor: 'white',
borderColor: '#3F51B5',
borderWidth: 1,
size: 3
}
},
{
values: [15, 15.2, 40, 6, 10, 15.2, 40, 6, 10, 15.2, 40, 6, 10, 15, 15.2, 40, 6, 10, 15.2, 40, 6, 10, 15.2, 40, 6, 10, 15, 15.2, 40, 6, 10, 15.2, 40, 6, 10, 15.2, 40, 6, 10, 15, 15.2, 40, 6, 10, 15.2, 40, 6, 10, 15.2, 40, 6],
lineColor: '#7986CB',
lineWidth: 1,
marker: {
backgroundColor: 'white',
borderColor: '#7986CB',
borderWidth: 1,
size: 3
}
},
{
values: [20, 20.2, 45, 11, 15, 20.2, 45, 11, 15, 20.2, 45, 11, 15, 20, 20.2, 45, 11, 15, 20.2, 45, 11, 15, 20.2, 45, 11, 15, 20, 20.2, 45, 11, 15, 20.2, 45, 11, 15, 20.2, 45, 11, 15, 20, 20.2, 45, 11, 15, 20.2, 45, 11, 15, 20.2, 45, 11],
lineColor: '#C5CAE9',
lineWidth: 1,
marker: {
backgroundColor: 'white',
borderColor: '#C5CAE9',
borderWidth: 1,
size: 3
}
},
]
};
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: 'line',
utc: true,
timezone: -5,
scaleX: {
minValue: 1373045400000,
step: 60000,
transform: {
type: 'date',
all: '%D, %d %M %Y<br>%h:%i %A',
itemsOverlap: true,
},
item: {
fontSize: 10
}
},
plot: {
tooltip: {
visible: false
}
},
crosshairX: {
plotLabel: {
fontSize: 10,
multiple: true
},
scaleLabel: {
fontSize: 10
}
},
scaleY: {
item: {
fontSize: 10
},
guide: {
lineStyle: 'dotted'
}
},
series: [{
values: [10, 10.2, 35, 1, 5, 10.2, 35, 1, 5, 10.2, 35, 1, 5, 10, 10.2, 35, 1, 5, 10.2, 35, 1, 5, 10.2, 35, 1, 5, 10, 10.2, 35, 1, 5, 10.2, 35, 1, 5, 10.2, 35, 1, 5, 10, 10.2, 35, 1, 5, 10.2, 35, 1, 5, 10.2, 35, 1],
lineColor: '#3F51B5',
lineWidth: 1,
marker: {
backgroundColor: 'white',
borderColor: '#3F51B5',
borderWidth: 1,
size: 3
}
},
{
values: [15, 15.2, 40, 6, 10, 15.2, 40, 6, 10, 15.2, 40, 6, 10, 15, 15.2, 40, 6, 10, 15.2, 40, 6, 10, 15.2, 40, 6, 10, 15, 15.2, 40, 6, 10, 15.2, 40, 6, 10, 15.2, 40, 6, 10, 15, 15.2, 40, 6, 10, 15.2, 40, 6, 10, 15.2, 40, 6],
lineColor: '#7986CB',
lineWidth: 1,
marker: {
backgroundColor: 'white',
borderColor: '#7986CB',
borderWidth: 1,
size: 3
}
},
{
values: [20, 20.2, 45, 11, 15, 20.2, 45, 11, 15, 20.2, 45, 11, 15, 20, 20.2, 45, 11, 15, 20.2, 45, 11, 15, 20.2, 45, 11, 15, 20, 20.2, 45, 11, 15, 20.2, 45, 11, 15, 20.2, 45, 11, 15, 20, 20.2, 45, 11, 15, 20.2, 45, 11, 15, 20.2, 45, 11],
lineColor: '#C5CAE9',
lineWidth: 1,
marker: {
backgroundColor: 'white',
borderColor: '#C5CAE9',
borderWidth: 1,
size: 3
}
},
]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: 400,
width: '100%'
});