<!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"];
let chartConfig = {
globals: {
color: '#666',
},
backgroundColor: '#fff',
graphset: [{
type: 'gauge',
width: '31.5%',
height: '50%',
x: '0px',
y: '0px',
title: {
text: 'Energy Output',
mediaRules: [{
maxWidth: '650px',
visible: false,
}, ],
},
plot: {
csize: '3%',
size: '100%',
},
plotarea: {
marginTop: '35%',
},
scale: {
sizeFactor: 1.2,
mediaRules: [{
maxWidth: '650px',
sizeFactor: 1.6,
}, ],
},
scaleR: {
values: '0:40:10',
aperture: 130,
center: {
borderColor: '#23211E',
borderWidth: '2px',
mediaRules: [{
maxWidth: '650px',
size: '10px',
}, ],
size: '20px',
},
guide: {
alpha: 1,
backgroundColor: '#E3DEDA',
},
item: {
offsetR: 0,
},
markers: [{
type: 'area',
alpha: 0.95,
backgroundColor: '#00AE4D',
range: [0, 35],
}, ],
ring: {
backgroundColor: '#E3DEDA',
mediaRules: [{
maxWidth: '650px',
visible: false,
}, ],
},
tick: {
visible: false,
},
},
tooltip: {
visible: false,
},
mediaRules: [{
maxWidth: '650px',
width: '100%',
height: '20%',
x: '0px',
y: '2%',
},
{
minWidth: '651px',
width: '31.5%',
height: '50%',
x: '0px',
y: '0px',
},
],
series: [{
values: [35],
valueBox: {
text: '%v',
fontColor: '#00AE4D',
fontSize: '14px',
mediaRules: [{
fontSize: '10px',
maxWidth: '650px',
}, ],
placement: 'center',
},
backgroundColor: '#23211E',
}, ],
},
{
type: 'gauge',
width: '31.5%',
height: '50%',
x: '34.5%',
y: '0px',
title: {
text: 'Energy Recycled',
mediaRules: [{
maxWidth: '650px',
visible: false,
}, ],
},
plot: {
csize: '3%',
size: '100%',
},
plotarea: {
marginTop: '35%',
},
scale: {
sizeFactor: 1.2,
mediaRules: [{
maxWidth: '650px',
sizeFactor: 1.6,
}, ],
},
scaleR: {
values: '0:20:5',
aperture: 130,
center: {
borderColor: '#23211E',
borderWidth: '2px',
mediaRules: [{
maxWidth: '650px',
size: '10px',
}, ],
size: '20px',
},
guide: {
alpha: 1,
backgroundColor: '#E3DEDA',
},
item: {
offsetR: 0,
},
markers: [{
type: 'area',
alpha: 0.95,
backgroundColor: '#E2D51A',
range: [0, 11],
}, ],
ring: {
backgroundColor: '#E3DEDA',
mediaRules: [{
maxWidth: '650px',
visible: false,
}, ],
},
tick: {
visible: false,
},
},
tooltip: {
visible: false,
},
mediaRules: [{
maxWidth: '650px',
width: '100%',
height: '20%',
x: '0px',
y: '20%',
},
{
minWidth: '651px',
width: '31.5%',
height: '50%',
x: '34.5%',
y: '0px',
},
],
series: [{
values: [11],
valueBox: {
text: '%v',
fontColor: '#E2D51A',
fontSize: '14px',
mediaRules: [{
fontSize: '10px',
maxWidth: '650px',
}, ],
placement: 'center',
},
backgroundColor: '#23211E',
}, ],
},
{
type: 'gauge',
width: '31.5%',
height: '50%',
x: '69%',
y: '0px',
title: {
text: 'Energy Consumed',
mediaRules: [{
maxWidth: '650px',
visible: false,
}, ],
},
plot: {
csize: '3%',
size: '100%',
},
plotarea: {
marginTop: '35%',
},
scale: {
sizeFactor: 1.2,
mediaRules: [{
maxWidth: '650px',
sizeFactor: 1.6,
}, ],
},
scaleR: {
values: '0:100:25',
aperture: 130,
center: {
borderColor: '#23211E',
borderWidth: '2px',
mediaRules: [{
maxWidth: '650px',
size: '10px',
}, ],
size: '20px',
},
guide: {
alpha: 1,
backgroundColor: '#E3DEDA',
},
item: {
offsetR: 0,
},
markers: [{
type: 'area',
alpha: 0.95,
backgroundColor: '#FB301E',
range: [0, 28],
}, ],
ring: {
backgroundColor: '#E3DEDA',
mediaRules: [{
maxWidth: '650px',
visible: false,
}, ],
},
tick: {
visible: false,
},
},
tooltip: {
visible: false,
},
mediaRules: [{
maxWidth: '650px',
width: '100%',
height: '20%',
x: '0px',
y: '40%',
},
{
minWidth: '651px',
width: '31.5%',
height: '50%',
x: '69%',
y: '0px',
},
],
series: [{
values: [28],
valueBox: {
text: '%v',
fontColor: '#FB301E',
fontSize: '14px',
mediaRules: [{
fontSize: '10px',
maxWidth: '650px',
}, ],
placement: 'center',
},
backgroundColor: '#23211E',
}, ],
},
{
type: 'line',
width: '100%',
height: '55%',
x: '0px',
y: '45%',
title: {
text: 'Meter History',
adjustLayout: true,
mediaRules: [{
fontSize: '14px',
maxWidth: '650px',
}, ],
},
plot: {
tooltip: {
visible: false,
},
},
plotarea: {
margin: 'dynamic',
marginRight: '4%',
},
scaleX: {
minValue: 1373045400000,
step: 3000,
transform: {
type: 'date',
all: '%D<br>%H:%i:%s',
},
},
scaleY: {
values: '0:100:25',
item: {
bold: true,
fontColor: '#FB301E',
},
lineColor: '#FB301E',
placement: 'default',
tick: {
lineColor: '#FB301E',
},
},
scaleY2: {
values: '0:20:5',
item: {
bold: true,
fontColor: '#E2D51A',
},
lineColor: '#E2D51A',
placement: 'default',
tick: {
lineColor: '#E2D51A',
},
},
scaleY3: {
values: '0:40:10',
item: {
bold: true,
fontColor: '#00AE4D',
},
lineColor: '#00AE4D',
placement: 'default',
tick: {
lineColor: '#00AE4D',
},
},
crosshairX: {
lineColor: '#23211E',
plotLabel: {
backgroundColor: '#f0ece8',
borderColor: '#000',
borderWidth: '1px',
fontColor: '#414042',
},
scaleLabel: {
backgroundColor: '#E3DEDA',
fontColor: '#414042',
},
},
mediaRules: [{
maxWidth: '650px',
width: '100%',
height: '40%%',
x: '0px',
y: '60%',
}, ],
series: [{
text: 'Energy Output',
values: [35, 38, 40, 35, 38, 40, 35, 38, 40],
lineColor: '#00AE4D',
marker: {
type: 'circle',
backgroundColor: '#fff',
borderColor: '#00AE4D',
borderWidth: '2px',
},
scales: 'scale-x, scale-y-3',
},
{
text: 'Energy Recycled',
values: [11, 15, 19, 11, 15, 19, 11, 15, 19],
lineColor: '#E2D51A',
marker: {
type: 'triangle',
backgroundColor: '#fff',
borderColor: '#E2D51A',
borderWidth: '2px',
size: '5px',
},
scales: 'scale-x, scale-y-2',
},
{
text: 'Energy Consumed',
values: [28, 21, 30, 28, 21, 30, 28, 21, 30],
lineColor: '#FB301E',
marker: {
type: 'square',
backgroundColor: '#fff',
borderColor: '#FB301E',
borderWidth: '2px',
},
scales: 'scale-x, scale-y',
},
],
},
],
};
zingchart.render({
id: 'myChart',
data: chartConfig,
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.
*/
setInterval(() => {
let colors = ['#00AE4D', '#E2D51A', '#FB301E'];
let Marker = (bgColor, ceiling) => {
return {
type: 'area',
range: [0, ceiling],
backgroundColor: bgColor,
alpha: 0.95,
};
};
let randomOffset0 = [-5, 5, 3, -3, 2, -2];
let randomOffset1 = [10, -10, -5, 5, 3, -3, 2, -2, 7, -7];
let output0 = Math.ceil(33 + randomOffset0[Math.floor(Math.random() * 6)]);
let output1 = Math.ceil(11 + randomOffset0[Math.floor(Math.random() * 6)]);
let output2 = Math.ceil(22 + randomOffset1[Math.floor(Math.random() * 9)]);
// 1) update gauge values
zingchart.exec('myChart', 'appendseriesdata', {
graphid: 0,
plotindex: 0,
update: false,
data: {
values: [output0],
},
});
zingchart.exec('myChart', 'appendseriesdata', {
graphid: 1,
plotindex: 0,
update: false,
data: {
values: [output1],
},
});
zingchart.exec('myChart', 'appendseriesdata', {
graphid: 2,
plotindex: 0,
update: false,
data: {
values: [output2],
},
});
// 2) update guage markers
zingchart.exec('myChart', 'modify', {
graphid: 0,
update: false,
data: {
scaleR: {
markers: [Marker(colors[0], output0)],
},
},
});
zingchart.exec('myChart', 'modify', {
graphid: 1,
update: false,
data: {
scaleR: {
markers: [Marker(colors[1], output1)],
},
},
});
zingchart.exec('myChart', 'modify', {
graphid: 2,
update: false,
data: {
scaleR: {
markers: [Marker(colors[2], output2)],
},
},
});
// 3) update line graph
zingchart.exec('myChart', 'appendseriesvalues', {
graphid: 3,
update: false,
values: [
[output0],
[output1],
[output2]
],
});
// batch update all chart modifications
zingchart.exec('myChart', 'update');
}, 1500);
</script>
</body>
</html>
let chartConfig = {
globals: {
color: '#666',
},
backgroundColor: '#fff',
graphset: [{
type: 'gauge',
width: '31.5%',
height: '50%',
x: '0px',
y: '0px',
title: {
text: 'Energy Output',
mediaRules: [{
maxWidth: '650px',
visible: false,
}, ],
},
plot: {
csize: '3%',
size: '100%',
},
plotarea: {
marginTop: '35%',
},
scale: {
sizeFactor: 1.2,
mediaRules: [{
maxWidth: '650px',
sizeFactor: 1.6,
}, ],
},
scaleR: {
values: '0:40:10',
aperture: 130,
center: {
borderColor: '#23211E',
borderWidth: '2px',
mediaRules: [{
maxWidth: '650px',
size: '10px',
}, ],
size: '20px',
},
guide: {
alpha: 1,
backgroundColor: '#E3DEDA',
},
item: {
offsetR: 0,
},
markers: [{
type: 'area',
alpha: 0.95,
backgroundColor: '#00AE4D',
range: [0, 35],
}, ],
ring: {
backgroundColor: '#E3DEDA',
mediaRules: [{
maxWidth: '650px',
visible: false,
}, ],
},
tick: {
visible: false,
},
},
tooltip: {
visible: false,
},
mediaRules: [{
maxWidth: '650px',
width: '100%',
height: '20%',
x: '0px',
y: '2%',
},
{
minWidth: '651px',
width: '31.5%',
height: '50%',
x: '0px',
y: '0px',
},
],
series: [{
values: [35],
valueBox: {
text: '%v',
fontColor: '#00AE4D',
fontSize: '14px',
mediaRules: [{
fontSize: '10px',
maxWidth: '650px',
}, ],
placement: 'center',
},
backgroundColor: '#23211E',
}, ],
},
{
type: 'gauge',
width: '31.5%',
height: '50%',
x: '34.5%',
y: '0px',
title: {
text: 'Energy Recycled',
mediaRules: [{
maxWidth: '650px',
visible: false,
}, ],
},
plot: {
csize: '3%',
size: '100%',
},
plotarea: {
marginTop: '35%',
},
scale: {
sizeFactor: 1.2,
mediaRules: [{
maxWidth: '650px',
sizeFactor: 1.6,
}, ],
},
scaleR: {
values: '0:20:5',
aperture: 130,
center: {
borderColor: '#23211E',
borderWidth: '2px',
mediaRules: [{
maxWidth: '650px',
size: '10px',
}, ],
size: '20px',
},
guide: {
alpha: 1,
backgroundColor: '#E3DEDA',
},
item: {
offsetR: 0,
},
markers: [{
type: 'area',
alpha: 0.95,
backgroundColor: '#E2D51A',
range: [0, 11],
}, ],
ring: {
backgroundColor: '#E3DEDA',
mediaRules: [{
maxWidth: '650px',
visible: false,
}, ],
},
tick: {
visible: false,
},
},
tooltip: {
visible: false,
},
mediaRules: [{
maxWidth: '650px',
width: '100%',
height: '20%',
x: '0px',
y: '20%',
},
{
minWidth: '651px',
width: '31.5%',
height: '50%',
x: '34.5%',
y: '0px',
},
],
series: [{
values: [11],
valueBox: {
text: '%v',
fontColor: '#E2D51A',
fontSize: '14px',
mediaRules: [{
fontSize: '10px',
maxWidth: '650px',
}, ],
placement: 'center',
},
backgroundColor: '#23211E',
}, ],
},
{
type: 'gauge',
width: '31.5%',
height: '50%',
x: '69%',
y: '0px',
title: {
text: 'Energy Consumed',
mediaRules: [{
maxWidth: '650px',
visible: false,
}, ],
},
plot: {
csize: '3%',
size: '100%',
},
plotarea: {
marginTop: '35%',
},
scale: {
sizeFactor: 1.2,
mediaRules: [{
maxWidth: '650px',
sizeFactor: 1.6,
}, ],
},
scaleR: {
values: '0:100:25',
aperture: 130,
center: {
borderColor: '#23211E',
borderWidth: '2px',
mediaRules: [{
maxWidth: '650px',
size: '10px',
}, ],
size: '20px',
},
guide: {
alpha: 1,
backgroundColor: '#E3DEDA',
},
item: {
offsetR: 0,
},
markers: [{
type: 'area',
alpha: 0.95,
backgroundColor: '#FB301E',
range: [0, 28],
}, ],
ring: {
backgroundColor: '#E3DEDA',
mediaRules: [{
maxWidth: '650px',
visible: false,
}, ],
},
tick: {
visible: false,
},
},
tooltip: {
visible: false,
},
mediaRules: [{
maxWidth: '650px',
width: '100%',
height: '20%',
x: '0px',
y: '40%',
},
{
minWidth: '651px',
width: '31.5%',
height: '50%',
x: '69%',
y: '0px',
},
],
series: [{
values: [28],
valueBox: {
text: '%v',
fontColor: '#FB301E',
fontSize: '14px',
mediaRules: [{
fontSize: '10px',
maxWidth: '650px',
}, ],
placement: 'center',
},
backgroundColor: '#23211E',
}, ],
},
{
type: 'line',
width: '100%',
height: '55%',
x: '0px',
y: '45%',
title: {
text: 'Meter History',
adjustLayout: true,
mediaRules: [{
fontSize: '14px',
maxWidth: '650px',
}, ],
},
plot: {
tooltip: {
visible: false,
},
},
plotarea: {
margin: 'dynamic',
marginRight: '4%',
},
scaleX: {
minValue: 1373045400000,
step: 3000,
transform: {
type: 'date',
all: '%D<br>%H:%i:%s',
},
},
scaleY: {
values: '0:100:25',
item: {
bold: true,
fontColor: '#FB301E',
},
lineColor: '#FB301E',
placement: 'default',
tick: {
lineColor: '#FB301E',
},
},
scaleY2: {
values: '0:20:5',
item: {
bold: true,
fontColor: '#E2D51A',
},
lineColor: '#E2D51A',
placement: 'default',
tick: {
lineColor: '#E2D51A',
},
},
scaleY3: {
values: '0:40:10',
item: {
bold: true,
fontColor: '#00AE4D',
},
lineColor: '#00AE4D',
placement: 'default',
tick: {
lineColor: '#00AE4D',
},
},
crosshairX: {
lineColor: '#23211E',
plotLabel: {
backgroundColor: '#f0ece8',
borderColor: '#000',
borderWidth: '1px',
fontColor: '#414042',
},
scaleLabel: {
backgroundColor: '#E3DEDA',
fontColor: '#414042',
},
},
mediaRules: [{
maxWidth: '650px',
width: '100%',
height: '40%%',
x: '0px',
y: '60%',
}, ],
series: [{
text: 'Energy Output',
values: [35, 38, 40, 35, 38, 40, 35, 38, 40],
lineColor: '#00AE4D',
marker: {
type: 'circle',
backgroundColor: '#fff',
borderColor: '#00AE4D',
borderWidth: '2px',
},
scales: 'scale-x, scale-y-3',
},
{
text: 'Energy Recycled',
values: [11, 15, 19, 11, 15, 19, 11, 15, 19],
lineColor: '#E2D51A',
marker: {
type: 'triangle',
backgroundColor: '#fff',
borderColor: '#E2D51A',
borderWidth: '2px',
size: '5px',
},
scales: 'scale-x, scale-y-2',
},
{
text: 'Energy Consumed',
values: [28, 21, 30, 28, 21, 30, 28, 21, 30],
lineColor: '#FB301E',
marker: {
type: 'square',
backgroundColor: '#fff',
borderColor: '#FB301E',
borderWidth: '2px',
},
scales: 'scale-x, scale-y',
},
],
},
],
};
zingchart.render({
id: 'myChart',
data: chartConfig,
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.
*/
setInterval(() => {
let colors = ['#00AE4D', '#E2D51A', '#FB301E'];
let Marker = (bgColor, ceiling) => {
return {
type: 'area',
range: [0, ceiling],
backgroundColor: bgColor,
alpha: 0.95,
};
};
let randomOffset0 = [-5, 5, 3, -3, 2, -2];
let randomOffset1 = [10, -10, -5, 5, 3, -3, 2, -2, 7, -7];
let output0 = Math.ceil(33 + randomOffset0[Math.floor(Math.random() * 6)]);
let output1 = Math.ceil(11 + randomOffset0[Math.floor(Math.random() * 6)]);
let output2 = Math.ceil(22 + randomOffset1[Math.floor(Math.random() * 9)]);
// 1) update gauge values
zingchart.exec('myChart', 'appendseriesdata', {
graphid: 0,
plotindex: 0,
update: false,
data: {
values: [output0],
},
});
zingchart.exec('myChart', 'appendseriesdata', {
graphid: 1,
plotindex: 0,
update: false,
data: {
values: [output1],
},
});
zingchart.exec('myChart', 'appendseriesdata', {
graphid: 2,
plotindex: 0,
update: false,
data: {
values: [output2],
},
});
// 2) update guage markers
zingchart.exec('myChart', 'modify', {
graphid: 0,
update: false,
data: {
scaleR: {
markers: [Marker(colors[0], output0)],
},
},
});
zingchart.exec('myChart', 'modify', {
graphid: 1,
update: false,
data: {
scaleR: {
markers: [Marker(colors[1], output1)],
},
},
});
zingchart.exec('myChart', 'modify', {
graphid: 2,
update: false,
data: {
scaleR: {
markers: [Marker(colors[2], output2)],
},
},
});
// 3) update line graph
zingchart.exec('myChart', 'appendseriesvalues', {
graphid: 3,
update: false,
values: [
[output0],
[output1],
[output2]
],
});
// batch update all chart modifications
zingchart.exec('myChart', 'update');
}, 1500);