We grab the quarterly report with the divisional profits we created this morning. We will extend the data to a year and plot the divisional profits as an area chart:
<script src="../js/jqplot.dateAxisRenderer.min.js"></script> <script> $(document).ready(function(){ var electronics = [["2011-11-20", 123487.87], ...]; var media = [["2011-11-20", 66449.15], ...]; var nerd_corral = [["2011-11-20", 2112.55], ...]; var div_profit = $.jqplot ('division_profit', [media, nerd_corral, electronics], { title:'12 Month Divisional Profits',
seriesDefaults
, we assign true to fill
and fillToZero
. Without setting fillToZero
to true
, the fill would continue to the bottom of the chart. With the option set, the fill will extend downward to zero on the y axis for positive values and stop. For negative data points, the fill will extend upward to zero: seriesDefaults: { fill: true, fillToZero: true },
series:[ { label: 'Media & Software' }, { label: 'Nerd Corral' }, { label: 'Electronics' } ],
legend: { show: true, placement: 'outsideGrid' },
numberTicks
to 6
. The rest of our options we leave unchanged:axes:{ xaxis:{ label: 'Months', renderer:$.jqplot.DateAxisRenderer, numberTicks: 6, tickOptions: { formatString: "%B" } }, yaxis: { label: 'Total Dollars', tickOptions: { formatString: "$%'d" } } } }); }); </script> <div id="division_profit" style="width:600px;"></div>
We review the results of our changes in our browser. These can be seen in the following screenshot:
We notice something is wrong: only the Electronics series, shown in brown, is showing. This goes back to how area charts are built. Revisiting our wall analogy, we have built a taller wall in front of our other two walls. We need to order our data series from largest to smallest:
var div_profit = $.jqplot ('division_profit', [electronics, media, nerd_corral],
fillAlpha
option. We pass in a percentage in the form of a decimal and jqPlot will change the opacity of our fill area:...
seriesDefaults: {
fill: true,
fillToZero: true,
fillAlpha: .6
},
...
We reload our chart in our web browser and can see the updated changes in the following screenshot:
18.118.93.175