Using objects to piece together our chart

We both sit back a bit exhausted. That was a lot of work but now is when we'll see the pay-off. With all these functions created, we start with the stacked bar chart showing total revenue for each division. We decide to start from scratch with our HTML since we are completely changing how we build our chart.

  1. We add the dateAxisRenderer, barRenderer, and canvas plugin files. We also make sure to add functions.js and themes.js:
    <script src="../js/jqplot.dateAxisRenderer.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>
<script src="../js/functions.js"></script>
<script src="../js/themes.js"></script>
<script>
$(document).ready(function(){
  2. Next, we create dataSeriesObj to hold the options for each series. Instead of creating our normal dataPull function, we create another function expression. We loop through each division and store the values in data. We create an object where we set the label to the division name stored in division. We also set the color for the series to the element in division_colors that matches the currently selected division. When we finish our loop, we return our data array as shown in the following code snippet:
      var dataSeriesObj = new Array;

  var dataPull = function(remoteData,options) {
    var data = new Array();
    for (var division in remoteData) {
      if (remoteData.hasOwnProperty(division)) {
        data.push(remoteData[division]);
        dataSeriesObj.push( { label: division, color: division_colors[division][0] } );
      }
    }
    return data;
  };
  3. We declare plotObj to hold the object that defaultBarObj will return. We pass in our empty dataSeriesObj array, the date plugin, and our new dataPull function expression. Our default structure only creates basic bar charts, so we set stackSeries to true on our new plotObj. We also add our title as follows:
      var plotObj = defaultBarObj(dataSeriesObj, $.jqplot.DateAxisRenderer, dataPull);
  plotObj.stackSeries = true;
  plotObj.title = 'Monthly Revenue by Division';
  4. We also format the ticks on xaxis to show the month and year. We finish building our object by passing plotObj and company_colors into color_theme. This will set seriesColors to our purple array, which creates the default series colors. When dataPull is called, the color for each series is overwritten as follows:
      plotObj.axes.xaxis.tickOptions = { formatString: "%b %Y" };
  plotObj = color_theme(plotObj,company_colors);
  5. Normally, we create a long list of object variables, but since these are all stored in plotObj, we just pass that into our jqPlot object. Because we are creating everything as an object and passing in dataPull as a variable, dataSeriesObj is updated before the chart is rendered. Therefore, our series labels and colors are available when the chart is rendered, so we won't have to call replot like we did with our charts last week.
      var division_revenue = $.jqplot ('division_revenue', 'data/12_month_div_revenue.json', plotObj);
});
</script>
  6. We set the width and height so that it will fit better on a page with multiple charts as follows:
    <div id="purpleDivisionRevenue" class="w400 h300"></div>

    We load the chart in our browser and review the results. We have a stacked bar chart where each division is rendered in its own respective color scheme. Also, we removed the grid lines and the background is based on the company color scheme as shown in the following screenshot:

    Using objects to piece together our chart
..................Content has been hidden....................

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