Learning jqPlot

This is a nice start, but we both agree that the leadership is going to want more than just a couple of days of revenue on a chart. Our next chart will display the profit and revenue numbers for the last 12 months. We will only need to make a few adjustments to our previous chart:

We include both arrays containing our revenue and profit figures:

<script src="../js/jqplot.dateAxisRenderer.min.js"></script>

<script>
$(document).ready(function(){

  var revenue = [['2011-11-20', 800538], ['2011-12-20', 804879], ['2012-01-20', 847732], ['2012-02-20', 795758], ['2012-03-20', 835554], ['2012-04-20', 844379], ['2012-05-20', 828510], ['2012-06-20', 753984], ['2012-07-20', 807403], ['2012-08-20', 755840], ['2012-09-20', 775304], ['2012-10-20', 781322]];

  var profit = [['2011-11-20', 192049.56], ['2011-12-20', 188744.75], ['2012-01-20', 197352.54], ['2012-02-20', 190106.74], ['2012-03-20', 193453.07], ['2012-04-20', 197249.69], ['2012-05-20', 205480.18], ['2012-06-20', 177648.78], ['2012-07-20', 193793.82], ['2012-08-20', 183221.56], ['2012-09-20', 192797.31], ['2012-10-20', 182451.68]];

We modify the variable name for our object and create a new ID attribute. Next, we combine both arrays into a container array and pass it into jqPlot. Within jqPlot, each array containing data is called a series and both series will appear on the same y axis:
```
  var rev_profit = $.jqplot ('revenueProfitChart', [revenue, profit],
  {
```

We modify the title and the labels for our axes. We also update the ID of our div element:

    title:'Monthly Revenue & Profit',
    axes:{
      xaxis:{
        renderer:$.jqplot.DateAxisRenderer,
        label: 'Months'
      },
      yaxis:{
        label: 'Totals Dollars',
        tickOptions: { formatString: "$%'d" } 
      }
    }
  });
});
</script>
<div id="revenueProfitChart" style="width:600px;"></div>

We load the page in the browser and smile. The changes to the chart get us closer to what the management is looking for. We can see the results of our efforts in the following figure.

Adding multiple y axes

The two data series are really far apart in their values. It's hard to decipher the value of each point by just looking at the chart. We'll put each series on its own y axis. This will make it easier to see interactions between our revenue and profit. We revisit the code and begin to alter it to separate the y axes.

We start by adding the series option. It is an array containing an object for each data series. For the first series, we can leave the default settings in place. So, we simply pass in an empty object. The second series will be on the second y axis, which means that we enter y2axis for the yaxis option. The ticks and label for this axis will appear on the right-hand side of our chart:
```
  var rev_profit = $.jqplot ('revenueProfitChart', [revenue, profit],
  {
    title:'Monthly Revenue & Profit',
    series:[
      {},
      {yaxis:'y2axis'}
    ],
```

We change the label for yaxis to Revenue. We copy all these options for y2axis. We then change the axis option and the label:

    axes:{
      xaxis:{
        renderer:$.jqplot.DateAxisRenderer,
        label: 'Months'
      },
      yaxis:{
        label: 'Revenue',
        tickOptions: { formatString: "$%'d" } 
      },
      y2axis:{
        label: 'Profit',
        tickOptions: { formatString: "$%'d" } 
      }
    }
  });

We load this new chart in our browser. The fruit of our labors can be seen in the following figure:

We begin to study the chart. It appears that profit as a part of revenue is better in some months when compared to other months, but we can't draw any clear conclusions from this chart. However, this can be a springboard to try to track down some correlations.

Learning jqPlot

By : Scott Gottreu

Learning jqPlot

By: Scott Gottreu

Overview of this book

Related Content you might be interested in

Current Title:

Learning jqPlot

Adding multiple data series

Adding multiple y axes