Trendlines

  1. Overview
  2. Linear trendlines
  3. Exponential trendlines
  4. Polynomial trendlines
  5. Changing the color
  6. Changing the opacity and line width
  7. Making points visible
  8. Changing the label
  9. Correlations

Overview

A trendline is a line superimposed on a chart revealing the overall direction of the data. Google Charts can automatically generate trendlines for Scatter Charts, Bar Charts, Column Charts, and Line Charts.

Google Charts supports three types of trendlines: linear, polynomial, and exponential.

Linear trendlines

A linear trendline is the straight line that most closely approximates the data in the chart. (To be precise, it's the line that minimizes the sum of squared distances from every point to it.)

In the chart below, you can see a linear trendline on a scatter chart comparing the age of sugar maples to the diameter of their trunks. You can hover over the trendline to see the equation calculated by Google Charts: 4.885 times the diameter + 0.730.

To draw a trendline on a chart, use the trendlines option and specify which data series to use: 

google.charts.setOnLoadCallback(drawChart);
function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Diameter', 'Age'],
    [8, 37], [4, 19.5], [11, 52], [4, 22], [3, 16.5], [6.5, 32.8], [14, 72]]);

  var options = {
    title: 'Age of sugar maples vs. trunk diameter, in inches',
    hAxis: {title: 'Diameter'},
    vAxis: {title: 'Age'},
    legend: 'none',
    trendlines: { 0: {} }    // Draw a trendline for data series 0.
  };

  var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

Linear trendlines are the most common type of trendline. But sometimes a curve is best for describing data, and for that, we'll need another type of trendline.

Exponential trendlines

If your data is best explained by an exponential of the form eax+b, you can use the type attribute to specify an exponential trendline, as shown below:

Note: Unlike linear trendlines, there are several different ways to compute exponential trendlines. We provide only one method right now, but will support more in the future, and so it's possible that the name or behavior of the current exponential trendline will change.

For this chart, we also use visibleInLegend: true to display the exponential curve in the legend.

google.charts.setOnLoadCallback(drawChart);
function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Generation', 'Descendants'],
    [0, 1], [1, 33], [2, 269], [3, 2013]
 ]);

  var options = {
    title: 'Descendants by Generation',
    hAxis: {title: 'Generation', minValue: 0, maxValue: 3},
    vAxis: {title: 'Descendants', minValue: 0, maxValue: 2100},
    trendlines: {
      0: {
        type: 'exponential',
        visibleInLegend: true,
      }
    }
  };

  var chart = new google.visualization.ScatterChart(document.getElementById('chart_div2'));
  chart.draw(data, options);
}

Changing the color

By default, trendlines are colored the same as the data series, but lighter. You can override that with the color attribute. Here, we chart how many digits of π have been calculated by year during a computationally fruitful period, coloring the exponential trendline green.

Here's the trendlines spec:

    trendlines: {
      0: {
        type: 'exponential',
        color: 'green',
      }
    }

Polynomial trendlines

To generate a polynomial trendline, specify type polynomial and a degree. Use with caution, since they can sometimes lead to misleading results. In the example below, where a roughly linear dataset is plotted with a cubic (degree 3) trendline:

Note that the plummet after the last data point is only visible because we artificially extended the horizontal axis to 15. Without setting hAxis.maxValue to 15, it would have looked like this:

Same data, same polynomial, different window on the data.

Options
  var options = {
    title: 'Age vs. Weight comparison',
    legend: 'none',
    crosshair: { trigger: "both", orientation: "both" },
    trendlines: {
      0: {
        type: 'polynomial',
        degree: 3,
        visibleInLegend: true,
      }
    }
  };
Full HTML
<html>
 <head>
   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   <script type="text/javascript">
     google.charts.load("current", {packages:["corechart"]});
     google.charts.setOnLoadCallback(drawChart);
     function drawChart() {
       var data = google.visualization.arrayToDataTable([
         ['Age', 'Weight'],
         [ 8,      12],
         [ 4,      5.5],
         [ 11,     14],
         [ 4,      5],
         [ 3,      3.5],
         [ 6.5,    7]
       ]);

       var options = {
         title: 'Age vs. Weight comparison',
         legend: 'none',
         crosshair: { trigger: 'both', orientation: 'both' },
         trendlines: {
           0: {
             type: 'polynomial',
             degree: 3,
             visibleInLegend: true,
           }
         }
       };

       var chart = new google.visualization.ScatterChart(document.getElementById('polynomial2_div'));
       chart.draw(data, options);
     }
   </script>
 </head>
 <body>
  <div id='polynomial2_div' style='width: 900px; height: 500px;'></div>
 </body>
</html>

Changing the opacity and line width

You can change the transparency of the trendline by setting opacity to a value between 0.0 and 1.0, and the line width by setting the lineWidth option.

    trendlines: {
      0: {
        color: 'purple',
        lineWidth: 10,
        opacity: 0.2,
        type: 'exponential'
      }
    }

The lineWidth option will be enough for most uses, but if you like the look there's a pointSize option that can be used to customize the size of the selectable dots inside the trendline:

Just like light is both a wave and a particle, a trendline is both a line and a bunch of points. What users see depend on how they interact with it: normally a line, but when they hover over the trendline, a particular point will be highlighted. That point will be have a diameter equal to:

  • the trendline pointSize if defined, else...
  • the global pointSize if defined, else...
  • 7

However, if you set the either the global or the trendline pointSize option, all of the selectable points will be shown, independent of the trendline's lineWidth.

Options
  var options = {
    legend: 'none',
    hAxis: { ticks: [] },
    vAxis: { ticks: [] },
    pointShape: 'diamond',
    trendlines: {
      0: {
        type: 'polynomial',
        degree: 3,
        visibleInLegend: true,
        pointSize: 20, // Set the size of the trendline dots.
	opacity: 0.1
      }
    }
  };
Full HTML
<html>
  <head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load("current", {packages:["corechart"]});
    google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['X', 'Y'],
          [0, 4],
          [1, 2],
          [2, 4],
          [3, 6],
          [4, 4]
        ]);

        var options = {
          legend: 'none',
          hAxis: { ticks: [] },
          vAxis: { ticks: [] },
          colors: ['#703583'],
          pointShape: 'diamond',
          trendlines: {
            0: {
              type: 'polynomial',
              degree: 3,
              visibleInLegend: true,
              pointSize: 20, // Set the size of the trendline dots.
              opacity: 0.1
            }
          }
      };

      var chart = new google.visualization.ScatterChart(document.getElementById('chart_pointSize'));

      chart.draw(data, options);
    }
    </script>
  </head>
  <body>
    <div id="chart_pointSize" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Making points visible

Trendlines are constucted by stamping a bunch of dots on the chart. The trendline's pointsVisible option determines whether the points for a particular trendline are visible. The default option for all trendlines is true, but if you wanted to turn off point visibility for your first trendline, set trendlines.0.pointsVisible: false.

The chart below demonstrates controlling the visibility of points on a per-trendline basis.

Options
        var options = {
          height: 500,
          legend: 'none',
          colors: ['#9575cd', '#33ac71'],
          pointShape: 'diamond',
          trendlines: {
            0: {
              type: 'exponential',
              pointSize: 20,
              opacity: 0.6,
              pointsVisible: false
            },
            1: {
              type: 'linear',
              pointSize: 10,
              pointsVisible: true
            }
          }
        };
Full HTML
<html>
  <head>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {packages:['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['X', 'Y', 'Z'],
          [0, 4, 5],
          [1, 2, 6],
          [2, 4, 8],
          [3, 6, 10],
          [4, 4, 11],
          [5, 8, 13],
          [6, 12, 15],
          [7, 15, 19],
          [8, 25, 21],
          [9, 34, 23],
          [10, 50, 27]
        ]);

        var options = {
          height: 500,
          legend: 'none',
          colors: ['#9575cd', '#33ac71'],
          pointShape: 'diamond',
          trendlines: {
            0: {
              type: 'exponential',
              pointSize: 20,
              opacity: 0.6,
              pointsVisible: false
            },
            1: {
              type: 'linear',
              pointSize: 10,
              pointsVisible: true
            }
          }
        };

        var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div"></div>
  </body>
</html>

Changing the label

By default, if you select visibleInLegend, the label reveals the equation of the trendline. You can use labelInLegend to specify a different label. Here, we display a trendline for each of two series, setting the labels in the legend to "Bug line" (for series 0) and "Test line" (series 1).

    trendlines: {
      0: {
        labelInLegend: 'Bug line',
        visibleInLegend: true,
      },
      1: {
        labelInLegend: 'Test line',
        visibleInLegend: true,
      }
    }

Correlations

The coefficient of determination, called R2 in statistics, identifies how closely a trendline matches the data. A perfect correlation is 1.0, and a perfect anticorrelation is 0.0.

You can depict R2 in the legend of your chart by setting the showR2 option to true.

 
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Age', 'Weight'],
          [ 8,      12],
          [ 4,      5.5],
          [ 11,     14],
          [ 4,      5],
          [ 3,      3.5],
          [ 6.5,    7]
        ]);

        var options = {
          hAxis: {minValue: 0, maxValue: 15},
          vAxis: {minValue: 0, maxValue: 15},
          chartArea: {width:'50%'},
          trendlines: {
            0: {
              type: 'linear',
              showR2: true,
              visibleInLegend: true
            }
          }
        };

        var chartLinear = new google.visualization.ScatterChart(document.getElementById('chartLinear'));
        chartLinear.draw(data, options);

        options.trendlines[0].type = 'exponential';
        options.colors = ['#6F9654'];

        var chartExponential = new google.visualization.ScatterChart(document.getElementById('chartExponential'));
        chartExponential.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chartLinear" style="height: 350px; width: 800px"></div>
    <div id="chartExponential" style="height: 350px; width: 800px"></div>
  </body>
</html>