Refreshing our chart from remote data

About an hour later, Jeff stops back by the office. We show him our prototype. "This is cool. My guys are still trying to figure out how to pass the information from the routers to our web servers. In the meantime, I had them create a mock endpoint that you can test against. I told them to e-mail you the link." Jeff leaves, and a few minutes later, we receive an e-mail from Mark in IT.

We load the URL and see that the page contains the single array [200]. With this endpoint, we'll only need to change a few things in our meter.

We save our previous gauge chart as a new file and begin making our modifications, as follows:

  1. We start by adding dataPull to format our data. We only need to wrap remoteData in an array, as shown in the following code snippet:
    $(document).ready(function(){

  function dataPull(remoteData,options) {
    return [remoteData];
  }

    Tip

    If your chart does not load the new data, you will need to set cache to false inside the AJAX method in our remoteDataCallback method located in functions.js.

  2. Next, we pass in the JSON URL to our chart. Then, we set remoteDataCallback as our dataRenderer, which is the method that retrieves our remote data. After this, we set dataPull as our callback under dataRendererOptions:
      var meter = $.jqplot('wifi', './data/wifi_users.json',
    {
      dataRenderer: remoteDataCallback,
      dataRendererOptions: { dataCallback: dataPull },
      seriesDefaults: {
        renderer: $.jqplot.MeterGaugeRenderer,
  3. We don't want our label in the middle of our gauge, so we set labelPosition to bottom. Now, it will appear below our chart. This can be implemented by using the following code snippet:
            rendererOptions: {
          min: 0,
          max: 255,
          label: 'WIFI users',
          labelPosition: 'bottom',
  4. Since we want to refresh the data from a remote source, we need to use replot instead of redraw. We will also need to use replot if we want to change our ticks or axes. We set the data object to our JSON URL located on the server we are working on. When setInterval fires, it will pull the data again, and it will then replot all the data and axes:
      window.setInterval(function() {
    meter.replot({ data: './data/wifi_users.json'});
  }, 5000);
});
</script>
<div id="wifi" style="width:400px;"></div>

We load our updated chart, and everything looks like before, except that our label is below the gauge now, as shown in the following figure:

Refreshing our chart from remote data

After 5 seconds, nothing changes. This is because the JSON Jeff created for us is currently static. If we look at our console though, we will see network traffic as a result of our script pulling the remote data. Once IT changes the endpoint to reflect dynamic data, our chart will begin to change.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.138.34.226