Calvin, our boss, stops by our office and informs us that all the regional managers will be coming to the corporate offices for a quarterly meeting on Friday. Since it is Monday, we should be able to meet this goal. He wants us to create a few pages for our intranet, showing things such as profit, revenue, and expenses.

"We've got to impress them," he says as he leaves. We stare at each other, simply bewildered. You mention that we just became business analysts as well as developers.

We start to work in our newfound roles. You begin to find the data that will be required. Since we are creating prototypes, we need to manually compile the data for now.

I start researching web-based charting tools and come across three main contenders: Highcharts, D3.js, and jqPlot. We will have to pay a licensing fee to use Highcharts for our company. D3.js has a beautiful gallery of available charts, and it looks like it has a very high learning curve. It appears that jqPlot has a lower learning curve and we will be building charts faster with jqPlot than with D3.js. The other benefit of jqPlot is that it does not require a commercial license.

Download the current version of jqPlot and extract the files to your web server. We'll create the most basic chart we can, as shown in the following steps:

$("#firstChart").jqplot ([[1,9,4,3,8,5]]);

jqPlot will interpret each number as a point on the y axis, and it will assign a value for the x axis, starting with 1. We can see the result of our effort in the following screenshot:

The next option to pass in data to the chart is to use a two-dimensional array. Our inner array contains individual arrays, which in turn contain the value for x axis followed by the value for y axis. When we include both x and y values, our data points may not increment at a constant interval, as was the case in our previous chart:

   <script>
   $(document).ready(function(){
     var secondPlot = $.jqplot ('secondChart', [[[5,4],[10,7],[15,6],[20,9]]]);
   });
   </script>
   <div id="secondChart" style="width:400px;"></div>

We load this new chart in our web browser, and the results are as shown in the following figure:

As we finish our first experiment, you mention that you've found the revenue numbers for the last 7 days. We decide that it will be best if we can show the dates on the x axis and not use arbitrary numbers.

We will need to make use of one of the renderers available in jqPlot. A renderer extends the basic functionality of jqPlot. Some renderers take the data and render it in different chart types. Other renderers format text in different ways. For our next chart, we will use dateAxisRenderer, which will take our human-readable dates and convert them into values for jqPlot to render:

With our new chart complete, we load the page in our browser and see the result in the following figure:

This is a nice start, but we both agree that the leadership is going to want more than just a couple of days of revenue on a chart. Our next chart will display the profit and revenue numbers for the last 12 months. We will only need to make a few adjustments to our previous chart:

We load the page in the browser and smile. The changes to the chart get us closer to what the management is looking for. We can see the results of our efforts in the following figure.

Adding multiple y axes

The two data series are really far apart in their values. It's hard to decipher the value of each point by just looking at the chart. We'll put each series on its own y axis. This will make it easier to see interactions between our revenue and profit. We revisit the code and begin to alter it to separate the y axes.

1. We start by adding the series option. It is an array containing an object for each data series. For the first series, we can leave the default settings in place. So, we simply pass in an empty object. The second series will be on the second y axis, which means that we enter y2axis for the yaxis option. The ticks and label for this axis will appear on the right-hand side of our chart:

     var rev_profit = $.jqplot ('revenueProfitChart', [revenue, profit],
     {
       title:'Monthly Revenue & Profit',
       series:[
         {},
         {yaxis:'y2axis'}
       ],
   

2. We change the label for yaxis to Revenue. We copy all these options for y2axis. We then change the axis option and the label:

       axes:{
         xaxis:{
           renderer:$.jqplot.DateAxisRenderer,
           label: 'Months'
         },
         yaxis:{
           label: 'Revenue',
           tickOptions: { formatString: "$%'d" } 
         },
         y2axis:{
           label: 'Profit',
           tickOptions: { formatString: "$%'d" } 
         }
       }
     });

We load this new chart in our browser. The fruit of our labors can be seen in the following figure:

We begin to study the chart. It appears that profit as a part of revenue is better in some months when compared to other months, but we can't draw any clear conclusions from this chart. However, this can be a springboard to try to track down some correlations.

As we study the chart, we lose track of which line represents revenue and which represents profit. We'll need a legend to solve this problem:

We finish the updates to our new chart and open our web browser again. We now have a legend that will help us decipher our chart, which can be seen in the following figure:

We finally have a nice report. We call Calvin and ask him to come by and take a look at what we've got so far. We also need some direction on how to proceed. A few minutes later, he swings by our office.

"This is great," he says, "but we're going to need to expand on some of this data. How about we get a report that has last quarter's revenue and break out the profit by each division? Also, can you change the styles on those lines? Add a little flair or something." Calvin walks out and we stare at each other, trying to figure out how to add some "flair" to our report.

Adding line and marker options

We'll keep the first two data series as they are and put all the divisional data on y3axis. You mention that we can use different marker styles to set off the different divisions. We will turn off the line for the revenue and overall profit data series and just show the markers. As for the divisional series, we've got seven different styles to use for our markers, which are the following:

• circle and filledCircle
• diamond and filledDiamond
• square and filledSquare
• x

This works out well because we've got three major divisions in our data. You find the profit numbers that we will need, and we set to work updating our chart.

1. We start by including the profit numbers for each division. We also pass the following three data series arrays in to jqPlot:

   <script src="../js/jqplot.dateAxisRenderer.min.js"></script>
   <script>
   $(document).ready(function(){
   
     var revenue = [['2012-07-20', 807403], ['2012-08-20', 755840], ['2012-09-20', 775304]];
     var profit = [['2012-07-20', 193793.82], ['2012-08-20', 183221.56], ['2012-09-20', 192797.31]];
     var electronics = [['2012-07-20', 116276.29], ['2012-08-20', 95867.97], ['2012-09-20', 120591.27]];
     var media = [['2012-07-20', 27596.25], ['2012-08-20', 32396.47], ['2012-09-20', 26709.06]];
     var nerd_corral = [['2012-07-20', 49921.28], ['2012-08-20', 54957.12], ['2012-09-20', 45496.98]];
   
     var rev_profit = $.jqplot ('division_profit', [revenue, profit, electronics, media, nerd_corral],
     {

2. Now that we have five series across three different axes, we will make use of the seriesDefaults option. By setting yaxis to y3axis, every data series will appear on this axis unless we override this option on the individual series. We also set the style option to filledCircle:

         title:'Q3 Revenue, Profit & Divisional Profits',
         seriesDefaults: {
           yaxis:'y3axis',
           markerOptions: {
             style: 'filledCircle',
             size: 10
           }
         },

3. Next, we create the series objects for revenue and profit. We set the showLine option to false along with style for markerOptions. Since we set the default axis in seriesDefaults, we also need to override this option:

         series:[
           {    
             label: 'Revenue',
             yaxis:'yaxis',
             showLine: false,
             markerOptions: { style: 'x' }
           },
           {
             label: 'Profit', 
             yaxis:'y2axis',
             showLine: false,
             markerOptions: { style: 'diamond' }
           },

4. For the Electronics division data series, we use the defaults. For the two remaining series, we set the style option to different values:

           { label: 'Electronics' },
           {
             label: 'Media & Software', 
             markerOptions: { style: 'filledSquare' }
           },
           {
             label: 'Nerd Corral',
             markerOptions: { style: 'filledDiamond' }
           }
         ],

5. Our next step is to set the default options under axesDefaults. We set the default formatString for currency, but this will cause problems for our x axis:

         axesDefaults: {
           tickOptions: { formatString: "$%'d" }
         },

6. Since we use the date renderer, we set the formatString option of the x axis to %B, which will output the full month name as the tick. jqPlot automatically calculates how many ticks it thinks we need for our axes. However, jqPlot sometimes creates more than we need. Since this chart deals with quarterly data, we set numberTicks to 3:

         axes:{
           xaxis:{
             label: 'Months',
             renderer:$.jqplot.DateAxisRenderer,
             numberTicks: 3,
             tickOptions: { formatString: "%B" }
           },
           yaxis: { label: 'Revenue' },
           y2axis: { label: 'Profit' }
         }
     }); 
   });
   </script>

7. With the added axis for our chart, we need to increase the width of our div.

   <div id="division_profit" style="width:650px;"></div>

It was hard keeping track of all these options. We open our web browser, hoping we did everything correctly. We can see the result in the following figure. All the axes have different values. The lines for revenue and profit are missing, just as we wanted, and each data series has a different marker.

Everything worked as we intended, but the chart is hard to read. With the different axes, data points are overlapping. As we continue our research, we might find a better way to represent the same data.

Tip

Since our data points are in the middle of the month, jqPlot will add a month to the end of the x axis to keep everything in bounds. If we only want the three months on the graph, we can change the dates to the first of the month.

Calvin stops by later and loves what we have. "This is a great first step. We will need some charts that pull in data from other sources, especially our social media accounts. We will also need to start showing trend lines."

Calvin walks out again without warning, leaving us to stare at each other. We decide we've done what we can for the morning, so we head off to lunch, preparing ourselves to tackle social media and trend lines upon our return.

We started the chapter by taking a refresher course on the parts of a chart. Next, we learned the advantages of jqPlot and created our first chart with just a few lines of code. Later, we looked at the different ways to pass in data to jqPlot. We made use of DateAxisRenderer to use dates on the x axis of our charts.

We learned about options such as y2axis, which allowed us to plot our lines on different y axes. We also made use of the legend and markerOptions options to make it easier to discern which line goes with which data series.

In the next chapter, we will look at pulling data from remote sources. We will also create area charts and scatterplots. Along with all of this, we will look at how trend lines work and how to create them.