अंतर दिखाने वाला चार्ट

खास जानकारी

अंतर बताने वाला चार्ट एक ऐसा चार्ट है जो तुलना किए जा सकने वाले डेटा वाले दो चार्ट के बीच के अंतर को हाइलाइट करने के लिए डिज़ाइन किया गया है. मिलती-जुलती वैल्यू के बीच अहम बदलाव करने से, डेटासेट के बीच के फ़र्क़ दिख सकते हैं.

दो डेटासेट के साथ computeDiff तरीके को कॉल करके, एक डिफ़्रेंस चार्ट बनाया जा सकता है. इससे, डिफ़र को दिखाने वाला तीसरा डेटासेट जनरेट किया जा सकता है और फिर उसे ड्रॉ किया जा सकता है.

बार चार्ट, कॉलम चार्ट, पाई चार्ट, और स्कैटर चार्ट के लिए, डिफ़ चार्ट उपलब्ध हैं.

उदाहरण

इस सेक्शन में, आपको हर तरह के अंतर वाले चार्ट के लिए उदाहरण और कोड सैंपल दिखेंगे.

डिफ़ स्कैटर चार्ट

अंतर स्कैटर चार्ट को दिखाने के लिए, आइए प्रयोग के एक जोड़े पर विचार करें जिसमें प्रत्येक दो दवाओं की तुलना की गई हो. यहां दो प्रयोगों के नतीजे और उनसे मिला फ़र्क़ चार्ट दिया गया है:

अगर इन दोनों चार्ट पर नज़र डालें, तो आपको पता चल जाएगा कि कुछ बदल गया है, लेकिन सही-सही अंदाज़ा लगाना मुश्किल है. डिफ़्रेंस स्कैटर चार्ट हर डेटा पॉइंट की ट्रजेक्टरी दिखाकर उसे साफ़ तौर पर दिखाता है.

ऊपर दिए गए तीन चार्ट को जनरेट करने वाली मुख्य लाइनें यहां दी गई हैं:

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

diff.oldData.opacity विकल्प की मदद से, टेल की ओपैसिटी बदली जा सकती है. साथ ही, diff.newData.opacity विकल्प की मदद से, नए डेटा पॉइंट की ओपैसिटी को बदला जा सकता है:

डिफ़ पाई चार्ट

सभी तीन चार्ट जनरेट करने के लिए कोड यहां दिया गया है:

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

diff.innerCircle.radiusFactor की मदद से, सर्कल का साइज़, diff.innerCircle.borderFactor, और दोनों के बीच के बॉर्डर को कंट्रोल किया जा सकता है. साथ ही, diff.oldData.opacity और diff.newData.opacity की मदद से, हर सर्कल की पारदर्शिता को भी कंट्रोल किया जा सकता है. आखिर में, बिहेवियर को भी बदला जा सकता है, ताकि सबसे पुराना डेटा, नए डेटा से diff.oldData.inCenter के आस-पास रहे. हर एक का उदाहरण:

अलग-अलग बार और कॉलम चार्ट

अंतर बार और अंतर कॉलम चार्ट, पुराने डेटा के ऊपर नया डेटा ओवरले करते हैं. यहां, हम दो आसान कॉलम चार्ट लेते हैं—एक पुराने डेटा का और एक नया है—और उनमें अंतर है:

एक ज़्यादा जटिल उदाहरण के लिए, आइए देखें कि कुछ नामों (खास तौर पर, Google विज़ुअलाइज़ेशन समर इंटर्न) की लोकप्रियता 1980 के दशक से अब तक कैसे बदल गई है (बेबी नेम विज़र्ड के सौजन्य से, हर 10 लाख बच्चों की संख्या कितनी है).

चारों चार्ट जनरेट करने के लिए कोड:

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

अंतर कॉलम और बार चार्ट की मदद से, diff.newData.widthFactor विकल्प की मदद से पुराने और नए बार की चौड़ाई को कंट्रोल किया जा सकता है: