Creating an area chart

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:

1. We remove the data arrays for revenue and the overall profit array. We also add data to the three arrays containing the divisional profits:

   <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',

2. Under 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' },

3. For our x axis, we set 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:

1. We move the Electronics series to be the first one in our data array:

   var div_profit = $.jqplot ('division_profit', [electronics, media, nerd_corral],

2. It's also hard to see where some of the lines go when they move underneath another layer. Thankfully, jqPlot has a 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: