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:
label
object to our empty object for the first data series. For the second series, we add the label
option alongside the existing yaxis
option.title:'Monthly Revenue & Profit', series:[ { label: 'Revenue' }, { label: 'Profit', yaxis:'y2axis' } ],
legend
option. In order for the legend to appear, we must set the show
option to true
. We also set placement to outsideGrid
. The other two options available to us are insideGrid
and outside
. The outsideGrid
option will place the legend outside the grid, but inside the plot object. Hence, the grid will be resized to accommodate the legend:legend: { show: true, placement: 'outsideGrid' },
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.
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.
<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],
{
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 } },
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' } },
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' } } ],
axesDefaults
. We set the default formatString
for currency, but this will cause problems for our x axis:axesDefaults: { tickOptions: { formatString: "$%'d" } },
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>
<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.
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.
18.227.134.154