- Overview
- Linear trendlines
- Exponential trendlines
- Polynomial trendlines
- Changing the color
- Changing the opacity and line width
- Making points visible
- Changing the label
- Correlations
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 scatterchart comparing the age of sugar maples to the diameter of theirtrunks. You can hover over the trendline to see the equationcalculated by Google Charts: 4.885 times the diameter + 0.730.
To draw a trendline on a chart, use the trendlinesoption 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. Butsometimes a curve is best for describing data, and for that, we'llneed another type of trendline.
Exponential trendlines
If your data is best explained by an exponential of theform eax+b, you can use the typeattribute to specify an
Note: Unlike linear trendlines, there are several differentways to compute exponential trendlines. We provide only one methodright now, but will support more in the future, and so it's possiblethat the name or behavior of the current exponential trendline willchange.
For this chart, we also use visibleInLegend: true todisplay 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, butlighter. You can override that with the color attribute.Here, we chart how many digits of π have been calculated by yearduring a computationally fruitful period, coloring the exponentialtrendline green.
Here's the trendlines spec:
trendlines: { 0: { type: 'exponential', color: 'green', } }Polynomial trendlines
To generate a polynomial trendline, specifytype polynomial and a degree. Use withcaution, since they can sometimes lead to misleading results. Inthe example below, where a roughly linear dataset is plotted with acubic (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 bysetting opacity to a value between 0.0 and 1.0, and theline 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, butif you like the look there's a pointSize option that canbe 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 botha line and a bunch of points. What users see depend on how theyinteract with it: normally a line, but when they hover over thetrendline, a particular point will be highlighted. That point will behave a diameter equal to:
- the trendline
pointSizeif defined, else... - the global
pointSizeif defined, else... - 7
However, if you set the either the global or thetrendline pointSize option, all of the selectable pointswill be shown, independent of thetrendline'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 labelreveals the equation of the trendline. You canuse labelInLegend to specify a different label. Here, wedisplay a trendline for each of two series, setting the labels in thelegend 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 coefficientof determination, called R2 in statistics, identifieshow closely a trendline matches the data. A perfect correlation is1.0, and a perfect anticorrelation is 0.0.
You can depict R2 in the legend of your chart bysetting 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> 