अंतर चार्ट

• खास जानकारी
• उदाहरण
  • स्कैटर चार्ट का अंतर
  • पाई चार्ट को अंतर करना
  • बार और कॉलम चार्ट में अंतर

खास जानकारी

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

आप दो तरीकों से 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 के साथ नए डेटा के आस-पास रहे. हर उदाहरण का उदाहरण:

अंतर बार और कॉलम चार्ट

डिफ़ बार और डिफ़ कॉलम चार्ट, पुराने डेटा पर सबसे ऊपर मौजूद नया डेटा दिखाते हैं. यहां, हम दो आसान कॉलम चार्ट लेते हैं—एक पुराने डेटा में, दूसरा नया—और उनमें अंतर:

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

सभी चार चार्ट जनरेट करने के लिए कोड:

  <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 विकल्प के साथ पुराने और नए बार की रिलेटिव चौड़ाई कंट्रोल की जा सकती है: