- 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> I'm an expert in data visualization and charting techniques, particularly when it comes to using Google Charts to present data effectively. My in-depth knowledge and hands-on experience in the field allow me to guide you through the various concepts and functionalities related to trendlines in Google Charts.
Overview: A trendline is a crucial element in charting, revealing the overall direction of data. Google Charts provides the capability to automatically generate trendlines for Scatter Charts, Bar Charts, Column Charts, and Line Charts.
Linear Trendlines:
Linear trendlines are the most common type, representing a straight line that closely approximates the data. They can be added using the trendlines option, specifying the data series.
Exponential Trendlines:
For data best explained by an exponential function, the type attribute is used to specify an exponential trendline. The example provided demonstrates this with the visibleInLegend attribute.
Polynomial Trendlines:
Polynomial trendlines, generated with type: 'polynomial' and a specified degree, should be used cautiously as they may lead to misleading results. The example includes a cubic trendline and showcases the impact of extending the horizontal axis.
Changing Color:
Trendlines are colored by default, but their color can be overridden using the color attribute. An example with an exponential trendline colored green is provided.
Changing Opacity and Line Width:
Opacity and line width of trendlines can be customized using the opacity and lineWidth options. The example demonstrates changing the transparency and width of an exponential trendline.
Making Points Visible:
Trendlines are constructed by stamping points on the chart. The visibility of these points can be controlled using the pointsVisible option. The example illustrates turning off point visibility for an exponential trendline.
Changing the Label:
The default label in the legend reveals the equation of the trendline. However, the labelInLegend option allows specifying a custom label for each trendline.
Correlations:
The coefficient of determination (R2) indicates how closely a trendline matches the data. The showR2 option is used to depict R2 in the legend, with a demonstration involving both linear and exponential trendlines.
In summary, these concepts provide a comprehensive understanding of utilizing trendlines in Google Charts, from basic linear trends to more complex exponential and polynomial trends, along with customization options for color, opacity, line width, and point visibility.
