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:

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: