Líneas de tendencia

Descripción general

Una línea de tendencia es una línea superpuesta en un gráfico que revela la dirección general de los datos. Los gráficos de Google pueden generar automáticamente líneas de tendencia para los gráficos de dispersión, los gráficos de barras, los gráficos de columnas y los gráficos de líneas.

Google Charts admite tres tipos de líneas de tendencia: lineales, polinómicas y exponenciales.

Líneas de tendencia lineales

Una línea de tendencia lineal es la línea recta que más se aproxima a los datos en el gráfico. (Para ser precisos, es la línea que minimiza la suma de las distancias al cuadrado de cada punto hacia él).

En el siguiente gráfico, puedes ver una línea de tendencia lineal en un gráfico de dispersión que compara la antigüedad de los arces de azúcar con el diámetro de los troncos. Puedes desplazarte sobre la línea de tendencia para ver la ecuación calculada por Google Charts: 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é series de datos se usarán:

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 más común. Sin embargo, a veces, una curva es la mejor para describir datos y, para eso, necesitamos otro tipo de línea de tendencia.

Líneas de tendencia exponenciales

Si tus datos se explican mejor con un exponente de la forma eax+b, puedes usar el atributo type para especificar una línea de tendencia exponencial, como se muestra a continuación:

Nota: A diferencia de las líneas de tendencia lineales, existen varias formas de calcular líneas de tendencia exponenciales. En este 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 la serie de datos, pero es más claro. Puedes anular esa opción 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, coloreando el color exponencial con verde.

Esta es la especificación 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 los tipos polynomial y degree. Úsalos con precaución, ya que a veces pueden generar resultados engañosos. En el siguiente ejemplo, en el que un conjunto de datos bastante lineal se traza con una línea de tendencia cúbica (grado 3):

Ten en cuenta que la parcela después del último dato solo es visible porque artificialmente extendimos el eje horizontal a 15. Si no se configurara hAxis.maxValue como 15, se vería así:

Los mismos datos, el mismo polinomio, una ventana diferente en los datos.

Opciones
  var options = {
    title: 'Age vs. Weight comparison',
    legend: 'none',
    crosshair: { trigger: "both", orientation: "both" },
    trendlines: {
      0: {
        type: 'polynomial',
        degree: 3,
        visibleInLegend: true,
      }
    }
  };
HTML completo
<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 la 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, hay una opción pointSize que se puede usar para personalizar el tamaño de los puntos seleccionables dentro de la línea de tendencia:

Al igual que la luz es tanto una onda como una partícula, una línea de tendencia es una línea y varios puntos. Lo que ven los usuarios depende de cómo interactúan con ella: normalmente una línea, pero cuando se desplazan sobre la línea de tendencia, se destaca un punto en particular. Ese punto tendrá un diámetro igual a:

  • la línea de tendencia pointSize, si está definida; de lo contrario...
  • el pointSize global si está definido; de lo contrario...
  • 7

Sin embargo, si configuras la opción global o la línea de tendencia pointSize, se mostrarán todos los puntos seleccionables, independientemente de la lineWidth de la línea de tendencia.

Opciones
  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 completo
<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 que los puntos sean visibles

Las líneas de tendencia están fabricadas con un sello de varios puntos en el gráfico. La opción pointsVisible de la línea de tendencia determina si los puntos de una línea de tendencia específica son visibles. La opción predeterminada para todas las líneas de tendencia es true, pero si quieres desactivar la visibilidad de puntos en la 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 según cada línea de tendencia.

Opciones
        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 completo
<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 errores" (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 el nivel de coincidencia de los datos con una línea de tendencia. Una correlación perfecta es de 1.0, y una anticorrelación perfecta es de 0.0.

Puedes representar a R2 en la leyenda del gráfico si configuras la opción showR2 en 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>