Chapter 3. Bar Charts and Digging into Data

In the previous chapters, we learned how to create line charts and area charts. In this chapter, we will turn our attention to bar charts. We'll look at different options to format our axes and ticks. After mastering bar charts, we will create event handlers for various jqPlot events. With these event handlers, we will extend the functionality of our charts. In this chapter, we will specifically learn the following topics:

  • Build a basic chart based on return options for products
  • Add additional data points and style our chart to work with the increasing data
  • Create a bar chart showing multiple data series
  • Add a trend line to our chart with multiple data series to see how they are trending
  • Add an event handler to our bar chart to expand on the data selected from the chart
  • Revisit our stacked area chart and add an event handler to show all the data points in a table

Building bars of data

While at lunch, Calvin took several phone calls. One near the end of lunch was from Sara, VP of Inventory. Her department is facing issues with higher than normal returns. She has a team investigating the problem, but she wants help. She wants a chart showing how much money is lost to returns and the reasons for the returns. She'd like the charts by the end of the meeting on Friday so that she can present the problem to the whole team. She needs their buy-in and help to work toward a solution.

Calvin relays this information to us as we walk back to the office. "She said she was going to e-mail a spreadsheet with the past six months' data in it. Can you do your thing and make Sara look like a rockstar? Her department is the most ignored, but it's the backbone of the company." We tell him we'll do our best.

By the time we get back to our desks, we have an e-mail waiting for us. We open the spreadsheet and see the following data:

Damaged Item

$15,876.98

Defective Item

$26,078.41

Gift

$6,397.06

Not Correct Item

$12,876.60

After looking over the data, we decide that our best choice is a bar chart. Bar charts are best used when we have categorical data to compare. We can compare various data points in one series or multiple data series. With this chart, we will be able to compare the dollar amounts in each category listed previously, so we will have just one data series. It is also possible to have multiple data series in each category, such as a different bar for each product category, and these data series grouped by regions.

  1. We start by including the categoryAxisRenderer and barRenderer plugins. These extend jqPlot to allow us to group our x axis by categories and create a bar chart:
    <script src="../js/jqplot.categoryAxisRenderer.min.js"></script>
<script src="../js/jqplot.barRenderer.min.js"></script>
<script>

$(document).ready(function(){
  2. We include our array containing the data points. Since we are using categoryAxisRenderer, we pass a string as the x value instead of a number or date:
      var returns = [['Damaged Item', 15876.98], ['Defective Item', 26078.41], ['Gift', 6397.06], ['Not Correct Item', 12876.60]];

  var product_returns = $.jqplot ('product_returns', [returns],
  {
    title:'Total Cost of Product Returns over 6 months',
  3. We assign BarRenderer to the renderer option for our one data series. If we were to include multiple data series, we could include this in seriesDefaults so we'd only have to include it once:
    series: [ { renderer:$.jqplot.BarRenderer } ],
  4. Since we are using categories for the x axis, we need to enable CategoryAxisRenderer as the renderer for the x axis:
        axes:{
      xaxis:{ renderer: $.jqplot.CategoryAxisRenderer },
      yaxis: {
        label: 'Totals Dollars',
        tickOptions: { formatString: "$%'d" }
      }
    }
  });
});
</script>

<div id="product_returns" style="width:600px;"></div>

    Tip

    We can mix and match data renderers. If we had multiple data series, we could render a bar chart for the first series and use a line chart for the second.

We load the page in our browser and see the following result:

Building bars of data
..................Content has been hidden....................

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