Adding trend lines

We decide to use the profit and revenue chart with two y axes we created yesterday:

1. We begin our updates by including the trend line plugin. We leave the data arrays as they are:

   <script src="../js/jqplot.dateAxisRenderer.min.js"></script>
   <script src="../js/jqplot.trendline.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]];

2. We can set the trendline option in seriesDefaults or individually within the series object. If we set the trend line option in seriesDefaults, jqPlot would generate a trend line for each data series. We just want a trend line for our revenue line, so we add the trendline option to our revenue series:

       series:[
         {
           label: 'Revenue',
           trendline: {
   

3. By default, the show option for trend lines is set to false, which means we have to explicitly set it to true. There are quite a few options for trend lines but we'll focus on a couple we're most likely to use. We assign #666 to color because the color of our trend line will default to the color of the series line. We add a label so we know which data series it is connected with. We also want the width of our line to be a bit more substantial so we set lineWidth to 4:

    show: true,
    color: '#666',
    label: 'Trend of Revenue',
    lineWidth: 4, 
    }
         },
         { label: 'Profit', yaxis: 'y2axis' }
       ], 

4. The only change to our x axis is with the value of numberTicks to 4:

       legend: { show: true, placement: 'outsideGrid' },
       axes:{
         xaxis:{
           renderer:$.jqplot.DateAxisRenderer,
           label: 'Months',
    numberTicks: 4
         },

5. The rest of the chart remains the same:

         yaxis:{
           label: 'Totals Dollars',
           tickOptions: {
             formatString: "$%'d"
           } 
         },
         y2axis:{
           label: 'Totals Dollars',
           tickOptions: {
             formatString: "$%'d"
           } 
         }
       }
     });
   });
   </script>
   <div id="revenueProfitChart" style="width:750px;"></div>

When we load the page in our browser, we see the following chart:

Initially, it would appear that revenue over the past year has been decreasing. With so few data points, it would be unwise to draw any conclusions based on our trend line.

Increasing the number of data points

We dig up revenue data that goes back to 2010. This provides us with more data points and a more accurate picture of revenue. We can reuse the chart we just created and remove the profit data series so we only have revenue on the chart.

1. We start by removing the profit data array:

   <script src="../js/jqplot.dateAxisRenderer.min.js"></script>
   <script src="../js/jqplot.trendline.min.js"></script>
   <script>
   $(document).ready(function(){
   
     var revenue = [['2010-11-20', 580538], ['2010-12-20', 604879], ['2011-01-20', 647732], ['2011-02-20', 695758], ['2011-03-20', 735554], ['2011-04-20', 744379], ['2011-05-20', 728510], ['2011-06-20', 653984], ['2011-07-20', 707403], ['2011-08-20', 655840], ['2011-09-20', 675304], ['2011-10-20', 681322],['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]];

2. We change the object variable and the id attribute. We also remove the profit data array from the parameters:

     var rev_chart = $.jqplot ('revenueChart', [revenue],
     {

3. We update the title and remove the series object for the profit line:

       title:'Monthly Revenue',
       series:[
         {
           label: 'Revenue',
           trendline: {
             show: true,         
             color: '#666666', 
             lineWidth: 4,    
           }
         }
       ], 

4. With more data, our x axis has become crowded, so we set numberTicks to 6:

       axes:{
         xaxis:{
           renderer:$.jqplot.DateAxisRenderer,
           label: 'Months',
    numberTicks: 6
         },
         yaxis:{
           label: 'Totals Dollars',
           tickOptions: { formatString: "$%'d" } 
         }
       }
     });
   });
   </script>

5. We complete our changes by changing the ID of our div and decreasing the width:

   <div id="revenueChart" style="width:600px;"></div>

After making our changes, we load the new chart in our browser. We can see the results of our work appear in the following screenshot:

We can see that revenue has shown an upward trend over the past two years. This is a good time to remind ourselves that data can be manipulated to say almost anything we want. That's why there are so many different chart types. Some data sets may lead to incorrect conclusions based on how they are rendered. Also, charts are merely a representation of the data. There are many underlying issues that cannot be expressed in charts, with the potential to skew visualizations.