Creating a stacked area chart with revenue

Calvin stops by while we're taking a break. "Hey guys, I had a VP call and they want to see revenue broken down by division. Can we do that?" We tell him we can. "Great" he says, before turning away and leaving. We discuss this new request and realize this would be a great chance to use a stacked area chart.

We dig around and find the divisional revenue numbers Calvin wanted. We can reuse the chart we just created and just change out the data and some options.

1. We use the same variable names for our divisional data and plug in revenue numbers instead of profit. We use a new variable name for our chart object and a new id attribute for our div. We update our title and add the stackSeries option and set it to true:

     var div_revenue = $.jqplot ('division_revenue', [electronics, media, nerd_corral],
     {
       title:'12 Month Divisional Revenue',
       stackSeries: true,
   

2. We leave our series' options alone and the only option we change on our x axis is set numberTicks back to 3:

       seriesDefaults: { fill: true, fillToZero: true },
       series:[ { label: 'Electronics' }, { label: 'Media & Software' }, { label: 'Nerd Corral' } ], 
       legend: { show: true, placement: 'outsideGrid' },
       axes:{
         xaxis:{
           label: 'Months',
           renderer:$.jqplot.DateAxisRenderer,
           numberTicks: 3,
           tickOptions: { formatString: "%B" }
         },

3. We finish our changes by updating the ID of our div container:

         yaxis: { 
           label: 'Total Dollars',
           tickOptions: { formatString: "$%'d" } 
         }
       }
     });
   });
   </script>
   <div id="division_revenue" style="width:600px;"></div>

With our changes complete, we load this new chart in our browser. As we can see in the following screenshot, we have a chart with each of the data series stacked on top of each other. Because of the nature of a stacked chart, the individual data points are no longer decipherable; however, with the visualization, this is less of an issue.

We decide that this is a good place to stop for the day. We'll start on scatterplots and trend lines tomorrow morning. As we begin gathering our things, Calvin stops by on his way out and we show him our recent work. "This is amazing. You guys are making great progress." We tell him we're going to move on to trend lines tomorrow.

"Oh, good," Calvin says. "I've had requests to show trending data for our revenue and profit. Someone else mentioned they would love to see trending data of shares on Twitter for our daily deals site. But, like you said, that can wait till tomorrow. Come on, I'll walk with you two."