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:
<script src="../js/jqplot.dateAxisRenderer.min.js"></script> <script> $(document).ready(function(){ var revenue = [['2011-11-20', 800538], ['2011-12-20', 804879], ['2012-01-20', 847732], ['2012-02-20', 795758], ['2012-03-20', 835554], ['2012-04-20', 844379], ['2012-05-20', 828510], ['2012-06-20', 753984], ['2012-07-20', 807403], ['2012-08-20', 755840], ['2012-09-20', 775304], ['2012-10-20', 781322]]; var profit = [['2011-11-20', 192049.56], ['2011-12-20', 188744.75], ['2012-01-20', 197352.54], ['2012-02-20', 190106.74], ['2012-03-20', 193453.07], ['2012-04-20', 197249.69], ['2012-05-20', 205480.18], ['2012-06-20', 177648.78], ['2012-07-20', 193793.82], ['2012-08-20', 183221.56], ['2012-09-20', 192797.31], ['2012-10-20', 182451.68]];
var rev_profit = $.jqplot ('revenueProfitChart', [revenue, profit], {
title:'Monthly Revenue & Profit', axes:{ xaxis:{ renderer:$.jqplot.DateAxisRenderer, label: 'Months' }, yaxis:{ label: 'Totals Dollars', tickOptions: { formatString: "$%'d" } } } }); }); </script> <div id="revenueProfitChart" style="width:600px;"></div>
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.
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.
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'} ],
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.
18.189.188.121