Diagram Perbedaan

Ringkasan

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

Anda membuat 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 pai, dan diagram sebar.

Contoh

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

Diagram Sebar Perbedaan

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

Jika Anda mengamati kedua bagan itu, Anda dapat melihat bahwa ada sesuatu yang berubah, tetapi sulit untuk mengatakan dengan tepat apa. Diagram sebar yang berbeda memperjelasnya dengan menampilkan lintasan dari setiap titik data.

Berikut adalah baris utama yang menghasilkan 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 Perbedaan

Berikut adalah kode untuk menghasilkan ketiga 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([
      ['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 keduanya dengan diff.innerCircle.borderFactor, dan transparansi masing-masing dengan diff.oldData.opacity dan diff.newData.opacity. Terakhir, Anda dapat membalikkan perilaku sehingga data terlama mengelilingi data terbaru dengan diff.oldData.inCenter. Contoh masing-masing:

Diagram Kolom dan Batang Perbedaan

Diagram batang perbedaan dan kolom perbedaan menempatkan data baru di atas data lama. Di sini, kita mengambil dua diagram kolom sederhana—salah satu dari data lama, satu lagi—dan melakukan diff:

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

Kode untuk menghasilkan 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 batang dan kolom perbedaan memungkinkan Anda mengontrol lebar relatif batang lama dan baru dengan opsi diff.newData.widthFactor: