<!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>
#myChart,
body,
html {
height: 100%;
width: 100%;
}
.zc-ref {
display: none;
}
</style>
</head>
<body>
<button id="ZCPauseFeed">Pause Feed</button>
<button id="ZCStartFeed">Start Feed</button>
<div id='myChart'><a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a></div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
var minScaleValue = 1373045400000;
var myConfig = {
backgroundColor: "#fff",
globals: {
color: "#666"
},
graphset: [{
type: "line",
title: {
text: "Meter History 1",
adjustLayout: true,
"media-rules": [{
"max-width": 650,
"fontSize": 14
}]
},
width: "100%",
"media-rules": [{
"max-width": 650,
"x": 0,
"y": "60%",
"width": '100%',
"height": "40%%",
}],
scaleX: {
step: 3000,
transform: {
type: "date",
all: "%D<br>%H:%i:%s"
}
},
"scale-y": {
values: "0:100:25",
placement: "default",
lineColor: "#FB301E",
tick: {
lineColor: "#FB301E"
},
item: {
fontColor: "#FB301E",
bold: true
}
},
"scale-y-2": {
values: "0:20:5",
placement: "default",
lineColor: "#E2D51A",
tick: {
lineColor: "#E2D51A"
},
item: {
fontColor: "#E2D51A",
bold: true
}
},
"scale-y-3": {
values: "0:40:10",
placement: "default",
lineColor: "#00AE4D",
tick: {
lineColor: "#00AE4D",
},
item: {
fontColor: "#00AE4D",
bold: true
}
},
plotarea: {
margin: "dynamic",
marginRight: "4%"
},
crosshairX: {
shared: true,
lineColor: "#23211E",
scaleLabel: {
backgroundColor: "#E3DEDA",
fontColor: "#414042"
},
plotLabel: {
backgroundColor: "#f0ece8",
fontColor: "#414042",
borderWidth: 1,
borderColor: "#000"
}
},
tooltip: {
visible: false
},
series: [{
values: [
[minScaleValue, 15],
[minScaleValue + 3000, 15]
],
lineColor: "#00AE4D",
text: "Energy Output",
scales: "scale-x, scale-y-3",
marker: {
borderWidth: 2,
borderColor: "#00AE4D",
backgroundColor: "#fff",
type: "circle"
}
}, {
values: [
[minScaleValue, 25],
[minScaleValue + 3000, 15]
],
lineColor: "#E2D51A",
text: "Energy Recycled",
scales: "scale-x, scale-y-2",
marker: {
borderWidth: 2,
borderColor: "#E2D51A",
backgroundColor: "#fff",
type: "triangle",
size: 5
}
}, {
values: [
[minScaleValue, 35],
[minScaleValue + 3000, 25]
],
lineColor: "#FB301E",
text: "Energy Consumed",
scales: "scale-x, scale-y",
marker: {
borderWidth: 2,
borderColor: "#FB301E",
backgroundColor: "#fff",
type: "square"
}
}]
}, {
type: "line",
title: {
text: "Meter History 2",
adjustLayout: true,
"media-rules": [{
"max-width": 650,
"fontSize": 14
}]
},
width: "100%",
"media-rules": [{
"max-width": 650,
"x": 0,
"y": "60%",
"width": '100%',
"height": "40%%",
}],
scaleX: {
step: 3000,
transform: {
type: "date",
all: "%D<br>%H:%i:%s"
}
},
"scale-y": {
values: "0:100:25",
placement: "default",
lineColor: "#FB301E",
tick: {
lineColor: "#FB301E"
},
item: {
fontColor: "#FB301E",
bold: true
}
},
"scale-y-2": {
values: "0:20:5",
placement: "default",
lineColor: "#E2D51A",
tick: {
lineColor: "#E2D51A"
},
item: {
fontColor: "#E2D51A",
bold: true
}
},
"scale-y-3": {
values: "0:40:10",
placement: "default",
lineColor: "#00AE4D",
tick: {
lineColor: "#00AE4D",
},
item: {
fontColor: "#00AE4D",
bold: true
}
},
plotarea: {
margin: "dynamic",
marginRight: "4%"
},
crosshairX: {
shared: true,
lineColor: "#23211E",
scaleLabel: {
backgroundColor: "#E3DEDA",
fontColor: "#414042"
},
plotLabel: {
backgroundColor: "#f0ece8",
fontColor: "#414042",
borderWidth: 1,
borderColor: "#000"
}
},
tooltip: {
visible: false
},
series: [{
values: [
[minScaleValue, 25],
[minScaleValue + 3000, 15]
],
lineColor: "#00AE4D",
text: "Energy Output",
scales: "scale-x, scale-y-3",
marker: {
borderWidth: 2,
borderColor: "#00AE4D",
backgroundColor: "#fff",
type: "circle"
}
}, {
values: [
[minScaleValue, 10],
[minScaleValue + 3000, 13]
],
lineColor: "#E2D51A",
text: "Energy Recycled",
scales: "scale-x, scale-y-2",
marker: {
borderWidth: 2,
borderColor: "#E2D51A",
backgroundColor: "#fff",
type: "triangle",
size: 5
}
}, {
values: [
[minScaleValue, 15],
[minScaleValue + 3000, 15]
],
lineColor: "#FB301E",
text: "Energy Consumed",
scales: "scale-x, scale-y",
marker: {
borderWidth: 2,
borderColor: "#FB301E",
backgroundColor: "#fff",
type: "square"
}
}]
}]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: "100%",
width: '100%'
});
/*
* SetInterval is used to simulate live input. We also have
* a feed attribute that takes in http requests, websockets,
* and return value from a JS function.
*/
var feedInterval = null;
minScaleValue += 3000;
function feedFunction() {
minScaleValue += 3000;
var colors = ['#00AE4D', '#E2D51A', '#FB301E'];
var randomOffset0 = [-5, 5, 3, -3, 2, -2];
var randomOffset1 = [10, -10, -5, 5, 3, -3, 2, -2, 7, -7];
var output0 = [minScaleValue, Math.ceil(33 + randomOffset0[Math.floor(Math.random() * 6)])];
var output1 = [minScaleValue, Math.ceil(11 + randomOffset0[Math.floor(Math.random() * 6)])];
var output2 = [minScaleValue, Math.ceil(22 + randomOffset1[Math.floor(Math.random() * 9)])];
// 3) update line graph
zingchart.exec('myChart', 'appendseriesvalues', {
graphid: 0,
update: false,
'max-values': 15,
values: [
[output0],
[output1],
[output2]
]
});
output0 = [minScaleValue, Math.ceil(33 + randomOffset0[Math.floor(Math.random() * 6)])];
output1 = [minScaleValue, Math.ceil(11 + randomOffset0[Math.floor(Math.random() * 6)])];
output2 = [minScaleValue, Math.ceil(22 + randomOffset1[Math.floor(Math.random() * 9)])];
zingchart.exec('myChart', 'appendseriesvalues', {
graphid: 1,
update: false,
'max-values': 15,
values: [
[output0],
[output1],
[output2]
]
});
// batch all updates
zingchart.exec('myChart', 'update');
}
function startFeed() {
// start feed
if (!feedInterval)
feedInterval = setInterval(feedFunction, 1100);
}
document.getElementById('ZCPauseFeed').addEventListener('click', function() {
clearInterval(feedInterval);
feedInterval = null;
});
document.getElementById('ZCStartFeed').addEventListener('click', function() {
startFeed();
});
// start feed
startFeed();
</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>
<button id="ZCPauseFeed">Pause Feed</button>
<button id="ZCStartFeed">Start Feed</button>
<div id='myChart'><a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a></div>
</body>
</html>
#myChart,
body,
html {
height: 100%;
width: 100%;
}
.zc-ref {
display: none;
}
var minScaleValue = 1373045400000;
var myConfig = {
backgroundColor: "#fff",
globals: {
color: "#666"
},
graphset: [{
type: "line",
title: {
text: "Meter History 1",
adjustLayout: true,
"media-rules": [{
"max-width": 650,
"fontSize": 14
}]
},
width: "100%",
"media-rules": [{
"max-width": 650,
"x": 0,
"y": "60%",
"width": '100%',
"height": "40%%",
}],
scaleX: {
step: 3000,
transform: {
type: "date",
all: "%D<br>%H:%i:%s"
}
},
"scale-y": {
values: "0:100:25",
placement: "default",
lineColor: "#FB301E",
tick: {
lineColor: "#FB301E"
},
item: {
fontColor: "#FB301E",
bold: true
}
},
"scale-y-2": {
values: "0:20:5",
placement: "default",
lineColor: "#E2D51A",
tick: {
lineColor: "#E2D51A"
},
item: {
fontColor: "#E2D51A",
bold: true
}
},
"scale-y-3": {
values: "0:40:10",
placement: "default",
lineColor: "#00AE4D",
tick: {
lineColor: "#00AE4D",
},
item: {
fontColor: "#00AE4D",
bold: true
}
},
plotarea: {
margin: "dynamic",
marginRight: "4%"
},
crosshairX: {
shared: true,
lineColor: "#23211E",
scaleLabel: {
backgroundColor: "#E3DEDA",
fontColor: "#414042"
},
plotLabel: {
backgroundColor: "#f0ece8",
fontColor: "#414042",
borderWidth: 1,
borderColor: "#000"
}
},
tooltip: {
visible: false
},
series: [{
values: [
[minScaleValue, 15],
[minScaleValue + 3000, 15]
],
lineColor: "#00AE4D",
text: "Energy Output",
scales: "scale-x, scale-y-3",
marker: {
borderWidth: 2,
borderColor: "#00AE4D",
backgroundColor: "#fff",
type: "circle"
}
}, {
values: [
[minScaleValue, 25],
[minScaleValue + 3000, 15]
],
lineColor: "#E2D51A",
text: "Energy Recycled",
scales: "scale-x, scale-y-2",
marker: {
borderWidth: 2,
borderColor: "#E2D51A",
backgroundColor: "#fff",
type: "triangle",
size: 5
}
}, {
values: [
[minScaleValue, 35],
[minScaleValue + 3000, 25]
],
lineColor: "#FB301E",
text: "Energy Consumed",
scales: "scale-x, scale-y",
marker: {
borderWidth: 2,
borderColor: "#FB301E",
backgroundColor: "#fff",
type: "square"
}
}]
}, {
type: "line",
title: {
text: "Meter History 2",
adjustLayout: true,
"media-rules": [{
"max-width": 650,
"fontSize": 14
}]
},
width: "100%",
"media-rules": [{
"max-width": 650,
"x": 0,
"y": "60%",
"width": '100%',
"height": "40%%",
}],
scaleX: {
step: 3000,
transform: {
type: "date",
all: "%D<br>%H:%i:%s"
}
},
"scale-y": {
values: "0:100:25",
placement: "default",
lineColor: "#FB301E",
tick: {
lineColor: "#FB301E"
},
item: {
fontColor: "#FB301E",
bold: true
}
},
"scale-y-2": {
values: "0:20:5",
placement: "default",
lineColor: "#E2D51A",
tick: {
lineColor: "#E2D51A"
},
item: {
fontColor: "#E2D51A",
bold: true
}
},
"scale-y-3": {
values: "0:40:10",
placement: "default",
lineColor: "#00AE4D",
tick: {
lineColor: "#00AE4D",
},
item: {
fontColor: "#00AE4D",
bold: true
}
},
plotarea: {
margin: "dynamic",
marginRight: "4%"
},
crosshairX: {
shared: true,
lineColor: "#23211E",
scaleLabel: {
backgroundColor: "#E3DEDA",
fontColor: "#414042"
},
plotLabel: {
backgroundColor: "#f0ece8",
fontColor: "#414042",
borderWidth: 1,
borderColor: "#000"
}
},
tooltip: {
visible: false
},
series: [{
values: [
[minScaleValue, 25],
[minScaleValue + 3000, 15]
],
lineColor: "#00AE4D",
text: "Energy Output",
scales: "scale-x, scale-y-3",
marker: {
borderWidth: 2,
borderColor: "#00AE4D",
backgroundColor: "#fff",
type: "circle"
}
}, {
values: [
[minScaleValue, 10],
[minScaleValue + 3000, 13]
],
lineColor: "#E2D51A",
text: "Energy Recycled",
scales: "scale-x, scale-y-2",
marker: {
borderWidth: 2,
borderColor: "#E2D51A",
backgroundColor: "#fff",
type: "triangle",
size: 5
}
}, {
values: [
[minScaleValue, 15],
[minScaleValue + 3000, 15]
],
lineColor: "#FB301E",
text: "Energy Consumed",
scales: "scale-x, scale-y",
marker: {
borderWidth: 2,
borderColor: "#FB301E",
backgroundColor: "#fff",
type: "square"
}
}]
}]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: "100%",
width: '100%'
});
/*
* SetInterval is used to simulate live input. We also have
* a feed attribute that takes in http requests, websockets,
* and return value from a JS function.
*/
var feedInterval = null;
minScaleValue += 3000;
function feedFunction() {
minScaleValue += 3000;
var colors = ['#00AE4D', '#E2D51A', '#FB301E'];
var randomOffset0 = [-5, 5, 3, -3, 2, -2];
var randomOffset1 = [10, -10, -5, 5, 3, -3, 2, -2, 7, -7];
var output0 = [minScaleValue, Math.ceil(33 + randomOffset0[Math.floor(Math.random() * 6)])];
var output1 = [minScaleValue, Math.ceil(11 + randomOffset0[Math.floor(Math.random() * 6)])];
var output2 = [minScaleValue, Math.ceil(22 + randomOffset1[Math.floor(Math.random() * 9)])];
// 3) update line graph
zingchart.exec('myChart', 'appendseriesvalues', {
graphid: 0,
update: false,
'max-values': 15,
values: [
[output0],
[output1],
[output2]
]
});
output0 = [minScaleValue, Math.ceil(33 + randomOffset0[Math.floor(Math.random() * 6)])];
output1 = [minScaleValue, Math.ceil(11 + randomOffset0[Math.floor(Math.random() * 6)])];
output2 = [minScaleValue, Math.ceil(22 + randomOffset1[Math.floor(Math.random() * 9)])];
zingchart.exec('myChart', 'appendseriesvalues', {
graphid: 1,
update: false,
'max-values': 15,
values: [
[output0],
[output1],
[output2]
]
});
// batch all updates
zingchart.exec('myChart', 'update');
}
function startFeed() {
// start feed
if (!feedInterval)
feedInterval = setInterval(feedFunction, 1100);
}
document.getElementById('ZCPauseFeed').addEventListener('click', function() {
clearInterval(feedInterval);
feedInterval = null;
});
document.getElementById('ZCStartFeed').addEventListener('click', function() {
startFeed();
});
// start feed
startFeed();