Gráficos de diferenças

Visão geral

Um gráfico de diferenças é projetado para destacar as diferenças entre dois gráficos com dados comparáveis. Ao destacar as alterações entre valores análogos, elas podem revelar variações entre os conjuntos de dados.

Para criar um gráfico de diferenças, chame o método computeDiff com dois conjuntos de dados para gerar um terceiro conjunto de dados que represente a diferença e desenhe isso.

Os gráficos de comparação estão disponíveis para gráficos de barras, colunas, pizza e dispersão.

Exemplos

Nesta seção, você verá exemplos e exemplos de código para cada tipo de gráfico de diferenças.

Gráficos de dispersão de diferenças

Para demonstrar o gráfico de dispersão de diferenças, vamos considerar um par de experimentos, cada um comparando dois medicamentos. Aqui estão os resultados dos dois experimentos e o gráfico de diferenças resultante:

Se você observar esses dois gráficos com olhos, pode perceber que algo mudou, mas é difícil saber exatamente o que. O gráfico de dispersão de diferenças explica a trajetória de cada ponto de dados.

Aqui estão as principais linhas que geram os três gráficos acima:

// Create the three charts: before, after, and diff.
var chartBefore = new google.visualization.ScatterChart(document.getElementById('chart_before_div'));
var chartAfter = new google.visualization.ScatterChart(document.getElementById('chart_after_div'));
var chartDiff = new google.visualization.ScatterChart(document.getElementById('chart_diff_div'));

// Draw the before and after charts.
chartBefore.draw(oldData);
chartAfter.draw(newData);

// Draw the diff chart.
var diffData = chartDiff.computeDiff(oldData, newData);
chartDiff.draw(diffData);

É possível mudar a opacidade das caudas com a opção diff.oldData.opacity e a opacidade dos novos pontos de dados com a opção diff.newData.opacity:

Gráficos de pizza de diferença

Confira o código para gerar os três gráficos:

  <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 oldData = google.visualization.arrayToDataTable([
      ['Major', 'Degrees'],
      ['Business', 256070], ['Education', 108034],
      ['Social Sciences & History', 127101], ['Health', 81863],
      ['Psychology', 74194]]);

    var newData = google.visualization.arrayToDataTable([
      ['Major', 'Degrees'],
      ['Business', 358293], ['Education', 101265],
      ['Social Sciences & History', 172780], ['Health', 129634],
      ['Psychology', 97216]]);

    var options = { pieSliceText: 'none' };

    var chartBefore = new google.visualization.PieChart(document.getElementById('piechart_before'));
    var chartAfter = new google.visualization.PieChart(document.getElementById('piechart_after'));
    var chartDiff = new google.visualization.PieChart(document.getElementById('piechart_diff'));

    chartBefore.draw(oldData, options);
    chartAfter.draw(newData, options);

    var diffData = chartDiff.computeDiff(oldData, newData);
    chartDiff.draw(diffData, options);
  }
</script>
<span id='piechart_before' style='width: 450px; display: inline-block'></span>
<span id='piechart_after' style='width: 450px; display: inline-block'></span>
<br>
<span id='piechart_diff' style='width: 450px; position: absolute; left: 250px'></span>

É possível controlar o tamanho relativo dos círculos com diff.innerCircle.radiusFactor, a borda entre os dois com diff.innerCircle.borderFactor e a transparência de cada um com diff.oldData.opacity e diff.newData.opacity. Por fim, é possível inverter o comportamento para que os dados mais antigos cercam os mais recentes com diff.oldData.inCenter. Um exemplo de cada:

Gráficos de diferenças de barras e colunas

Os gráficos de barras e colunas de diferenças se sobrepõem aos dados mais antigos. Aqui, pegamos dois gráficos de colunas simples, um de dados antigos e um novo, e os diferenciamos:

Para um exemplo mais complicado, vejamos como a popularidade de alguns nomes (em especial, os nomes dos estagiários de verão da Visualização do Google) mudou da década de 1980 até o presente (os números são por milhões de bebês, cortesia do Baby Name Assistant).

O código para gerar os quatro gráficos:

  <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 oldData = google.visualization.arrayToDataTable([
      ['Name', 'Popularity'],
      ['Cesar', 250],
      ['Rachel', 4200],
      ['Patrick', 2900],
      ['Eric', 8200]
    ]);

    var newData = google.visualization.arrayToDataTable([
      ['Name', 'Popularity'],
      ['Cesar', 370],
      ['Rachel', 600],
      ['Patrick', 700],
      ['Eric', 1500]
    ]);

    var colChartBefore = new google.visualization.ColumnChart(document.getElementById('colchart_before'));
    var colChartAfter = new google.visualization.ColumnChart(document.getElementById('colchart_after'));
    var colChartDiff = new google.visualization.ColumnChart(document.getElementById('colchart_diff'));
    var barChartDiff = new google.visualization.BarChart(document.getElementById('barchart_diff'));

    var options = { legend: { position: 'top' } };

    colChartBefore.draw(oldData, options);
    colChartAfter.draw(newData, options);

    var diffData = colChartDiff.computeDiff(oldData, newData);
    colChartDiff.draw(diffData, options);
    barChartDiff.draw(diffData, options);
  }
</script>

<span id='colchart_before' style='width: 450px; height: 250px; display: inline-block'></span>
<span id='colchart_after' style='width: 450px; height: 250px; display: inline-block'></span>
<span id='colchart_diff' style='width: 450px; height: 250px; display: inline-block'></span>
<span id='barchart_diff' style='width: 450px; height: 250px; display: inline-block'></span>

A coluna de diferenças e os gráficos de barras permitem controlar a largura relativa das barras antigas e novas com a opção diff.newData.widthFactor: