Zingchart real time data feed - zingchart

Question

I have this Zingchart(gauge type) which displays random numbers from 1 to 100 using JS. I need to achieve the same via PHP. How can I do this? What are the necessary changes that needs to be done?
window.feed = function(callback) {
var tick = {};
tick.plot0 = Math.ceil(Math.random() * 100);
callback(JSON.stringify(tick));
refresh:{
type:"feed",
transport:"js",
url:"feed()",
interval:1000,
resetTimeout:1000
},

Answer 1

The necessary changes to work in php would be to set up a endpoint to hit. If you did something like:
window.feed = function(callback) {
var tick = {};
tick.plot0 = Math.ceil(Math.random() * <?php $phpValue ?>);
callback(JSON.stringify(tick));
The variable $phpValue would not work for a Javascript feed function because that value would printed only ONE time as the server compiles the php ONCE.
What to do then?
You want to add a proper url endpoint which returns the tick format. That would look something like this:
refresh: {
type: 'feed',
transport: 'http',
url: 'https://us-central1-zingchart-com.cloudfunctions.net/public_http_feed?min=0&max=50&plots=2',
interval: 200
}
Where the url returns the following data structure:
[{
plot0: 3,
plot1: 18,
'scale-x': "13:33:48" // optional scale-x argument to produce [x,y] plotting
}]
You can read more on the http docs.
Solution
Demo here
// define top level feed control functions
function clearGraph() {
zingchart.exec('myChart', 'clearfeed')
}
function startGraph() {
zingchart.exec('myChart', 'startfeed');
}
function stopGraph() {
zingchart.exec('myChart', 'stopfeed');
}
// window.onload event for Javascript to run after HTML
// because this Javascript is injected into the document head
window.addEventListener('load', () => {
// Javascript code to execute after DOM content
//clear start stop click events
document.getElementById('clear').addEventListener('click', clearGraph);
document.getElementById('start').addEventListener('click', startGraph);
document.getElementById('stop').addEventListener('click', stopGraph);
// full ZingChart schema can be found here:
// https://www.zingchart.com/docs/api/json-configuration/
const myConfig = {
//chart styling
type: 'line',
globals: {
fontFamily: 'Roboto',
},
backgroundColor: '#fff',
title: {
backgroundColor: '#1565C0',
text: 'Real-Time Line Chart',
color: '#fff',
height: '30x',
},
plotarea: {
marginTop: '80px'
},
crosshairX: {
lineWidth: 4,
lineStyle: 'dashed',
lineColor: '#424242',
marker : {
visible : true,
size : 9
},
plotLabel: {
backgroundColor: '#fff',
borderColor: '#e3e3e3',
borderRadius:5,
padding:15,
fontSize: 15,
shadow : true,
shadowAlpha : 0.2,
shadowBlur : 5,
shadowDistance : 4,
},
scaleLabel: {
backgroundColor: '#424242',
padding:5
}
},
scaleY: {
guide: {
visible: false
},
values: '0:100:25'
},
tooltip: {
visible: false
},
//real-time feed
refresh: {
type: 'feed',
transport: 'http',
url: 'https://us-central1-zingchart-com.cloudfunctions.net/public_http_feed?min=0&max=50&plots=1',
interval: 500,
},
plot: {
shadow: 1,
shadowColor: '#eee',
shadowDistance: '10px',
lineWidth:5,
hoverState: {visible: false},
marker:{ visible: false},
aspect:'spline'
},
series: [{
values: [],
lineColor: '#2196F3',
text: 'Blue Line'
},{
values: [],
lineColor: '#ff9800',
text: 'Orange Line'
}]
};
// render chart with width and height to
// fill the parent container CSS dimensions
zingchart.render({
id: 'myChart',
data: myConfig,
height: '100%',
width: '100%',
});
});
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
#myChart {
margin: 0 auto;
height: 380px;
width: 98%;
box-shadow: 5px 5px 5px #eee;
background-color: #fff;
border: 1px solid #eee;
display: flex;
flex-flow: column wrap;
}
.controls--container {
display: flex;
align-items: center;
justify-content: center;
}
.controls--container button {
margin: 40px;
padding: 15px;
background-color: #FF4081;
border: none;
color: #fff;
box-shadow: 5px 5px 5px #eee;
font-size: 16px;
font-family: Roboto;
cursor: pointer;
transition: .1s;
}
.controls--container button:hover {
opacity: .9;
}
/*button movement*/
.controls--container button:active {
border-width: 0 0 2px 0;
transform: translateY(8px);
opacity: 0.9;
}
.zc-ref { display:none; }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingGrid: Blank Grid</title>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<!-- CHART CONTAINER -->
<div id="myChart">
<a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a>
</div>
<div class="controls--container">
<button id="clear">Clear</button>
<button id="stop">Stop</button>
<button id="start">Start</button>
</div>
</body>
</html>