<!doctype html>
<html class="zc-html">
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script 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: .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: .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: .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'
}]
},
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'
}
},
tooltip: {
visible: false
},
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: .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: .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: .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: .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'
}
]
},
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'
}
},
tooltip: {
visible: false
},
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: .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);
