Search in book...
Toggle Font Controls
Create new playlist

Name your new playlist

Playlist description (optional)
Sign In

Email address

Password

Forgot Password?

or

Continue with Facebook

Continue with Google
Sign Up

Full Name

Email address

Confirm Email Address

Password

or

Continue with Facebook

Continue with Google

Chapter 11. Bringing it All Together

Over the course of this book, we have covered various options for the creation and styling of charts. All of this hard work and learning will culminate in the projects that we will create in this chapter. In this chapter, we'll learn the following topics:

Combine the four charts from the previous chapter into a coherent dashboard
Build a divisional dashboard based on the division submitted through a query string
Create a chart and mix the line renderer with the bar renderer
Add our company logo to our mixed chart using a canvas element
Modify the donut renderer plugin to add a tooltip
Modify our donut chart to use our modified donut plugin

We return to the office on Tuesday morning to finish up the VP dashboard and show it off to Roshan, Sara, and Calvin. All we need to do is take the charts we made yesterday and convert a few of the dataPull functions to the function expressions and create unique names for the objects holding the plot options and the series data.

Combining four charts into a dashboard

We created four charts yesterday and now we need to merge these into one page. We create a new file and save it. To combine the four charts into a dashboard, perform the following steps:

We start by adding in all the plugin files we need for all four charts:

<script src="../js/jqplot.dateAxisRenderer.min.js"></script>
<script src="../js/jqplot.categoryAxisRenderer.min.js"></script>
<script src="../js/jqplot.barRenderer.min.js"></script>
<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 src="../js/functions.js"></script>
<script src="../js/themes.js"></script>

Next, we paste in the JavaScript for our line chart from 1168_10_03.html. We start by changing the name of our dataPull function to profitDataPull as follows:
```
  var profitDataPull = function(remoteData,options) {
    return [remoteData.Revenue, remoteData.Profit];
  }
```
We could create a default line chart object, but since there are so many custom changes, we would spend more time overwriting our defaults. So, we only change the name of the function under dataRendererOptions as follows:
```
dataRendererOptions: { dataCallback: profitDataPull },
```
Next, we copy over the JavaScript for our waterfall chart found in 1168_10_04.html. We create a function expression unique for our waterfall chart as follows:
```
  var revExpDataPull = function(rd,options) {
    return [[rd.revenue, 
      rd.operating_expenses, 
      rd.fixed_costs, 
      rd.returns]];
  }
```
We make use of our default bar chart object and save this in our revExpPlotObj variable also passing in our new revExpDataPull function. We set negativeSeriesColors to n_company_colors. Under rendererOptions for our series defaults, we set waterfall and useNegativeColors to true and highlightMouseOver to false as shown in the following code snippet:
```
  var revExpPlotObj = defaultBarObj(revExpSeriesObj, $.jqplot.CategoryAxisRenderer, revExpDataPull);
  revExpPlotObj.negativeSeriesColors = n_company_colors;
  revExpPlotObj.seriesDefaults.rendererOptions = {
    waterfall: true,
    useNegativeColors: true,
    highlightMouseOver: false
  };
```

We also set pointLabels to true and turn off the y axis ticks and the legend as follows:

  revExpPlotObj.seriesDefaults.pointLabels = { show: true };
  revExpPlotObj.axes.yaxis.showTicks = false;
  revExpPlotObj.legend.show = false;
  revExpPlotObj.axes.xaxis.ticks = ['Revenue', 'Operating Expenses', 'Fixed Costs', 'Inventory Losses', 'Profit'];
  revExpPlotObj.axes.xaxis.tickOptions = { showGridline: false, showMark: false };

We finish by using color_theme to modify the grid and then we create our chart using the following code:

  revExpPlotObj = color_theme(revExpPlotObj,company_colors);

  var waterFall = $.jqplot ('purpleWaterFall', 'data/revenue_expenses.json', revExpPlotObj);

For our divisional revenue chart, we start by creating an array to hold our series objects. We also want to use the category renderer instead of the date renderer, so we need an array to hold our ticks. This can be implemented as follows:
```
  var divisionSeriesObj = [], divisionTicks = [];
```
Now, we create a function to pull our remote data. We start by looping through each division in the remoteData object as follows:
```
  var divisionDataPull = function(remoteData,options) {
    var data = [], i = 0;
    for (var division in remoteData) {
```

Next, we loop through each array within the division object. We add that to our data array and add the date to our divisionTicks array as follows:

      if (remoteData.hasOwnProperty(division)) {
        data[i] = [];
        for(var x=0;x<remoteData[division].length;x++) {
          data[i].push(remoteData[division][x][1]);
          divisionTicks[x] = remoteData[division][x][0];
        }

Once we have our data and the ticks created, we then create the series object and add that to the divisionSeriesObj array. Once we have looped through all the divisions, we return the data array as follows:
```
        divisionSeriesObj.push( { 
          label: division, 
          color: division_colors[division][0] 
        } );
        i++;
      }
    }
    return data;
  };
```

Next, we create an object to hold our chart settings and pass in our new function, divisionDataPull. We set the ticks to use our new tick array and create the chart by passing in divisionPlotObj as shown in the following code snippet:

  var divisionPlotObj = defaultBarObj(divisionSeriesObj, $.jqplot.CategoryAxisRenderer, divisionDataPull);
  divisionPlotObj.stackSeries = true;
  divisionPlotObj.axes.xaxis.ticks = divisionTicks;
  divisionPlotObj = color_theme( divisionPlotObj, company_colors );

  var division_revenue = $.jqplot ('purpleDivisionRevenue', 'data/12_month_div_revenue.json', divisionPlotObj);

For our product returns chart found in 1168_10_06.html, we copy in the JavaScript without making any changes. With that out of the way, we move on to modifying the HTML for our charts. We wrap each chart div and h2 elements in a section tag as follows:

<section>
<h2>Monthly Revenue & Profit</h2>
<div id="purpleRevenueProfit" class="w500 h250"></div>
</section>
<section>
<h2>Expenses Against Revenue - Last 12 Months</h2>
<div id="purpleWaterFall" class="w400 h300"></div>
</section>
<section>
<h2>Monthly Revenue by Division</h2>
<div id="purpleDivisionRevenue" class="w400 h300"></div>
</section>
<section>
<h2>Last 12 Months of Product Returns</h2>
<div id="purpleProductReturns"></div>
</section>

With the HTML complete, we create a style rule in styles.css to float the section elements to the left and set their min-width to 48% as shown in the following code snippet:
```
section { 
  float: left; 
  min-width: 48%;
}
```

With all that complete, we load the new page in our browser. This dashboard is a culmination of the last few weeks of work. The first two charts appear side-by-side and the other two wrap to the next line. The charts showing company-wide data use the company color scheme we created. The chart showing divisional revenue uses the colors for each division:

Each chart is compact but easy to read. It meets the goal of being a dashboard, something that a person can digest at a glance.

We call Calvin and ask him to schedule a quick review with Roshan and Sara.

"That will take some time," Calvin says. "While I'm getting everyone together, you could start on the divisional dashboard. I've got the list of charts the vice-presidents want for it."

We hear Calvin moving papers around, "Here we are. They want a stacked bar chart showing product revenue. They also want the product returns chart broken out by region. Finally, they want a separate product revenue chart with a trend line. They also want a drop-down option to change the trend line for the selected product category."

We tell him we'll get started on it while he contacts Roshan and Sara.

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

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

Table of Contents for 11. Bringing it All Together

Create new playlist

Sign In

Sign Up

Chapter 11. Bringing it All Together

Combining four charts into a dashboard

Table of Contents for
11. Bringing it All Together