Overview
A
Google Charts supports three types of trendlines: linear, polynomial, and exponential.
Linear trendlines
A
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
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.
var options = {
title: 'Age vs. Weight comparison',
legend: 'none',
crosshair: { trigger: "both", orientation: "both" },
trendlines: {
0: {
type: 'polynomial',
degree: 3,
visibleInLegend: 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 = {
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
pointSizeif defined, else... - the global
pointSizeif 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.
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
}
}
};
<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.
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
}
}
};
<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>