Creating charts with multiple data series

As we begin thinking about how to expand this report, we get another e-mail from Sara.

"Hey, I got to thinking and we've cut purchasing in some product categories. We're taking heat from the rest of the team because they think we're being too cautious. Can you create a chart with the four product categories I included? You'll also find revenue numbers for the last six quarters."

We start thinking about how this chart will work. We know that each category will be a data series, and so, there will be four bars listed for each quarter for a total of 24 bars. With the default margins and padding, our bars will be resized to tiny slivers. So, we'll need to change some formatting. Also, since we have multiple data series, we will have to set the ticks for our x axis separately. With these parameters, we set about building our chart executing the following steps:

  1. We include the plugins we've been using:
    <script src="../js/jqplot.categoryAxisRenderer.min.js"></script>
<script src="../js/jqplot.barRenderer.min.js"></script>
<script src="../js/jqplot.canvasTextRenderer.min.js"></script>
<script src="../js/jqplot.canvasAxisTickRenderer.min.js"></script>
  2. We move on to include our four data series and an array of the labels for our ticks:
    ...
<script>
$(document).ready(function(){
  var dvds = [546643.33, 517902.14, 482774.32, 455892.62, 438679.00, 406907.18];
  var cds = [398583.39, 386552.99, 372738.46, 359209.91, 336457.82, 327396.58];
  var tvs = [378583.39, 346552.99, 368164.98, 371856.60, 366457.82, 327396.58];
  var computers = [563621.35, 540214.96, 589978.66, 637114.31, 621279.49, 599837.31];
  var ticks = ['Q2 - 2011', 'Q3 - 2011', 'Q4 - 2011', 'Q1 - 2012', 'Q2 - 2012', 'Q3 - 2012'];
  3. We create our jqPlot object and pass in our data arrays. We also set our ticks to be rotated at -30 degrees:
      var rev_category = $.jqplot ('rev_category', [dvds, cds, tvs, computers],
  {
    title:'Quarterly Revenue by Product',
    axesDefaults: {
      tickRenderer: $.jqplot.CanvasAxisTickRenderer,
      tickOptions: { angle: -30 }
    },
  4. Just as we have padding options for our axes, we also have a padding option for our bars along with the barMargin option discussed earlier. While barMargin adds space between categories, barPadding adds spacing between the bars within a category.

    We set barMargin to 6 and barPadding to 2, which will give us a little bit of space between our categories and individual bars. We also set shadow to false because our bars are so close together:

        seriesDefaults:{
      renderer:$.jqplot.BarRenderer,
      rendererOptions: {
        barMargin: 6,
        barPadding: 2,
        shadow: false
      }
    },
    series: [
      { label: 'DVDs/Blu-ray' },
      { label: 'Music CDs' },
      { label: 'TVs' },
      { label: 'Computers' }
    ],
  5. For this chart, we set the legend placement to insideGrid. This will cause our plot to get bigger because it is not trying to accommodate the legend. We also make use of the location option. By setting it to nw, our legend will appear in the top-left corner of the legend. If we pick s, it will appear at the bottom of our plot in the middle:
        legend: {
      show: true, placement: 'insideGrid', location: 'nw' 
    },
  6. We set the ticks option on our x axis to the ticks array we added earlier. Finally, we don't want our legend to cover our bars, so we set padMax on the y axis to 1.6:
        axes:{
      xaxis:{ label: 'Quarters', renderer: $.jqplot.CategoryAxisRenderer, ticks: ticks },
      yaxis: {
        label: 'Totals Dollars',
        padMax: 1.6,
        tickOptions: { formatString: "$%'d" }
      }
    }
  });
});
</script>

<div id="rev_category" style="width:700px;"></div>

After loading the new chart in our browser, we see that all our work gives us the following result:

Creating charts with multiple data series

One of the benefits of bar charts is that the values they express are more discreet. Earlier, we plotted revenue data on line graphs. By connecting the data points with lines, it gives the impression that revenue moves in a straight line between each date interval. Bar charts group all the data for an interval into a bar, and they better represent data that might fluctuate greatly during the intervals shown.

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

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