<!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>
html,
body {
height: 100%;
width: 100%;
}
.dashboard {
display: flex;
flex-wrap: wrap;
}
.column {
min-height: 300px;
min-width: 300px;
display: flex;
flex-grow: 1
}
</style>
</head>
<body>
<div class='dashboard'>
<div id='gaugeChart1' class='column' style='background-color:red'></div>
<div id='gaugeChart2' class='column' style='background-color:yellow'></div>
<div id='gaugeChart3' class='column' style='background-color:orange'></div>
</div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
function GaugeChart(value, titleText, backgroundColor) {
return {
type: 'gauge',
title: {
text: titleText,
mediaRules: [{
maxWidth: '650px',
visible: false,
}, ],
},
scaleR: {
aperture: 130,
values: '0:40:10',
center: {
borderColor: '#23211E',
borderWidth: '2px',
mediaRules: [{
maxWidth: '650px',
size: 10,
}, ],
size: 20,
},
guide: {
alpha: 1,
backgroundColor: '#E3DEDA',
},
item: {
offsetR: 0,
},
tick: {
visible: false,
},
markers: [{
type: 'area',
range: [0, 35],
backgroundColor: backgroundColor,
}, ],
ring: {
backgroundColor: '#E3DEDA',
mediaRules: [{
maxWidth: '650px',
visible: false,
}, ],
},
},
plot: {
tooltip: {
visible: false,
},
csize: '3%',
size: '100%',
},
plotarea: {
marginTop: '35%',
},
scale: {
sizeFactor: 1.2,
mediaRules: [{
maxWidth: '650px',
sizeFactor: 1.6,
}, ],
},
series: [{
values: [35],
backgroundColor: '#23211E',
valueBox: {
text: '%v',
fontColor: backgroundColor,
fontSize: 14,
mediaRules: [{
maxWidth: '650px',
fontSize: 10,
}, ],
placement: 'center',
},
}, ],
};
}
let gaugeChart1 = GaugeChart(35, 'Energy Output', '#00AE4D');
let gaugeChart2 = GaugeChart(11, 'Energy Recyled', '#E2D51A');
let gaugeChart3 = GaugeChart(28, 'Energy Consumed', '#FB301E');
zingchart.render({
id: 'gaugeChart1',
data: gaugeChart1,
height: '100%',
width: '100%',
});
zingchart.render({
id: 'gaugeChart2',
data: gaugeChart2,
height: '100%',
width: '100%',
});
zingchart.render({
id: 'gaugeChart3',
data: gaugeChart3,
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.
*/
setTimeout(function() {
let colors = ['#00AE4D', '#E2D51A', '#FB301E'];
let Marker = function(bgColor, ceiling) {
return {
type: 'area',
range: [0, ceiling],
backgroundColor: bgColor,
};
};
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('gaugeChart1', 'appendseriesdata', {
plotindex: 0,
update: false,
data: {
values: [output0],
},
});
zingchart.exec('gaugeChart2', 'appendseriesdata', {
plotindex: 0,
update: false,
data: {
values: [output1],
},
});
zingchart.exec('gaugeChart3', 'appendseriesdata', {
plotindex: 0,
update: false,
data: {
values: [output2],
},
});
// 2) update guage markers
zingchart.exec('gaugeChart1', 'modify', {
update: false,
data: {
scaleR: {
markers: [Marker(colors[0], output0)],
},
},
});
zingchart.exec('gaugeChart2', 'modify', {
update: false,
data: {
scaleR: {
markers: [Marker(colors[1], output1)],
},
},
});
zingchart.exec('gaugeChart3', 'modify', {
update: false,
data: {
scaleR: {
markers: [Marker(colors[2], output2)],
},
},
});
// batch update all chart modifications
zingchart.exec('gaugeChart1', 'update');
zingchart.exec('gaugeChart2', 'update');
zingchart.exec('gaugeChart3', 'update');
}, 1500);
</script>
</body>
</html>
function GaugeChart(value, titleText, backgroundColor) {
return {
type: 'gauge',
title: {
text: titleText,
mediaRules: [
{
maxWidth: '650px',
visible: false,
},
],
},
scaleR: {
aperture: 130,
values: '0:40:10',
center: {
borderColor: '#23211E',
borderWidth: '2px',
mediaRules: [
{
maxWidth: '650px',
size: 10,
},
],
size: 20,
},
guide: {
alpha: 1,
backgroundColor: '#E3DEDA',
},
item: {
offsetR: 0,
},
tick: {
visible: false,
},
markers: [
{
type: 'area',
range: [0, 35],
backgroundColor: backgroundColor,
},
],
ring: {
backgroundColor: '#E3DEDA',
mediaRules: [
{
maxWidth: '650px',
visible: false,
},
],
},
},
plot: {
tooltip: {
visible: false,
},
csize: '3%',
size: '100%',
},
plotarea: {
marginTop: '35%',
},
scale: {
sizeFactor: 1.2,
mediaRules: [
{
maxWidth: '650px',
sizeFactor: 1.6,
},
],
},
series: [
{
values: [35],
backgroundColor: '#23211E',
valueBox: {
text: '%v',
fontColor: backgroundColor,
fontSize: 14,
mediaRules: [
{
maxWidth: '650px',
fontSize: 10,
},
],
placement: 'center',
},
},
],
};
}
let gaugeChart1 = GaugeChart(35, 'Energy Output', '#00AE4D');
let gaugeChart2 = GaugeChart(11, 'Energy Recyled', '#E2D51A');
let gaugeChart3 = GaugeChart(28, 'Energy Consumed', '#FB301E');
zingchart.render({
id: 'gaugeChart1',
data: gaugeChart1,
height: '100%',
width: '100%',
});
zingchart.render({
id: 'gaugeChart2',
data: gaugeChart2,
height: '100%',
width: '100%',
});
zingchart.render({
id: 'gaugeChart3',
data: gaugeChart3,
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.
*/
setTimeout(function () {
let colors = ['#00AE4D', '#E2D51A', '#FB301E'];
let Marker = function (bgColor, ceiling) {
return {
type: 'area',
range: [0, ceiling],
backgroundColor: bgColor,
};
};
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('gaugeChart1', 'appendseriesdata', {
plotindex: 0,
update: false,
data: {
values: [output0],
},
});
zingchart.exec('gaugeChart2', 'appendseriesdata', {
plotindex: 0,
update: false,
data: {
values: [output1],
},
});
zingchart.exec('gaugeChart3', 'appendseriesdata', {
plotindex: 0,
update: false,
data: {
values: [output2],
},
});
// 2) update guage markers
zingchart.exec('gaugeChart1', 'modify', {
update: false,
data: {
scaleR: {
markers: [Marker(colors[0], output0)],
},
},
});
zingchart.exec('gaugeChart2', 'modify', {
update: false,
data: {
scaleR: {
markers: [Marker(colors[1], output1)],
},
},
});
zingchart.exec('gaugeChart3', 'modify', {
update: false,
data: {
scaleR: {
markers: [Marker(colors[2], output2)],
},
},
});
// batch update all chart modifications
zingchart.exec('gaugeChart1', 'update');
zingchart.exec('gaugeChart2', 'update');
zingchart.exec('gaugeChart3', 'update');
}, 1500);
