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 dar destaque às alterações entre valores análogos, eles podem revelar variações entre 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 que representa a diferença e o desenhe.

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

Exemplos

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

Gráficos de dispersão

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

Se você prestar atenção a esses dois gráficos, vai perceber que algo mudou, mas é difícil dizer exatamente o que. O gráfico de dispersão deixa claro o caminho de cada ponto de dados.

Veja 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 alterar 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 diferentes

Veja 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 envolvam os dados mais recentes com diff.oldData.inCenter. Um exemplo de cada um:

Gráficos de colunas e barras de diferenças

Os gráficos de diferenças e colunas de diferenças se sobrepõem aos dados mais recentes sobre dados mais antigos. Aqui, pegamos dois gráficos de colunas simples, um de dados antigos, um de novos, e os diferenciam:

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

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: