<!doctype html>
<html class="zc-html">
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
<style>
.zc-body {
background: #fff;
}
.chart--container {
height: 100%;
width: 100%;
min-height: 530px;
}
.zc-ref {
display: none;
}
</style>
</head>
<body class="zc-body">
<div id="myChart" class="chart--container">
<a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
</div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // CHART CONFIG
// -----------------------------
let chartConfig = {
type: 'line',
title: {
text: 'Irregular Time Data',
adjustLayout: true
},
legend: {
adjustLayout: true,
align: 'center',
verticalAlign: 'bottom'
},
plot: {
valueBox: {
text: '%v'
}
},
plotarea: {
margin: 'dynamic 50 dynamic dynamic'
},
scaleX: {
transform: {
type: 'date',
all: '%mm/%d/%y<br>%h:%i:%s'
}
},
scaleY: {
guide: {
lineStyle: 'solid'
},
label: {
text: 'Number of Occurrences'
},
markers: [{
type: 'line',
label: {
text: 'Maximum Acceptable Range',
},
labelPlacement: 'opposite',
lineColor: '#c62828',
lineStyle: 'dashed',
range: [23]
}]
},
crosshairX: {
exact: true,
lineColor: '#000',
marker: {
backgroundColor: 'white',
borderColor: '#000',
borderWidth: '2px',
size: '5px'
},
scaleLabel: {
borderRadius: '2px'
}
},
tooltip: {
text: '%v<br>%kl',
borderRadius: '2px'
},
series: [{
values: [
[1646333207000, 15],
[1646592407000, 20],
[1646765207000, 18],
[1647283607000, 15],
[1647542807000, 21],
[1647802007000, 18],
[1648061207000, 12],
[1648234007000, 18],
[1648579607000, 10],
[1648838807000, 12]
],
lineColor: '#9c27b0',
marker: {
backgroundColor: '#9c27b0'
}
},
{
values: [
[1646333207000, 10],
[1646592407000, 25],
[1646765207000, 16],
[1647283607000, 15],
[1647542807000, 19],
[1647802007000, 25],
[1648061207000, 12],
[1648234007000, 14],
[1648579607000, 26],
[1648838807000, 18]
],
lineColor: '#f57c00',
marker: {
backgroundColor: '#f57c00'
}
}
]
};
// RENDER CHARTS
// -----------------------------
zingchart.render({
id: 'myChart',
data: chartConfig
});
</script>
</body>
</html>
// CHART CONFIG
// -----------------------------
let chartConfig = {
type: 'line',
title: {
text: 'Irregular Time Data',
adjustLayout: true
},
legend: {
adjustLayout: true,
align: 'center',
verticalAlign: 'bottom'
},
plot: {
valueBox: {
text: '%v'
}
},
plotarea: {
margin: 'dynamic 50 dynamic dynamic'
},
scaleX: {
transform: {
type: 'date',
all: '%mm/%d/%y<br>%h:%i:%s'
}
},
scaleY: {
guide: {
lineStyle: 'solid'
},
label: {
text: 'Number of Occurrences'
},
markers: [
{
type: 'line',
label: {
text: 'Maximum Acceptable Range',
},
labelPlacement: 'opposite',
lineColor: '#c62828',
lineStyle: 'dashed',
range: [23]
}
]
},
crosshairX: {
exact: true,
lineColor: '#000',
marker: {
backgroundColor: 'white',
borderColor: '#000',
borderWidth: '2px',
size: '5px'
},
scaleLabel: {
borderRadius: '2px'
}
},
tooltip: {
text: '%v<br>%kl',
borderRadius: '2px'
},
series: [
{
values: [[1646333207000, 15], [1646592407000, 20], [1646765207000, 18], [1647283607000, 15], [1647542807000, 21], [1647802007000, 18], [1648061207000, 12], [1648234007000, 18], [1648579607000, 10], [1648838807000, 12]],
lineColor: '#9c27b0',
marker: {
backgroundColor: '#9c27b0'
}
},
{
values: [[1646333207000, 10], [1646592407000, 25], [1646765207000, 16], [1647283607000, 15], [1647542807000, 19], [1647802007000, 25], [1648061207000, 12], [1648234007000, 14], [1648579607000, 26], [1648838807000, 18]],
lineColor: '#f57c00',
marker: {
backgroundColor: '#f57c00'
}
}
]
};
// RENDER CHARTS
// -----------------------------
zingchart.render({
id: 'myChart',
data: chartConfig
});
