Visão geral
Uma
Os Gráficos 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
No gráfico abaixo, há uma linha de tendência linear em um gráfico de dispersão comparando a idade da Acervo com o diâmetro dos troncos. Passe o cursor sobre a linha de tendência para ver a equação calculada pelo Google Charts: 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 será usada:
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 exponenciais
Se for melhor explicar os dados com uma exponencial na
forma eax+b, use o atributo type
para especificar uma linha de tendência
Observação:diferentemente das linhas de tendência lineares, há várias maneiras diferentes de calcular linhas de tendência exponenciais. No momento, fornecemos apenas um método, mas haverá mais suporte no futuro. Por isso, é possível que o nome ou 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 alterar a cor
Por padrão, as linhas de tendência têm a mesma cor das séries de dados, mas mais claras. É possível substituir isso pelo atributo color.
Aqui, criamos um gráfico de quantos dígitos de π foram calculados por ano durante um período frutífero em termos computacionais, colorindo a linha de tendência exponencial verde.
Veja a especificação de 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
cuidado, já que eles podem levar a resultados enganosos. No exemplo abaixo, em que um conjunto de dados aproximadamente linear é plotado com uma linha de tendência cúbica (grau 3):
O plumímetro após o último ponto de dados só é visível porque estendemos artificialmente o eixo horizontal para 15. Sem definir hAxis.maxValue como 15, o resultado teria esta aparência:
Mesmos dados, mesmo polinômio, janela diferente sobre os dados.
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>
Como alterar 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ê gostar 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 um monte de pontos. O que os usuários veem depende de como eles interagem com ela: normalmente uma linha, mas quando passarem o cursor sobre ela, um ponto específico será destacado. Esse ponto terá um diâmetro igual a:
- na linha de tendência
pointSize, se definida. Caso contrário... - o
pointSizeglobal se definido. Caso contrário... - 7
No entanto, se você definir a opção pointSize global ou de linha de tendência, todos os pontos selecionáveis serão mostrados, independente do lineWidth da linha de tendência.
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>
Como tornar os pontos visíveis
As linhas de tendência são formadas pela inserçã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 são visíveis. A opção padrão para todas as linhas de tendência é true, mas se você quiser desativar a visibilidade do ponto da primeira linha de tendência, defina trendlines.0.pointsVisible: false.
O gráfico abaixo demonstra o controle da visibilidade dos pontos por linha de tendência.
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>
Como alterar o rótulo
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, exibimos 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 grau de correspondência entre uma linha de tendência e os dados. Uma correlação perfeita é 1,0, e uma anticorrelação perfeita é 0,0.
Para descrever R2 na legenda do seu gráfico, defina 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>