<!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>
.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 = {
gui: {
contextMenu: {
alpha: 0.9,
button: {
visible: true
},
docked: true,
item: {
textAlpha: 1
},
position: 'right'
}
},
graphset: [{
type: 'line',
borderColor: '#cccccc',
borderRadius: '2px',
borderWidth: '1px',
timezone: 8,
utc: true,
title: {
text: 'Uniform Step Time Series Line Chart',
adjustLayout: true,
marginTop: '20px'
},
legend: {
backgroundColor: 'transparent',
borderWidth: '0px',
draggable: true,
verticalAlign: 'middle',
header: {
text: 'Facility N',
backgroundColor: '#f0f0f0'
},
item: {
margin: '5px 17px 2px 0px',
padding: '3px 3px 3px 3px',
cursor: 'hand',
fontColor: '#fff'
},
marker: {
visible: false
}
},
plot: {
aspect: 'spline'
},
plotarea: {
margin: 'dynamic'
},
scaleX: {
itemsOverlap: true,
maxItems: 7,
minValue: 1546301782000,
step: 'day',
zooming: true,
transform: {
type: 'date',
all: '%D %M %mm<br>%Y'
}
},
scaleY: {
step: 50,
guide: {
lineStyle: 'solid'
},
label: {
text: 'Sensor'
}
},
crosshairX: {
lineColor: '#555',
marker: {
borderColor: '#fff',
borderWidth: '1px',
size: '5px'
},
plotLabel: {
backgroundColor: '#fff',
borderRadius: '2px',
borderWidth: '2px',
multiple: true
}
},
tooltip: {
visible: false
},
preview: {
adjustLayout: true,
live: true
},
series: [{
text: 'Sensor FC-456',
values: [127.99, 156.28, 137.51, 120.33, 133.92, 128.08, 127.56, 133.27, 121.33, 109.9, 165.42, 125.34, 120.5, 105.68, 166.52, 131.37, 131.64, 128.78, 147.09, 103.76, 128, 153.49, 159.48, 156.01, 113.32, 140.45, 157.67, 118.33, 154.86, 158.06, 162.93, 110.63, 103.72, 120.82, 114.85, 158.83, 165.13, 130.5, 118.75, 146.97, 121.44, 164.66, 160.73, 121.21, 151.51, 116.84, 104.64, 104.45, 122.11, 112.81, 163.36, 113.04, 149.81, 136.17, 165.91, 118.64, 123.82, 163.7, 115.87, 119.42, 159.9, 108.34, 157.32, 113.9, 158.88, 121.92, 143.2, 163.1, 114.64, 140.35, 132.28, 128.16, 138.68, 162.51, 151.16, 145.38, 163.64, 144.02, 114.63, 116.29, 114.14, 153.5, 113.88, 115.93, 135.63, 163.41, 112.46, 144.54, 137.86, 154.97],
legendItem: {
backgroundColor: '#29A2CC',
borderRadius: '2px'
}
},
{
text: 'Sensor AB-265',
values: [122.8, 103.9, 90.51, 119.02, 93.6, 133.48, 124.94, 145.59, 109.54, 90.56, 111.22, 115.45, 147.7, 149.89, 105.56, 97.42, 95.96, 139.38, 94.02, 145.45, 88.46, 99.99, 133.19, 94.35, 131.18, 125.98, 148.56, 140.93, 90.68, 139.28, 94.9, 139.3, 119.92, 130.9, 137.82, 127.96, 100.96, 132.06, 94.23, 149.17, 149.95, 117.2, 94.09, 132.4, 140.67, 127.81, 139.46, 108.74, 144.37, 144.28, 149.66, 111.56, 141.35, 141.52, 113.07, 139.56, 123.64, 121.45, 127.76, 102.32, 148.41, 109.29, 139.05, 108.38, 88.76, 147.01, 98.4, 92.04, 96.36, 152.14, 143.2, 111.13, 94.89, 107.69, 139.29, 111.12, 87.83, 124.1, 135.42, 119.65, 127.63, 129, 115.81, 151.21, 142.3, 102.17, 145.29, 89.81, 91.22, 119.67],
legendItem: {
backgroundColor: '#D31E1E',
borderRadius: '2px'
}
},
{
text: 'Sensor DC-445',
values: [35.57, 71.12, 66.41, 70.01, 41.01, 56.49, 47.58, 27.25, 44.3, 70.81, 50.24, 45.49, 50.67, 31.25, 32.22, 39.77, 73.24, 37.68, 50.19, 56.97, 36.2, 44.63, 32.17, 27.39, 39, 30.02, 64.79, 50.78, 38.21, 67.58, 73.15, 45.09, 35.28, 39.49, 32.95, 30.13, 68.86, 32.84, 43.6, 32.73, 26.53, 49.9, 28.27, 57.08, 68.37, 71.86, 28.45, 32.97, 57.7, 59.14, 61.02, 60.78, 31.26, 42.26, 72.44, 47, 65.26, 69.42, 65.5, 33.12, 37.65, 62.38, 67.73, 58.97, 30.17, 41.45, 50.17, 52.76, 29.78, 43.85, 72.29, 56.71, 35.82, 61.88, 51.37, 54.24, 28.63, 45.22, 41.62, 40.19, 65.4, 46, 60.8, 69.98, 37.88, 44.8, 31.94, 38.71, 25.7, 28.58],
legendItem: {
backgroundColor: '#7CA82B',
borderRadius: '2px'
}
},
{
text: 'Sensor ER-985',
values: [187.59, 262.93, 186.9, 219.66, 220.01, 271.44, 204.29, 280.52, 258.79, 187.36, 277.94, 213.11, 253.87, 232.68, 244.67, 281.78, 187.55, 226.6, 240.32, 200.07, 186.11, 210.22, 251.46, 187.13, 228.49, 229.27, 228.83, 220.31, 240.02, 213.57, 208.53, 277.28, 197.21, 239.6, 223.17, 245.9, 194.97, 186.36, 244.08, 233.35, 188.5, 213.63, 266.41, 262.05, 230.92, 267.65, 191.98, 216.9, 268.1, 252.25, 222.39, 201.35, 257.55, 231.08, 245.04, 248.1, 254.01, 196.93, 269.47, 228.28, 221.88, 242.82, 206.36, 258.9, 251.32, 230.18, 202.24, 247.95, 272.25, 188.64, 281.22, 272.13, 222.63, 213.41, 258.74, 186.5, 245.48, 238.3, 258.13, 282.62, 264.78, 271.32, 189.07, 241.33, 248.59, 252.32, 190.36, 200.8, 263.54, 249.44],
legendItem: {
backgroundColor: '#EF8535',
borderRadius: '2px'
}
}
]
}]
};
// RENDER CHARTS
// -----------------------------
zingchart.render({
id: 'myChart',
data: chartConfig
});
</script>
</body>
</html>
// CHART CONFIG
// -----------------------------
let chartConfig = {
gui: {
contextMenu: {
alpha: 0.9,
button: {
visible: true
},
docked: true,
item: {
textAlpha: 1
},
position: 'right'
}
},
graphset: [
{
type: 'line',
borderColor: '#cccccc',
borderRadius: '2px',
borderWidth: '1px',
timezone: 8,
utc: true,
title: {
text: 'Uniform Step Time Series Line Chart',
adjustLayout: true,
marginTop: '20px'
},
legend: {
backgroundColor: 'transparent',
borderWidth: '0px',
draggable: true,
verticalAlign: 'middle',
header: {
text: 'Facility N',
backgroundColor: '#f0f0f0'
},
item: {
margin: '5px 17px 2px 0px',
padding: '3px 3px 3px 3px',
cursor: 'hand',
fontColor: '#fff'
},
marker: {
visible: false
}
},
plot: {
aspect: 'spline'
},
plotarea: {
margin: 'dynamic'
},
scaleX: {
itemsOverlap: true,
maxItems: 7,
minValue: 1546301782000,
step: 'day',
zooming: true,
transform: {
type: 'date',
all: '%D %M %mm<br>%Y'
}
},
scaleY: {
step: 50,
guide: {
lineStyle: 'solid'
},
label: {
text: 'Sensor'
}
},
crosshairX: {
lineColor: '#555',
marker: {
borderColor: '#fff',
borderWidth: '1px',
size: '5px'
},
plotLabel: {
backgroundColor: '#fff',
borderRadius: '2px',
borderWidth: '2px',
multiple: true
}
},
tooltip: {
visible: false
},
preview: {
adjustLayout: true,
live: true
},
series: [
{
text: 'Sensor FC-456',
values: [127.99, 156.28, 137.51, 120.33, 133.92, 128.08, 127.56, 133.27, 121.33, 109.9, 165.42, 125.34, 120.5, 105.68, 166.52, 131.37, 131.64, 128.78, 147.09, 103.76, 128, 153.49, 159.48, 156.01, 113.32, 140.45, 157.67, 118.33, 154.86, 158.06, 162.93, 110.63, 103.72, 120.82, 114.85, 158.83, 165.13, 130.5, 118.75, 146.97, 121.44, 164.66, 160.73, 121.21, 151.51, 116.84, 104.64, 104.45, 122.11, 112.81, 163.36, 113.04, 149.81, 136.17, 165.91, 118.64, 123.82, 163.7, 115.87, 119.42, 159.9, 108.34, 157.32, 113.9, 158.88, 121.92, 143.2, 163.1, 114.64, 140.35, 132.28, 128.16, 138.68, 162.51, 151.16, 145.38, 163.64, 144.02, 114.63, 116.29, 114.14, 153.5, 113.88, 115.93, 135.63, 163.41, 112.46, 144.54, 137.86, 154.97],
legendItem: {
backgroundColor: '#29A2CC',
borderRadius: '2px'
}
},
{
text: 'Sensor AB-265',
values: [122.8, 103.9, 90.51, 119.02, 93.6, 133.48, 124.94, 145.59, 109.54, 90.56, 111.22, 115.45, 147.7, 149.89, 105.56, 97.42, 95.96, 139.38, 94.02, 145.45, 88.46, 99.99, 133.19, 94.35, 131.18, 125.98, 148.56, 140.93, 90.68, 139.28, 94.9, 139.3, 119.92, 130.9, 137.82, 127.96, 100.96, 132.06, 94.23, 149.17, 149.95, 117.2, 94.09, 132.4, 140.67, 127.81, 139.46, 108.74, 144.37, 144.28, 149.66, 111.56, 141.35, 141.52, 113.07, 139.56, 123.64, 121.45, 127.76, 102.32, 148.41, 109.29, 139.05, 108.38, 88.76, 147.01, 98.4, 92.04, 96.36, 152.14, 143.2, 111.13, 94.89, 107.69, 139.29, 111.12, 87.83, 124.1, 135.42, 119.65, 127.63, 129, 115.81, 151.21, 142.3, 102.17, 145.29, 89.81, 91.22, 119.67],
legendItem: {
backgroundColor: '#D31E1E',
borderRadius: '2px'
}
},
{
text: 'Sensor DC-445',
values: [35.57, 71.12, 66.41, 70.01, 41.01, 56.49, 47.58, 27.25, 44.3, 70.81, 50.24, 45.49, 50.67, 31.25, 32.22, 39.77, 73.24, 37.68, 50.19, 56.97, 36.2, 44.63, 32.17, 27.39, 39, 30.02, 64.79, 50.78, 38.21, 67.58, 73.15, 45.09, 35.28, 39.49, 32.95, 30.13, 68.86, 32.84, 43.6, 32.73, 26.53, 49.9, 28.27, 57.08, 68.37, 71.86, 28.45, 32.97, 57.7, 59.14, 61.02, 60.78, 31.26, 42.26, 72.44, 47, 65.26, 69.42, 65.5, 33.12, 37.65, 62.38, 67.73, 58.97, 30.17, 41.45, 50.17, 52.76, 29.78, 43.85, 72.29, 56.71, 35.82, 61.88, 51.37, 54.24, 28.63, 45.22, 41.62, 40.19, 65.4, 46, 60.8, 69.98, 37.88, 44.8, 31.94, 38.71, 25.7, 28.58],
legendItem: {
backgroundColor: '#7CA82B',
borderRadius: '2px'
}
},
{
text: 'Sensor ER-985',
values: [187.59, 262.93, 186.9, 219.66, 220.01, 271.44, 204.29, 280.52, 258.79, 187.36, 277.94, 213.11, 253.87, 232.68, 244.67, 281.78, 187.55, 226.6, 240.32, 200.07, 186.11, 210.22, 251.46, 187.13, 228.49, 229.27, 228.83, 220.31, 240.02, 213.57, 208.53, 277.28, 197.21, 239.6, 223.17, 245.9, 194.97, 186.36, 244.08, 233.35, 188.5, 213.63, 266.41, 262.05, 230.92, 267.65, 191.98, 216.9, 268.1, 252.25, 222.39, 201.35, 257.55, 231.08, 245.04, 248.1, 254.01, 196.93, 269.47, 228.28, 221.88, 242.82, 206.36, 258.9, 251.32, 230.18, 202.24, 247.95, 272.25, 188.64, 281.22, 272.13, 222.63, 213.41, 258.74, 186.5, 245.48, 238.3, 258.13, 282.62, 264.78, 271.32, 189.07, 241.33, 248.59, 252.32, 190.36, 200.8, 263.54, 249.44],
legendItem: {
backgroundColor: '#EF8535',
borderRadius: '2px'
}
}
]
}
]
};
// RENDER CHARTS
// -----------------------------
zingchart.render({
id: 'myChart',
data: chartConfig
});
