Zingchart real time data feed

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>