<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
<style>
.zc-background {
background-color: #fff;
}
.m-button {
margin: 40px;
padding: 15px;
cursor: pointer;
background-color: #FF4081;
border: none;
box-shadow: 5px 5px 5px #eee;
color: #fff;
font-family: Roboto;
font-size: 16px;
transition: .1s;
}
.m-button:active {
border-width: 0 0 2px 0;
opacity: 0.9;
transform: translateY(8px);
}
.m-button:hover {
opacity: .9;
}
.chart--container {
width: 100%;
height: 100%;
min-height: 530px;
}
#container1 {
align-items: center;
display: flex;
justify-content: center;
}
#myChart {
background-color: #fff;
border: 1px solid #eee;
box-shadow: 5px 5px 5px #eee;
margin: 0 auto;
width: 98%;
height: 380px;
}
.zc-ref {
display: none;
}
</style>
</head>
<body>
<div id="myChart" class="chart--container">
<a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
</div>
<div id="container1">
<button class="m-button" id="clear">Clear</button>
<button class="m-button" id="stop">Stop</button>
<button class="m-button" id="start">Start</button>
</div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
let chartConfig = {
type: 'line',
globals: {
fontFamily: 'Roboto'
},
backgroundColor: '#fff',
title: {
text: 'Real-Time Line Chart',
backgroundColor: '#1565C0',
color: '#fff',
height: '30x'
},
plot: {
aspect: 'spline',
hoverState: {
visible: false
},
lineWidth: '5px',
marker: {
visible: false
},
shadow: true,
shadowColor: '#eee',
shadowDistance: '10px'
},
plotarea: {
marginTop: '80px'
},
scaleY: {
values: '0:100:25',
guide: {
visible: false
}
},
crosshairX: {
lineColor: '#424242',
lineStyle: 'dashed',
lineWidth: '4px',
marker: {
size: '9px',
visible: true
},
plotLabel: {
padding: '15px',
backgroundColor: '#fff',
borderColor: '#e3e3e3',
borderRadius: '5px',
fontSize: '15px',
shadow: true,
shadowAlpha: 0.2,
shadowBlur: 5,
shadowDistance: 4
},
scaleLabel: {
padding: '5px',
backgroundColor: '#424242'
}
},
tooltip: {
visible: false
},
refresh: {
type: 'feed',
url: 'feed()',
interval: 500,
transport: 'js'
},
series: [{
text: 'Blue Line',
values: [],
lineColor: '#2196F3'
},
{
text: 'Orange Line',
values: [],
lineColor: '#ff9800'
}
]
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
// real-time feed random math function
window.feed = (callback) => {
let tick = {};
tick.plot0 = parseInt(10 + 90 * Math.random(), 10);
tick.plot1 = parseInt(10 + 90 * Math.random(), 10);
callback(JSON.stringify(tick));
};
let clearGraph = () => {
zingchart.exec('myChart', 'clearfeed')
};
let startGraph = () => {
zingchart.exec('myChart', 'startfeed');
};
let stopGraph = () => {
zingchart.exec('myChart', 'stopfeed');
};
// clear start stop click events
document.getElementById('clear').addEventListener('click', clearGraph);
document.getElementById('start').addEventListener('click', startGraph);
document.getElementById('stop').addEventListener('click', stopGraph);
</script>
</body>
</html>
let chartConfig = {
type: 'line',
globals: {
fontFamily: 'Roboto'
},
backgroundColor: '#fff',
title: {
text: 'Real-Time Line Chart',
backgroundColor: '#1565C0',
color: '#fff',
height: '30x'
},
plot: {
aspect: 'spline',
hoverState: {
visible: false
},
lineWidth: '5px',
marker: {
visible: false
},
shadow: true,
shadowColor: '#eee',
shadowDistance: '10px'
},
plotarea: {
marginTop: '80px'
},
scaleY: {
values: '0:100:25',
guide: {
visible: false
}
},
crosshairX: {
lineColor: '#424242',
lineStyle: 'dashed',
lineWidth: '4px',
marker: {
size: '9px',
visible: true
},
plotLabel: {
padding: '15px',
backgroundColor: '#fff',
borderColor: '#e3e3e3',
borderRadius: '5px',
fontSize: '15px',
shadow: true,
shadowAlpha: 0.2,
shadowBlur: 5,
shadowDistance: 4
},
scaleLabel: {
padding: '5px',
backgroundColor: '#424242'
}
},
tooltip: {
visible: false
},
refresh: {
type: 'feed',
url: 'feed()',
interval: 500,
transport: 'js'
},
series: [
{
text: 'Blue Line',
values: [],
lineColor: '#2196F3'
},
{
text: 'Orange Line',
values: [],
lineColor: '#ff9800'
}
]
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
// real-time feed random math function
window.feed = (callback) => {
let tick = {};
tick.plot0 = parseInt(10 + 90 * Math.random(), 10);
tick.plot1 = parseInt(10 + 90 * Math.random(), 10);
callback(JSON.stringify(tick));
};
let clearGraph = () => {
zingchart.exec('myChart', 'clearfeed')
};
let startGraph = () => {
zingchart.exec('myChart', 'startfeed');
};
let stopGraph = () => {
zingchart.exec('myChart', 'stopfeed');
};
// clear start stop click events
document.getElementById('clear').addEventListener('click', clearGraph);
document.getElementById('start').addEventListener('click', startGraph);
document.getElementById('stop').addEventListener('click', stopGraph);
