# Trendlines

1. [Overview](https://developers.google.com/chart/interactive/docs/gallery/trendlines#Overview)
2. [Linear trendlines](https://developers.google.com/chart/interactive/docs/gallery/trendlines#Example1)
3. [Exponential trendlines](https://developers.google.com/chart/interactive/docs/gallery/trendlines#Example2)
4. [Polynomial trendlines](https://developers.google.com/chart/interactive/docs/gallery/trendlines#polynomial)
5. [Changing the color](https://developers.google.com/chart/interactive/docs/gallery/trendlines#Example3)
6. [Changing the opacity and line width](https://developers.google.com/chart/interactive/docs/gallery/trendlines#Example4)
7. [Making points visible](https://developers.google.com/chart/interactive/docs/gallery/trendlines#PointsVisible)
8. [Changing the label](https://developers.google.com/chart/interactive/docs/gallery/trendlines#Example5)
9. [Correlations](https://developers.google.com/chart/interactive/docs/gallery/trendlines#r2)

## 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 *e^ax+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

```javascript
  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
<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

```javascript
  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

```javascript
<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

```javascript
        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
<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](http://en.wikipedia.org/wiki/Coefficient_of_determination), called R^2^ 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 R^2^ in the legend of your chart by
setting the `showR2` option to `true`.
\<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"\>\</script\> \<div id="chartLinear" style="height: 350px; width: 800px"\>\</div\> \<div id="chartExponential" style="height: 350px; width: 800px"\>\</div\> 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); }

```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 = {
          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>
```