Linhas de tendência

Stay organized with collections Save and categorize content based on your preferences.

Visão geral

Uma linha de tendência é uma linha sobreposta a um gráfico que revela a direção geral dos dados. Os gráficos do Google podem gerar automaticamente linhas de tendência para gráficos de dispersão, gráficos de barras, de coluna e de linha.

O Google Charts oferece três tipos de linhas de tendência: linear, polinomial e exponencial.

Linhas de tendência lineares

Uma linha de tendência linear é a linha reta que mais se aproxima dos dados do gráfico. Ela é a linha que minimiza a soma das distâncias ao quadrado de cada ponto até ela.

No gráfico abaixo, é possível ver uma linha de tendência linear em um gráfico de dispersão comparando a idade dos bordos de açúcar ao diâmetro dos troncos. Passe o cursor sobre a linha de tendência para ver a equação calculada pelo Gráficos do Google: 4,885 vezes o diâmetro + 0,730.

Para desenhar uma linha de tendência em um gráfico, use a opção trendlines e especifique qual série de dados 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);
}

As linhas de tendência lineares são o mais comum. No entanto, às vezes, uma curva é melhor para descrever dados. Para isso, precisaremos de outro tipo de linha de tendência.

Linhas de tendência exponenciais

Se for melhor explicar os dados com uma exponencial no formato eax+b, use o atributo type para especificar uma linha de tendência exponencial, conforme mostrado abaixo:

Observação:ao contrário das linhas de tendência lineares, há várias maneiras diferentes de calcular linhas de tendência exponencial. Oferecemos apenas um método no momento, mas aceitaremos mais recursos no futuro. Por isso, é possível que o nome ou o comportamento da linha de tendência exponencial atual mude.

Neste gráfico, também usamos visibleInLegend: true para exibir a curva exponencial na legenda.

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);
}

Como mudar a cor

Por padrão, as linhas de tendência têm a mesma cor da série de dados, mas mais leves. É possível substituir isso pelo atributo color. Neste gráfico, mostramos quantos dígitos do π foram calculados por ano durante um período computacionalmente frutífero, colorindo o verde da linha de tendência exponencial.

Veja as especificações das linhas de tendência:

    trendlines: {
      0: {
        type: 'exponential',
        color: 'green',
      }
    }

Linhas de tendência polinomiais

Para gerar uma linha de tendência polinomial, especifique o tipo polynomial e um degree. Use com cautela, já que às vezes isso pode levar a resultados enganosos. No exemplo abaixo, o conjunto de dados mais ou menos linear é representado por uma linha de tendência cúbica (grau 3):

A queda após o último ponto de dados só é visível porque estendemos artificialmente o eixo horizontal para 15. Sem definir hAxis.maxValue como 15, a aparência ficaria assim:

Mesmos dados, mesma polinomial, janela diferente nos dados.

Opções
  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>

Mudar a opacidade e a largura da linha

É possível mudar a transparência da linha de tendência definindo opacity como um valor entre 0,0 e 1,0 e a largura da linha definindo a opção lineWidth.

    trendlines: {
      0: {
        color: 'purple',
        lineWidth: 10,
        opacity: 0.2,
        type: 'exponential'
      }
    }

A opção lineWidth é suficiente para a maioria dos usos, mas, se você gosta da aparência, há uma opção pointSize que pode ser usada para personalizar o tamanho dos pontos selecionáveis dentro da linha de tendência:

Assim como a luz é uma onda e uma partícula, uma linha de tendência é uma linha e vários pontos. O que os usuários veem depende de como eles interagem com ela: normalmente uma linha, mas quando um cursor passa sobre a linha de tendência, um ponto específico é destacado. Esse ponto terá um diâmetro igual a:

  • a linha de tendência pointSize, se definida...
  • o pointSize global se definido de outra forma...
  • 7

No entanto, se você definir a opção pointSize global ou de tendência, todos os pontos selecionáveis serão exibidos, independentemente do lineWidth da linha de tendência.

Opções
  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>

Como tornar os pontos visíveis

As linhas de tendência são estampadas com a inclusão de vários pontos no gráfico. A opção pointsVisible da linha de tendência determina se os pontos de uma linha de tendência específica estão visíveis. A opção padrão para todas as linhas de tendência é true, mas se você quiser desativar a visibilidade de pontos para sua primeira linha de tendência, defina trendlines.0.pointsVisible: false.

O gráfico abaixo demonstra o controle da visibilidade de pontos por linha de tendência.

Opções
        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>

    

Alterar o marcador

Por padrão, se você selecionar visibleInLegend, o rótulo revelará a equação da linha de tendência. Use labelInLegend para especificar um rótulo diferente. Aqui, mostramos uma linha de tendência para cada uma das duas séries, definindo os rótulos na legenda como "Linha de bug" (para a série 0) e "Linha de teste" (série 1).

    trendlines: {
      0: {
        labelInLegend: 'Bug line',
        visibleInLegend: true,
      },
      1: {
        labelInLegend: 'Test line',
        visibleInLegend: true,
      }
    }

Correlações

O coeficiente de determinação, chamado de R2 em estatística, identifica o quanto uma linha de tendência corresponde aos dados. Uma correlação perfeita é 1,0 e uma anticorrelação perfeita é 0,0.

Você pode representar R2 na legenda do gráfico, definindo a opção showR2 como true.