Descripción general
Una
Google Charts admite tres tipos de líneas de tendencia: lineal, polinómica y exponencial.
Líneas de tendencia lineales
Una línea de tendencia
En el siguiente gráfico, puedes ver una línea de tendencia lineal en un gráfico de dispersión que compara la edad de los arces de azúcar con el diámetro de sus troncos. Puedes colocar el cursor sobre la línea de tendencia para ver la ecuación que calcula Gráficos de Google: 4.885 veces el diámetro + 0.730.
Para dibujar una línea de tendencia en un gráfico, usa la opción trendlines y especifica qué serie de datos usar:
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);
}
Las líneas de tendencia lineales son el tipo de línea de tendencia más común. Sin embargo, a veces, una curva es la mejor para describir datos y, para eso, necesitaremos otro tipo de línea de tendencia.
Líneas de tendencia exponenciales
Si la mejor manera de explicar tus datos es con una exponencial con la forma eax+b, puedes usar el atributo type para especificar una línea de tendencia
Nota: A diferencia de las líneas de tendencia lineales, existen varias formas de calcular líneas de tendencia exponenciales. Por el momento, solo proporcionamos un método, pero admitiremos más en el futuro, por lo que es posible que cambie el nombre o el comportamiento de la línea de tendencia exponencial actual.
En este gráfico, también usamos visibleInLegend: true para mostrar la curva exponencial en la leyenda.
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);
}
Cómo cambiar el color
De forma predeterminada, las líneas de tendencia tienen el mismo color que las series de datos, pero más claros. Puedes anular eso con el atributo color.
Aquí, graficamos cuántos dígitos de π se calcularon por año durante un período fructífero desde el punto de vista informático, pintando la línea de tendencia exponencial de color verde.
A continuación, se muestran las especificaciones de las líneas de tendencia:
trendlines: {
0: {
type: 'exponential',
color: 'green',
}
}
Líneas de tendencia polinómicas
Para generar una línea de tendencia polinómica, especifica el tipo polynomial y una degree. Úsalas con precaución, ya que a veces pueden generar resultados engañosos. En el siguiente ejemplo, en el que se traza un conjunto de datos casi lineal con una línea de tendencia cúbica (grado 3):
Observa que la plomada después del último dato solo es visible porque extendimos artificialmente el eje horizontal a 15. Sin establecer hAxis.maxValue en 15, se habría visto de la siguiente manera:
Mismos datos, mismo polinomio, diferente ventana en los datos.
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>
Cómo cambiar la opacidad y el ancho de línea
Puedes cambiar la transparencia de la línea de tendencia si configuras opacity en un valor entre 0.0 y 1.0, y el ancho de línea si configuras la opción lineWidth.
trendlines: {
0: {
color: 'purple',
lineWidth: 10,
opacity: 0.2,
type: 'exponential'
}
}
La opción lineWidth será suficiente para la mayoría de los usos, pero si te gusta el aspecto, puedes usar la opción pointSize para personalizar el tamaño de los puntos seleccionables dentro de la línea de tendencia:
Al igual que la luz es una ola y una partícula, una línea de tendencia es tanto una línea como un montón de puntos. Lo que ven los usuarios depende de cómo interactúan con ella: por lo general, una línea, pero cuando se desplazan sobre ella, se destaca un punto en particular. Ese punto tendrá un diámetro igual a:
- la línea de tendencia
pointSizesi está definida; de lo contrario... - el
pointSizeglobal si está definido, else... - 7
Sin embargo, si configuras la opción pointSize global o de línea de tendencia, se mostrarán todos los puntos seleccionables, independientemente del lineWidth de la línea de tendencia.
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>
Cómo hacer visibles los puntos
Las líneas de tendencia se crean sellando varios puntos en el gráfico. La opción pointsVisible de la línea de tendencia determina si son visibles los puntos de una línea de tendencia en particular. La opción predeterminada para todas las líneas de tendencia es true, pero si deseas desactivar la visibilidad de los puntos para tu primera línea de tendencia, configura trendlines.0.pointsVisible: false.
En el siguiente gráfico, se muestra cómo controlar la visibilidad de los puntos por línea de tendencia.
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>
Cómo cambiar la etiqueta
De forma predeterminada, si seleccionas visibleInLegend, la etiqueta revela la ecuación de la línea de tendencia. Puedes usar labelInLegend para especificar una etiqueta diferente. Aquí mostramos una línea de tendencia para cada una de las dos series y configuramos las etiquetas de la leyenda como "Línea de error" (para la serie 0) y "Línea de prueba" (serie 1).
trendlines: {
0: {
labelInLegend: 'Bug line',
visibleInLegend: true,
},
1: {
labelInLegend: 'Test line',
visibleInLegend: true,
}
}
Correlaciones
El coeficiente de determinación, llamado R2 en las estadísticas, identifica en qué medida una línea de tendencia coincide con los datos. Una correlación perfecta es 1.0 y una anticorrelación perfecta es 0.0.
Puedes representar R2 en la leyenda de tu gráfico si configuras la opción showR2 como 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>