Adding styles to our bar chart

We start thinking about how we can plot revenue and profit as a bar graph, when Calvin stops by. He takes a look at what we have. "Oh, I forgot. Sara sent a follow-up e-mail. There were a couple of categories that were left out of the spreadsheet. Let me forward that to you guys."

Calvin looks for the e-mail on his phone while he keeps talking, "Also, can you create a chart showing revenue grouped by product categories? She'll send over the data later this afternoon. OK, sent. I'll check back later," he says while walking out of the office.

We receive the second e-mail and open the updated spreadsheet. There are two new categories and their totals are much higher than the others. We can see why Sara is so concerned:

Damaged Item

$15,876.98

Defective Item

$26,078.41

Gift

$6,397.06

Not Correct Item

$12,876.60

No Longer Wanted/Needed

$41,654.67

Other / No Reason Given

$72,245.63

With all these categories on the x axis, we will not be able to read them all. So, we are going to rotate the labels to make them easier to read. We will also add point labels so that the y value of each bar appears above the bar. With these changes in mind, we set about updating our chart by executing the following steps:

  1. We start by adding in the pointLabels, canvasTextRenderer, and canvasAxisTickRenderer plugins. The canvas plugins place our ticks on a canvas element instead of a div element. This allows us to rotate our text:
    <script src="../js/jqplot.pointLabels.min.js"></script>
<script src="../js/jqplot.canvasTextRenderer.min.js"></script>
<script src="../js/jqplot.canvasAxisTickRenderer.min.js"></script>
<script>
  2. We add the two new categories and the dollar amounts to our data array:
    $(document).ready(function(){
  var returns = [['Damaged Item', 15876.98], ['No Longer Wanted/Needed', 41654.67], ['Defective Item', 26078.41], ['Gift', 6397.06], ['Not Correct Item', 12876.60], ['Other / No Reason Given', 72245.63]];

  var product_returns = $.jqplot ('product_returns', [returns],
  {
    title:'Total Cost of Product Returns over 6 months',
  3. To allow our ticks to rotate, we need to pass the CanvasAxisTickRenderer plugin to tickRenderer. Once we do this, we create tickOptions, and set the angle option to -30:
        axesDefaults: {
      tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
      tickOptions: { angle: -30 }
    },
  4. We create the pointLabels object under seriesDefaults, and set show to true:
        seriesDefaults:{
      renderer:$.jqplot.BarRenderer,
      pointLabels: { show: true }
    },
  5. We want a little more space between each category, so we set barMargin to 20. The default is 10. By default, jqPlot adds a little bit of shadow to each data point, whether it is a point on a line or a bar. We increase shadowAlpha to 0.8, which causes the bars to look three-dimensional:
        series: [
      {
        rendererOptions: {
          barMargin: 20,         
          shadowAlpha: 0.8
        }
      }
    ],
  6. Finally, we want to add some padding on our y axis. If we don't, the chart will autosize and not leave enough room for the point label on our bar that reaches $72,000.

    There are three options to set padding: pad, padMin, and padMax. The pad option will add padding to the upper and lower bounds of the y axis. The padMin option will only add padding to the lower bound, and padMax will add padding to the upper bound. Since we want padding only at the top of our chart, we set padMax to 1.2:

        axes:{
      xaxis:{ renderer: $.jqplot.CategoryAxisRenderer },
      yaxis: {
        label: 'Totals Dollars',
        padMax: 1.2,
        tickOptions: { formatString: "$%'d" }
      }
    }
  });
});
</script>

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

After all our hard work, we load the chart in our browser and see the following results. The Other / No Reason Given category is concerning.

Adding styles to our bar chart

By rotating our categories on the x axis, our tick marks do not run together like before. By using barMargin, we add some space between each category. With padMax, we add space to the top of our chart for point labels, which makes the value for each bar more accessible. Finally, the dark shadow on our bars makes the values stand out.

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

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