Diagram Diff

Ringkasan

Diagram perbedaan adalah diagram yang dirancang untuk menyoroti perbedaan antara dua diagram dengan data yang sebanding. Dengan membuat perubahan antara nilai-nilai analog yang terlihat jelas, perubahan tersebut dapat mengungkapkan variasi antar-set data.

Buat diagram perbedaan dengan memanggil metode computeDiff dengan dua set data untuk menghasilkan set data ketiga yang mewakili perbedaan, lalu menggambarnya.

Diagram perbedaan tersedia untuk diagram batang, diagram kolom, diagram lingkaran, dan diagram sebar.

Contoh

Di bagian ini, Anda akan melihat contoh dan contoh kode untuk setiap jenis diagram perbedaan.

Diagram Sebar yang Berbeda

Untuk mendemonstrasikan diagram sebar perbedaan, mari kita lihat sepasang eksperimen, yang masing-masing membandingkan dua obat. Berikut adalah hasil dari dua eksperimen, dan diagram perbedaan yang dihasilkan:

Jika Anda memperhatikan kedua diagram tersebut, Anda dapat mengetahui bahwa ada sesuatu yang telah berubah, tetapi sulit untuk mengatakannya dengan tepat. Diagram sebar perbedaan memperjelasnya dengan menampilkan lintasan dari setiap titik data.

Berikut adalah baris utama yang membuat tiga diagram di atas:

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

Anda dapat mengubah opasitas ekor dengan opsi diff.oldData.opacity, dan opasitas titik data baru dengan opsi diff.newData.opacity:

Diagram Lingkaran Berbeda

Berikut kode untuk membuat ketiga diagram ini:

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

Anda dapat mengontrol ukuran relatif lingkaran dengan diff.innerCircle.radiusFactor, batas antara duanya dengan diff.innerCircle.borderFactor, dan transparansi masing-masing dengan diff.oldData.opacity dan diff.newData.opacity. Terakhir, Anda dapat membalikkan perilaku tersebut agar data terlama mengelilingi data terbaru dengan diff.oldData.inCenter. Setiap contoh:

Diagram Batang dan Kolom Berbeda

Diagram batang dan diagram kolom diff menempatkan data yang lebih baru di atas data yang lebih lama. Di sini, kita mengambil dua diagram kolom sederhana—salah satu data lama, salah satunya baru—dan membedakannya:

Untuk contoh yang lebih rumit, mari kita lihat bagaimana popularitas beberapa nama (khususnya, nama magang musim panas Google Visual) telah berubah dari tahun 1980-an hingga saat ini (jumlahnya per jutaan bayi, berkat Baby Name Wizard).

Kode untuk membuat keempat diagram:

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

Diagram kolom dan diagram batang memungkinkan Anda mengontrol lebar relatif panel lama dan baru dengan opsi diff.newData.widthFactor: