ভিন্ন চার্ট

ওভারভিউ

একটি ভিন্ন চার্ট হল একটি চার্ট যা তুলনামূলক ডেটা সহ দুটি চার্টের মধ্যে পার্থক্য হাইলাইট করার জন্য ডিজাইন করা হয়েছে। সাদৃশ্যপূর্ণ মানগুলির মধ্যে পরিবর্তনগুলিকে বিশিষ্ট করে, তারা ডেটাসেটের মধ্যে পার্থক্য প্রকাশ করতে পারে।

আপনি পার্থক্যের প্রতিনিধিত্বকারী একটি তৃতীয় ডেটাসেট তৈরি করতে দুটি ডেটাসেটের সাথে 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 থেকে বর্তমান পর্যন্ত পরিবর্তিত হয়েছে (সংখ্যাগুলি প্রতি লক্ষাধিক শিশুর জন্য, বেবি নেম উইজার্ডের সৌজন্যে) .

চারটি চার্ট তৈরি করার কোড:

  <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 বিকল্পের সাথে পুরানো এবং নতুন বারের আপেক্ষিক প্রস্থ নিয়ন্ত্রণ করতে দেয়: