Learning jqPlot

We start by adding labels to each of our series objects. We add a label object to our empty object for the first data series. For the second series, we add the label option alongside the existing yaxis option.
```
title:'Monthly Revenue & Profit',
series:[
  { label: 'Revenue' },
  { label: 'Profit', yaxis:'y2axis' }
], 
```
Next, we add a legend option. In order for the legend to appear, we must set the show option to true. We also set placement to outsideGrid. The other two options available to us are insideGrid and outside. The outsideGrid option will place the legend outside the grid, but inside the plot object. Hence, the grid will be resized to accommodate the legend:
```
legend: {
  show: true,
  placement: 'outsideGrid'
},
```

We finish the updates to our new chart and open our web browser again. We now have a legend that will help us decipher our chart, which can be seen in the following figure:

Note

The insideGrid option will place the legend inside the grid. If we want the legend outside the grid, but we don't want our grid to shrink, we can use the outside option instead. Be aware that with the outside option, our legend can flow outside the plot and overlap other elements on our page.

We finally have a nice report. We call Calvin and ask him to come by and take a look at what we've got so far. We also need some direction on how to proceed. A few minutes later, he swings by our office.

"This is great," he says, "but we're going to need to expand on some of this data. How about we get a report that has last quarter's revenue and break out the profit by each division? Also, can you change the styles on those lines? Add a little flair or something." Calvin walks out and we stare at each other, trying to figure out how to add some "flair" to our report.

Adding line and marker options

We'll keep the first two data series as they are and put all the divisional data on y3axis. You mention that we can use different marker styles to set off the different divisions. We will turn off the line for the revenue and overall profit data series and just show the markers. As for the divisional series, we've got seven different styles to use for our markers, which are the following:

circle and filledCircle
diamond and filledDiamond
square and filledSquare
x

This works out well because we've got three major divisions in our data. You find the profit numbers that we will need, and we set to work updating our chart.

We start by including the profit numbers for each division. We also pass the following three data series arrays in to jqPlot:

<script src="../js/jqplot.dateAxisRenderer.min.js"></script>
<script>
$(document).ready(function(){

  var revenue = [['2012-07-20', 807403], ['2012-08-20', 755840], ['2012-09-20', 775304]];
  var profit = [['2012-07-20', 193793.82], ['2012-08-20', 183221.56], ['2012-09-20', 192797.31]];
  var electronics = [['2012-07-20', 116276.29], ['2012-08-20', 95867.97], ['2012-09-20', 120591.27]];
  var media = [['2012-07-20', 27596.25], ['2012-08-20', 32396.47], ['2012-09-20', 26709.06]];
  var nerd_corral = [['2012-07-20', 49921.28], ['2012-08-20', 54957.12], ['2012-09-20', 45496.98]];

  var rev_profit = $.jqplot ('division_profit', [revenue, profit, electronics, media, nerd_corral],
  {

Now that we have five series across three different axes, we will make use of the seriesDefaults option. By setting yaxis to y3axis, every data series will appear on this axis unless we override this option on the individual series. We also set the style option to filledCircle:
```
      title:'Q3 Revenue, Profit & Divisional Profits',
      seriesDefaults: {
        yaxis:'y3axis',
        markerOptions: {
          style: 'filledCircle',
          size: 10
        }
      },
```

Next, we create the series objects for revenue and profit. We set the showLine option to false along with style for markerOptions. Since we set the default axis in seriesDefaults, we also need to override this option:

      series:[
        {    
          label: 'Revenue',
          yaxis:'yaxis',
          showLine: false,
          markerOptions: { style: 'x' }
        },
        {
          label: 'Profit', 
          yaxis:'y2axis',
          showLine: false,
          markerOptions: { style: 'diamond' }
        },

For the Electronics division data series, we use the defaults. For the two remaining series, we set the style option to different values:

        { label: 'Electronics' },
        {
          label: 'Media & Software', 
          markerOptions: { style: 'filledSquare' }
        },
        {
          label: 'Nerd Corral',
          markerOptions: { style: 'filledDiamond' }
        }
      ],

Our next step is to set the default options under axesDefaults. We set the default formatString for currency, but this will cause problems for our x axis:
```
      axesDefaults: {
        tickOptions: { formatString: "$%'d" }
      },
```
Since we use the date renderer, we set the formatString option of the x axis to %B, which will output the full month name as the tick. jqPlot automatically calculates how many ticks it thinks we need for our axes. However, jqPlot sometimes creates more than we need. Since this chart deals with quarterly data, we set numberTicks to 3:
```
      axes:{
        xaxis:{
          label: 'Months',
          renderer:$.jqplot.DateAxisRenderer,
          numberTicks: 3,
          tickOptions: { formatString: "%B" }
        },
        yaxis: { label: 'Revenue' },
        y2axis: { label: 'Profit' }
      }
  }); 
});
</script>
```
With the added axis for our chart, we need to increase the width of our div.
```
<div id="division_profit" style="width:650px;"></div>
```

It was hard keeping track of all these options. We open our web browser, hoping we did everything correctly. We can see the result in the following figure. All the axes have different values. The lines for revenue and profit are missing, just as we wanted, and each data series has a different marker.

Everything worked as we intended, but the chart is hard to read. With the different axes, data points are overlapping. As we continue our research, we might find a better way to represent the same data.

Note

Since our data points are in the middle of the month, jqPlot will add a month to the end of the x axis to keep everything in bounds. If we only want the three months on the graph, we can change the dates to the first of the month.

Calvin stops by later and loves what we have. "This is a great first step. We will need some charts that pull in data from other sources, especially our social media accounts. We will also need to start showing trend lines."

Calvin walks out again without warning, leaving us to stare at each other. We decide we've done what we can for the morning, so we head off to lunch, preparing ourselves to tackle social media and trend lines upon our return.

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 a legend

Note

Adding line and marker options

Note