Up to this point, most of our charts used static data stored within our HTML files. We made some interactive charts where we reloaded the data, but we had to reload the entire page. There are two methods in jqPlot: redraw and replot. These methods allow us to rebuild our charts without reloading the page.

In this chapter, we will cover the following topics:

We come to work on Friday morning and find Jeff from IT waiting for us. "Morning", he says. We ask him what we can do for him.

"I was talking with Sara yesterday," Jeff says. "She told me she was concerned about people coming into our store, browsing, and then going online to buy the same item. She asked if there was any way for us to know if people were looking at a competitor's site while in our stores."

Jeff continued, "So, I went back to my office and looked through our Wi-Fi access logs. Just over 50 percent of guest traffic is to competitor sites. This got me thinking. What if we sent sales messages to people's phones when they first got online in-store or just made an announcement over the PA system?"

I stop Jeff. "That's all feasible, but where do we come in?" Jeff nods, "Right, I was wondering if you can make some kind of chart or widget showing how many people are on the Wi-Fi network at a given time, and then update the information every few minutes?"

We look at each other. I answer Jeff, "If we can get access to the data from the Wi-Fi access points, then I think we can. Your department will have to create an API end point for us to connect to though."

Jeff nods again, "I'll get some of my guys on it. Can you make some kind of prototype with fake data to show Roshan, and then we can work in the real data later?" We assure him we can. Jeff stands to leave. "I really appreciate it. I'll check in with you later."

Creating a meter gauge chart with Wi-Fi users

We begin to ponder what kind of chart to use for Jeff's idea. After looking through the documentation, we decide to use jqPlot's meter gauge. It's a chart that resembles a gauge on a car dashboard, with a needle pointing to the given data point on the semicircular gauge.

We create a new HTML file and set about creating our meter gauge as follows:

1. We start by including the MeterGaugeRenderer plugin file. Since this is a prototype, we'll start by passing in a single value to the data array:

   <script src="../js/jqplot.meterGaugeRenderer.min.js"></script>
   <script>
   $(document).ready(function(){
     var meter = $.jqplot('wifi', [[100]],
       {

2. We move on to seriesDefaults and start by setting the renderer to $.jqplot.MeterGaugeRenderer. After that, we begin setting some of the rendererOptions by setting the minimum and maximum values, as follows:

         seriesDefaults: {
           renderer: $.jqplot.MeterGaugeRenderer,
           rendererOptions: {
             min: 0,
             max: 255,

3. We also set label to WIFI users, and then set ticks at intervals of 50 using an array, as follows:

             label: 'WIFI users',
             ticks:[0, 50, 100, 150, 200, 250],

4. We want to make use of the intervals option. Assuming that Jeff will want to send messages when there are a certain number of people in the store, we set the intervals at 30, 175, 225, and 255. Each value will be the upper bound for the interval. This can be implemented as follows:

             intervals:[30, 175, 225, 255],

5. Next, we override the default color scheme for our intervals and use the typical green, yellow, and red scheme. For our first interval, we don't want any color to appear, so we use the same color as the chart itself. Once the needle goes above 175, the interval will appear yellow, and anything above 225 will be red. The code for this is as follows:

             intervalColors:['#efefef', '#66cc66', '#E7E658', '#f00']
           }
         }
       });

6. To make our chart update at set intervals, we will use window.setInterval, which is a standard JavaScript method. Since this is a prototype, we create a random number between 30 and 255:

     window.setInterval(function() {
       var rnd = Math.floor(Math.random() * (255 - 30 + 1)) + 30;

7. Next, we locate the element in the data series array located within our jqPlot object. We manually set this to 100 when we create the object. Now, we update it with a new array. Since we are only passing in one data point, we set the x value to 1 and then pass in rnd as the y value. Then, we call the redraw function, which will redraw the chart. We set the time interval to 5000, so our chart will update every 5 seconds, as follows:

       meter.series[0].data[0] = [1,rnd];
       meter.redraw();
     }, 5000);
   });
   </script>
   <div id="wifi" style="width:300px;height:200px;"></div>
   <style>
   .jqplot-meterGauge-label { font-size: 12px;}
   </style>

We load the chart in our browser and see the following figure:

We see our gauge with the needle at 100. We also see the 4 intervals. The first interval appears blank because we set it to have the same color as the gauge. The green interval is large and is followed by the yellow and red intervals. The only downside is that our label appears in the middle of the gauge. If we were not using the colors, we would be able to read the label.

Then, we notice the chart is redrawn and the needle now appears near 200, as shown in the following figure:

This is a good start. We decide to wait for Jeff's response before moving forward, so we move on to some smaller projects that have been waiting.