Linhas de tendência

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, de barras, de coluna e de linha.

Os gráficos do Google são compatíveis com 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 no gráfico. Para ser mais preciso, é a linha que minimiza a soma das distâncias ao quadrado de cada ponto dele.

No gráfico abaixo, você pode 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 pelos 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 tipo mais comum. Mas às vezes uma curva é melhor para descrever dados e, para isso, precisaremos de outro tipo de linha de tendência.

Linhas de tendência exponencial

Se for melhor explicar seus dados com uma exponencial na forma eax+b, você pode usar o atributo type para especificar uma linha de tendência exponencial, como mostrado abaixo:

Observação: ao contrário das linhas de tendência lineares, existem várias maneiras diferentes de calcular linhas de tendência exponencial. Oferecemos apenas um método no momento, mas vamos oferecer suporte a mais 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);
}

Mudar a cor

Por padrão, as linhas de tendência têm as mesmas cores da série de dados, mas são mais claras. É possível substituir isso pelo atributo color. Aqui, 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, porque às vezes eles podem levar a resultados enganosos. No exemplo abaixo, em que um conjunto de dados aproximadamente linear é representado com uma linha de tendência cúbica (graus 3):

O plummet após o último ponto de dados é visível apenas porque estendemos artificialmente o eixo horizontal para 15. Sem definir hAxis.maxValue como 15, o código ficaria assim:

Mesmas 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 alterar 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 ele: normalmente, uma linha é destacada, mas quando você passa o cursor 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 mostrados, 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 refletidas com a marcação de vários pontos no gráfico. A opção pointsVisible da linha de tendência determina se os pontos de uma linha 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 ponto na primeira linha, defina trendlines.0.pointsVisible: false.

O gráfico abaixo demonstra o controle de 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>

    

Mudar o marcador

Por padrão, se você selecionar visibleInLegend, o rótulo revelará a equação da linha de tendência. É possível usar 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 R2 em estatísticas, 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.

<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>