<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script src='https://cdn.zingchart.com/zingchart.min.js'></script>
<style>
.zc-body {
background: #272822;
}
.chart--container {
height: 100%;
width: 100%;
min-height: 530px;
}
.zc-ref {
display: none;
}
</style>
</head>
<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"];
// DEFINE CHART
// -----------------------------
// Main chart render location
var chartId = 'myChart';
// DOM ELEMENTS
// -----------------------------
var renderBtn = document.querySelector('#renderBtn');
var renderInput = document.querySelector('#renderInput');
// VARS
// -----------------------------
// Define theme
zingchart.THEME = 'classic';
// Constants
var sineVal = 20;
var bReduce = false;
var threshold = 20;
var aActual = makePlot(300, 20, 30);
var aMin = JSON.parse(JSON.stringify(aActual));
var aMax = JSON.parse(JSON.stringify(aMin));
var m2 = 32;
var maxValue = 120;
// INIT DATA
// -----------------------------
var myConfig = {
type: 'area',
series: [{
values: []
}, {
values: []
}, {
values: []
}],
backgroundColor: '#272822',
title: {
text: 'Min / Max Area Demo',
backgroundColor: 'transparent',
fontFamily: 'Roboto',
fontSize: '18px'
},
plotarea: {
backgroundColor: '#272822'
},
legend: {
margin: '88% auto auto auto',
layout: 'float',
fontSize: '10px',
backgroundColor: 'transparent',
borderColor: 'transparent',
shadowColor: 'transparent',
toggleAction: 'remove',
item: {
markerStyle: 'circle',
fontColor: '#ffffff'
}
},
scaleX: {
visible: false
},
scaleY: {
values: '-120:120:10',
lineColor: '#DDD',
tick: {
lineColor: '#DDD'
},
item: {
fontColor: '#DDD'
},
refLine: {
lineColor: '#DDD'
}
}
};
// RENDER CHART
// -----------------------------
zingchart.render({
id: 'myChart',
data: myConfig,
height: 560,
width: 1000
});
// UPDATE CHART INTERVAL
// -----------------------------
setInterval(function() {
if ((sineVal < -threshold) || (sineVal > threshold)) {
bReduce = !bReduce;
threshold += 50;
if (threshold >= maxValue) {
maxValue += 100;
zingchart.exec('myChart', 'modify', {
data: {
scaleY: {
values: "-" + maxValue + ":" + maxValue + ":10"
},
}
})
}
}
sineVal = (bReduce) ? --sineVal : ++sineVal;
m2 -= 0.2;
aActual = makePlot(300, sineVal, m2);
//Loops through the actual and compares values in the min and max arrays.
for (var i = 0; i < aActual.length; i++) {
if (aActual[i] > aMax[i]) {
aMax[i] = aActual[i];
}
if (aActual[i] < aMin[i]) {
aMin[i] = aActual[i];
}
}
zingchart.exec('myChart', 'setseriesdata', {
data: [{
values: aActual,
lineColor: '#e2e2e2',
backgroundColor: '#e2e2e2',
shadowColor: 'transparent',
lineWidth: 2,
text: 'Actual'
},
{
values: aMin,
lineColor: '#1fbff3',
shadowColor: 'transparent',
lineWidth: 2,
text: 'Min'
},
{
values: aMax,
lineColor: '#f01400',
shadowColor: 'transparent',
lineWidth: 2,
text: 'Max'
}
]
});
}, 60);
// HELPER FNS
// -----------------------------
function makePlot(nodes, s, m2) {
var m1 = 22,
values = [];
for (var n = 0; n < nodes + 1; n++) {
v = s * Math.exp(Math.abs(n - nodes / 2) / nodes) * Math.sin(n / (nodes / (m1))) * Math.cos(n / (nodes / m2));
v = parseFloat(v.toFixed(2));
values.push(v)
}
return values;
}
</script>
</body>
</html>
// DEFINE CHART
// -----------------------------
// Main chart render location
var chartId = 'myChart';
// DOM ELEMENTS
// -----------------------------
var renderBtn = document.querySelector('#renderBtn');
var renderInput = document.querySelector('#renderInput');
// VARS
// -----------------------------
// Define theme
zingchart.THEME = 'classic';
// Constants
var sineVal = 20;
var bReduce = false;
var threshold = 20;
var aActual = makePlot(300, 20, 30);
var aMin = JSON.parse(JSON.stringify(aActual));
var aMax = JSON.parse(JSON.stringify(aMin));
var m2 = 32;
var maxValue = 120;
// INIT DATA
// -----------------------------
var myConfig = {
type: 'area',
series: [{values: []},{values: []},{values: []}],
backgroundColor: '#272822',
title: {
text: 'Min / Max Area Demo',
backgroundColor: 'transparent',
fontFamily: 'Roboto',
fontSize: '18px'
},
plotarea: {
backgroundColor: '#272822'
},
legend: {
margin :'88% auto auto auto',
layout: 'float',
fontSize: '10px',
backgroundColor: 'transparent',
borderColor: 'transparent',
shadowColor: 'transparent',
toggleAction: 'remove',
item: {
markerStyle: 'circle',
fontColor: '#ffffff'
}
},
scaleX: {
visible: false
},
scaleY: {
values: '-120:120:10',
lineColor: '#DDD',
tick: {
lineColor: '#DDD'
},
item: {
fontColor: '#DDD'
},
refLine: {
lineColor: '#DDD'
}
}
};
// RENDER CHART
// -----------------------------
zingchart.render({
id: 'myChart',
data: myConfig,
height: 560,
width: 1000
});
// UPDATE CHART INTERVAL
// -----------------------------
setInterval(function(){
if( (sineVal < -threshold) || (sineVal > threshold) ){
bReduce = !bReduce;
threshold += 50;
if(threshold >= maxValue){
maxValue += 100;
zingchart.exec('myChart', 'modify', {
data: {
scaleY: {
values: "-" + maxValue + ":" + maxValue + ":10"
},
}
})
}
}
sineVal = (bReduce)? --sineVal: ++sineVal;
m2 -= 0.2;
aActual = makePlot(300, sineVal, m2);
//Loops through the actual and compares values in the min and max arrays.
for( var i = 0 ; i < aActual.length; i++ ){
if( aActual[i] > aMax[i] ){
aMax[i] = aActual[i];
}
if( aActual[i] < aMin[i] ){
aMin[i] = aActual[i];
}
}
zingchart.exec('myChart', 'setseriesdata', {
data: [
{
values: aActual,
lineColor: '#e2e2e2',
backgroundColor: '#e2e2e2',
shadowColor: 'transparent',
lineWidth: 2,
text: 'Actual'
},
{
values: aMin,
lineColor: '#1fbff3',
shadowColor: 'transparent',
lineWidth: 2,
text: 'Min'
},
{
values: aMax,
lineColor: '#f01400',
shadowColor: 'transparent',
lineWidth: 2,
text: 'Max'
}
]
});
},60);
// HELPER FNS
// -----------------------------
function makePlot(nodes, s, m2){
var m1 = 22,
values = [];
for (var n=0;n<nodes+1;n++) {
v = s*Math.exp(Math.abs(n-nodes/2)/nodes)*Math.sin(n/(nodes/(m1)))*Math.cos(n/(nodes/m2));
v = parseFloat(v.toFixed(2));
values.push(v)
}
return values;
}
