<!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-html,
.zc-body {
background-color: #fff;
}
.chart--container {
min-height: 400px;
width: 100%;
height: calc(100% - 75px);
}
.lfm .feed-control-container {
/* center align feed controls */
text-align: center;
}
.lfm .feed-control {
margin-left: 15px;
padding: 10px;
background: #ff9100;
border-color: #ff6d00;
border-radius: 4px;
border-style: solid;
border-width: 0 0 5px 0;
color: white;
cursor: pointer;
font-size: 16px;
transition: .1s;
z-index: 1000;
}
.lfm .feed-control:active {
border-width: 0 0 2px 0;
opacity: 0.9;
transform: translateY(8px);
}
.lfm .feed-control:focus {
outline: none !important;
/* make sure no css conflicts with this demo */
}
.lfm form {
display: flex;
flex-direction: column;
}
.lfm .flex {
display: flex;
justify-content: space-around;
margin-bottom: 10px;
}
.zc-ref {
display: none;
}
</style>
</head>
<body class="zc-body">
<div class="lfm">
<form onSubmit="return window.updateRules(this);">
<div class="flex">
<label for="min-threshold">Min Temp</label>
<input type="number" id="min-threshold" value="55">
<label for="max-threshold">Max Temp</label>
<input type="number" id="max-threshold" value="85">
<label for="min-threshold-color">Min Color</label>
<input type="color" id="min-threshold-color" value="#F44336">
<label for="max-threshold-color">Max Color</label>
<input type="color" id="max-threshold-color" value="#2196F3">
</div>
<div class="flex">
<button type="submit">Submit Changes</button>
</div>
</form>
<div id="myChart" class="chart--container">
<a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
</div>
<div class="feed-control-container">
<button id="stop" class="feed-control">Stop</button>
<button id="start" class="feed-control">Start</button>
</div>
</div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // DEFINE DATA
// -----------------------------
let valuesArray = [50, 65, 115, 25, 35, 75, 85, 95, 45, 35, 75, 105, 65];
let globalMin = 55;
let globalMax = 85;
let globalMinColor = '#F44336';
let globalMaxColor = '#2196F3';
// HELPER METHODS
// -----------------------------
let getColorData = (min, max, minColor, maxColor) => {
globalMin = typeof min !== 'undefined' ? min : globalMin;
globalMax = typeof max !== 'undefined' ? max : globalMax;
globalMinColor = typeof minColor !== 'undefined' ? minColor : globalMinColor;
globalMaxColor = typeof maxColor !== 'undefined' ? maxColor : globalMaxColor;
return [{
backgroundColor: '#C0C0C0',
rule: '%v < ' + globalMin,
},
{
backgroundColor: globalMinColor,
rule: '%v >= ' + globalMin + ' && %v <= ' + globalMax,
},
{
backgroundColor: globalMaxColor,
rule: '%v > ' + globalMax,
},
];
};
// CHART CONFIG
// -----------------------------
let chartConfig = {
type: 'bar',
plot: {
tooltip: {
visible: false,
},
rules: getColorData(),
},
plotarea: {
margin: 'dynamic',
},
scaleX: {
label: {
text: 'Insert Timestamp',
},
},
scaleY: {
format: '%v°',
label: {
text: 'Degrees In Celcius',
},
},
crosshairX: {
alpha: 0.3,
lineWidth: '100%',
plotLabel: {
text: '<span style="color:%color">%v°</span>',
padding: '8px',
backgroundColor: '#e0e0e0',
borderRadius: '5px',
fontSize: '18px',
},
},
shapes: [{
type: 'rectangle',
backgroundColor: '#C0C0C0',
label: {
text: 'Values Below Min',
offsetX: '65px',
},
width: '25px',
height: '10px',
x: '75px',
y: '5px',
}, ],
refresh: {
type: 'feed',
url: 'feed()',
interval: 400,
resetTimeout: 1000,
transport: 'js',
},
series: [{
values: [],
}, ],
};
// RENDER CHARTS
// -----------------------------
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '95%',
});
// HELPER METHODS
// -----------------------------
/*
* Feed function to mimick live data coming in
*/
window.feed = (callback) => {
let tick = {};
tick.plot0 =
valuesArray[Math.floor(Math.random() * (valuesArray.length - 1))];
callback(JSON.stringify(tick));
};
/*
* Global function at the window level due to example being used in
* an iframe
*/
window.updateRules = (form) => {
try {
// grab form values
let minValue = form.querySelector('#min-threshold').value;
let maxValue = form.querySelector('#max-threshold').value;
let minColor = form.querySelector('#min-threshold-color').value;
let maxColor = form.querySelector('#max-threshold-color').value;
// minimally update the chart by updating the rules only
zingchart.exec('myChart', 'modify', {
data: {
plot: {
rules: getColorData(minValue, maxValue, minColor, maxColor),
},
},
});
} catch (e) {
// make sure if error form doesn't submit
}
return false; // return false to prevent default behavior of form submission
};
let startGraph = () => {
zingchart.exec('myChart', 'startfeed');
};
let stopGraph = () => {
zingchart.exec('myChart', 'stopfeed');
};
// EVENTS
// -----------------------------
document.getElementById('start').addEventListener('click', startGraph);
document.getElementById('stop').addEventListener('click', stopGraph);
</script>
</body>
</html>
// DEFINE DATA
// -----------------------------
let valuesArray = [50, 65, 115, 25, 35, 75, 85, 95, 45, 35, 75, 105, 65];
let globalMin = 55;
let globalMax = 85;
let globalMinColor = '#F44336';
let globalMaxColor = '#2196F3';
// HELPER METHODS
// -----------------------------
let getColorData = (min, max, minColor, maxColor) => {
globalMin = typeof min !== 'undefined' ? min : globalMin;
globalMax = typeof max !== 'undefined' ? max : globalMax;
globalMinColor = typeof minColor !== 'undefined' ? minColor : globalMinColor;
globalMaxColor = typeof maxColor !== 'undefined' ? maxColor : globalMaxColor;
return [
{
backgroundColor: '#C0C0C0',
rule: '%v < ' + globalMin,
},
{
backgroundColor: globalMinColor,
rule: '%v >= ' + globalMin + ' && %v <= ' + globalMax,
},
{
backgroundColor: globalMaxColor,
rule: '%v > ' + globalMax,
},
];
};
// CHART CONFIG
// -----------------------------
let chartConfig = {
type: 'bar',
plot: {
tooltip: {
visible: false,
},
rules: getColorData(),
},
plotarea: {
margin: 'dynamic',
},
scaleX: {
label: {
text: 'Insert Timestamp',
},
},
scaleY: {
format: '%v°',
label: {
text: 'Degrees In Celcius',
},
},
crosshairX: {
alpha: 0.3,
lineWidth: '100%',
plotLabel: {
text: '<span style="color:%color">%v°</span>',
padding: '8px',
backgroundColor: '#e0e0e0',
borderRadius: '5px',
fontSize: '18px',
},
},
shapes: [
{
type: 'rectangle',
backgroundColor: '#C0C0C0',
label: {
text: 'Values Below Min',
offsetX: '65px',
},
width: '25px',
height: '10px',
x: '75px',
y: '5px',
},
],
refresh: {
type: 'feed',
url: 'feed()',
interval: 400,
resetTimeout: 1000,
transport: 'js',
},
series: [
{
values: [],
},
],
};
// RENDER CHARTS
// -----------------------------
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '95%',
});
// HELPER METHODS
// -----------------------------
/*
* Feed function to mimick live data coming in
*/
window.feed = (callback) => {
let tick = {};
tick.plot0 =
valuesArray[Math.floor(Math.random() * (valuesArray.length - 1))];
callback(JSON.stringify(tick));
};
/*
* Global function at the window level due to example being used in
* an iframe
*/
window.updateRules = (form) => {
try {
// grab form values
let minValue = form.querySelector('#min-threshold').value;
let maxValue = form.querySelector('#max-threshold').value;
let minColor = form.querySelector('#min-threshold-color').value;
let maxColor = form.querySelector('#max-threshold-color').value;
// minimally update the chart by updating the rules only
zingchart.exec('myChart', 'modify', {
data: {
plot: {
rules: getColorData(minValue, maxValue, minColor, maxColor),
},
},
});
} catch (e) {
// make sure if error form doesn't submit
}
return false; // return false to prevent default behavior of form submission
};
let startGraph = () => {
zingchart.exec('myChart', 'startfeed');
};
let stopGraph = () => {
zingchart.exec('myChart', 'stopfeed');
};
// EVENTS
// -----------------------------
document.getElementById('start').addEventListener('click', startGraph);
document.getElementById('stop').addEventListener('click', stopGraph);
