গুগল চার্ট

সাধারণ লাইন চার্ট থেকে সংক্রান্ত হিসেবে অত্যন্ত জটিল স্টেপল ট্রি চার্ট পর্যন্ত, Google চার্ট লাইব্রেরি বেশ কিছু চার্ট ধরন সম্পূর্ণ প্রয়োগযোগ্য হিসেবে প্রদান করে:

  • স্ক্যাটার চার্ট
  • লাইন চার্ট
  • বার / কলাম চার্ট
  • এরিয়া চার্ট
  • পাই চার্ট
  • ডউনাট চার্ট
  • আকারমূলক চিত্র
  • ম্যাপ / ভূগোল চার্ট

কিভাবে গুগল চার্ট ব্যবহার করা যায়?

আপনি যদি গুগল চার্ট এবং আপনার ওয়েবসাইটে ব্যবহার করতে চানচার্ট লোডারের লিঙ্ক যোগ করুন:

<script
src="https://www.gstatic.com/charts/loader.js">
</script>

গুগল চার্ট ব্যবহার করা সহজ

শুধুমাত্র একটি <div> ইলেকট্রনিক হতেই চার্ট দ্রব্যাস দেখাতে হবে:

<div id="myChart" style="max-width:700px; height:400px"></div>

<div> ইলেকট্রনিক হতেই একটি অতিরিক্ত ID থাকতে হবে。

তারপর গুগল গ্রাফ এপিআই লোড করুন:

  1. ভিজুয়েলাইজেশন API এবং corechart প্যাকেজ লোড করুন
  2. একটি কলব্যক্তি সেট করুন, API লোড হওয়ার পরে আহ্বান করুন
1 google.charts.load('current',{packages:['corechart']});
2 google.charts.setOnLoadCallback(drawChart);

এভাবেই!

লাইন চার্ট

মূল কোড

function drawChart() {
// সেট ডাটা
var data = google.visualization.arrayToDataTable([
  ['মূল্য', 'আয়তন'],
  [50,7],[60,8],[70,8],[80,9],[90,9],[100,9],
  [110,10],[120,11],[130,14],[140,14],[150,15]
  ]);
// সেট অপশন
var options = {
  title: 'ঘরের মূল্য এবং আয়তন',
  hAxis: {title: 'বর্গ মিটার'},
  vAxis: {title: 'মিলিয়ন মূল্য'},
  legend: 'none'
};
// চার্ট দ্রব্যাস
var chart = new google.visualization.LineChart(document.getElementById('myChart'));
chart.draw(data, options);
}

আপনার হাতে পরীক্ষা করুন

স্পর্শক চার্ট

একই ডাটা যদি আপনি গড়ে তোলতে চানস্পর্শক চার্ট، দফতর করুন google.visualization পরিবর্তন করুন ScatterChart:

var chart = new google.visualization.ScatterChart(document.getElementById('myChart'));

আপনার হাতে পরীক্ষা করুন

বার্ড চার্ট

মূল কোড

function drawChart() {
var data = google.visualization.arrayToDataTable([
  ['Contry', 'Mhl'],
  ['ইতালি', 55],
  ['ফ্রান্স', 49],
  ['স্পেন', 44],
  ['মার্কিন যুক্তরাষ্ট্র', 24],
  ['আর্জেন্টিনা', 15]
]);
var options = {
  title: 'বিশ্ব বিনোদগ্রাফ উৎপাদন'
};
var chart = new google.visualization.BarChart(document.getElementById('myChart'));
chart.draw(data, options);
}

আপনার হাতে পরীক্ষা করুন

বিনোদগ্রাফ

যদি আপনি স্তম্ভচিত্রকেবিনোদগ্রাফশুধুমাত্র

google.visualization.PieChart

প্রতিস্থাপন:

google.visualization.BarChart

var chart = new google.visualization.PieChart(document.getElementById('myChart'));

আপনার হাতে পরীক্ষা করুন

ত্রিমাত্রিক বিনোদগ্রাফ

যদি আপনি ত্রিমাত্রিক বিনোদগ্রাফ দেখাতে চান, তবে শুধুমাত্র is3D: true অপশনসমূহে যোগ করুন:

var options = {
  title: 'বিশ্ব বিনোদগ্রাফ উৎপাদন',
  is3D: true
};

আপনার হাতে পরীক্ষা করুন