Google Charts API ব্যবহার করে অনেক ধরনের চার্ট তৈরি করা যায় যা ডেটা ভিজুয়ালাইজেশনে সহায়তা করে। এখানে জনপ্রিয় চার্ট টাইপগুলোর কিছু উদাহরণ দেওয়া হলো: Line Chart, Bar Chart, Pie Chart, Area Chart, এবং আরও অনেক। প্রতিটি চার্ট ডেটার বিভিন্ন দিক তুলে ধরতে এবং ইউজারের ইন্টারঅ্যাকশন নিশ্চিত করতে ব্যবহৃত হয়।

1. Line Chart (লাইন চার্ট)

Line Chart সাধারণত সময়ের সাথে পরিবর্তনশীল ডেটা প্রদর্শন করতে ব্যবহৃত হয়। এটি পয়েন্টগুলির মধ্যে লাইন তৈরি করে ডেটার প্রবণতা বা প্যাটার্ন তুলে ধরে।

Line Chart উদাহরণ:

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Sales'],
    ['2010', 1000],
    ['2011', 1170],
    ['2012', 660],
    ['2013', 1030]
  ]);

  var options = {
    title: 'Company Sales Growth',
    curveType: 'function',
    legend: { position: 'bottom' }
  };

  var chart = new google.visualization.LineChart(document.getElementById('line_chart'));
  chart.draw(data, options);
}

HTML:

<div id="line_chart" style="width: 900px; height: 500px;"></div>

2. Bar Chart (বার চার্ট)

Bar Chart সাধারণত তুলনা করার জন্য ব্যবহৃত হয়, যেখানে প্রতিটি ক্যাটেগরি বা ভ্যালু বার আকারে উপস্থাপিত হয়। এটি ডেটার তুলনা সরাসরি দেখানোর জন্য উপযুক্ত।

Bar Chart উদাহরণ:

google.charts.load('current', {'packages':['corechart', 'bar']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Product', '2020', '2021'],
    ['Shirts', 1000, 1200],
    ['Pants', 600, 800],
    ['Shoes', 300, 350]
  ]);

  var options = {
    chart: {
      title: 'Sales Comparison',
      subtitle: 'Yearly Product Sales',
    },
  };

  var chart = new google.visualization.BarChart(document.getElementById('bar_chart'));
  chart.draw(data, options);
}

HTML:

<div id="bar_chart" style="width: 900px; height: 500px;"></div>

3. Pie Chart (পাই চার্ট)

Pie Chart একটি সার্কুলার চার্ট যেখানে ডেটার অংশগুলি ভগ্নাংশ আকারে উপস্থাপিত হয়। এটি সাধারণত শতাংশ বা পোর্টফোলিও দেখানোর জন্য ব্যবহৃত হয়।

Pie Chart উদাহরণ:

google.charts.load('current', {'packages':['corechart', 'pie']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Task', 'Hours per Day'],
    ['Work', 8],
    ['Eat', 2],
    ['Commute', 2],
    ['Watch TV', 2],
    ['Sleep', 8]
  ]);

  var options = {
    title: 'My Daily Activities',
    pieHole: 0.4
  };

  var chart = new google.visualization.PieChart(document.getElementById('pie_chart'));
  chart.draw(data, options);
}

HTML:

<div id="pie_chart" style="width: 900px; height: 500px;"></div>

4. Area Chart (এলাকা চার্ট)

Area Chart একটি লাইন চার্টের মতো, তবে এখানে লাইনটি পূর্ণ জায়গা রঙিন করে দেয়া হয়, যা সময়ের সাথে ডেটার পরিমাণ বা ভলিউম প্রদর্শন করে। এটি সাধারণত ট্রেন্ড এবং ভলিউম দেখানোর জন্য ব্যবহার করা হয়।

Area Chart উদাহরণ:

google.charts.load('current', {'packages':['corechart', 'area']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Sales', 'Expenses'],
    ['2010', 1000, 400],
    ['2011', 1170, 460],
    ['2012', 660, 1120],
    ['2013', 1030, 540]
  ]);

  var options = {
    title: 'Company Performance',
    hAxis: { title: 'Year' },
    vAxis: { title: 'Amount' },
    isStacked: true
  };

  var chart = new google.visualization.AreaChart(document.getElementById('area_chart'));
  chart.draw(data, options);
}

HTML:

<div id="area_chart" style="width: 900px; height: 500px;"></div>

5. Combo Chart (কোম্বো চার্ট)

Combo Chart একাধিক চার্টের সংমিশ্রণ হতে পারে, যেমন একটি চার্টে বার এবং লাইন একসাথে প্রদর্শন করা হয়। এটি ডেটার বিভিন্ন দিক একসাথে তুলনা করতে সাহায্য করে।

Combo Chart উদাহরণ:

google.charts.load('current', {'packages':['corechart', 'bar']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Month', 'Sales', 'Profit'],
    ['Jan', 1000, 400],
    ['Feb', 1170, 460],
    ['Mar', 660, 1120],
    ['Apr', 1030, 540]
  ]);

  var options = {
    title: 'Sales and Profit Comparison',
    vAxis: { title: 'Amount' },
    hAxis: { title: 'Month' },
    seriesType: 'bars',
    series: { 1: { type: 'line' } }
  };

  var chart = new google.visualization.ComboChart(document.getElementById('combo_chart'));
  chart.draw(data, options);
}

HTML:

<div id="combo_chart" style="width: 900px; height: 500px;"></div>

6. Bubble Chart (বাবল চার্ট)

Bubble Chart একটি বিশেষ ধরনের চার্ট যেখানে প্রতিটি বুদ্বুদ একটি ডেটা পয়েন্টের প্রতিনিধিত্ব করে এবং এর আকার বা রঙ ভিন্ন ভিন্ন ডেটা বা পরিমাপ দেখাতে ব্যবহৃত হয়। এটি তিনটি ভেরিয়েবল একসাথে প্রদর্শন করতে সক্ষম।

Bubble Chart উদাহরণ:

google.charts.load('current', {'packages':['corechart', 'bubble']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['City', 'Population', 'Area', 'Density'],
    ['New York', 8175133, 302.9, 27000],
    ['Los Angeles', 3792621, 468.7, 8100],
    ['Chicago', 2695598, 227.6, 11800],
    ['Houston', 2129784, 599.6, 3500],
    ['Phoenix', 1445632, 517.6, 2800]
  ]);

  var options = {
    title: 'City Population and Area',
    chartArea: {width: '50%'},
    hAxis: {
      title: 'Population',
      minValue: 0
    },
    vAxis: {
      title: 'City'
    }
  };

  var chart = new google.visualization.BubbleChart(document.getElementById('bubble_chart'));
  chart.draw(data, options);
}

HTML:

<div id="bubble_chart" style="width: 900px; height: 500px;"></div>

সারাংশ

Google Charts API বিভিন্ন ধরনের চার্ট তৈরি করার জন্য ব্যবহৃত হয়, যেমন Line Chart, Bar Chart, Pie Chart, Area Chart, Combo Chart, এবং Bubble Chart। প্রতিটি চার্ট ডেটার ভিন্ন ভিন্ন দিক উপস্থাপন করতে সক্ষম এবং তা বিশ্লেষণ করতে সহায়তা করে। Google Charts API সহজেই ওয়েব অ্যাপ্লিকেশনগুলির মধ্যে ইন্টিগ্রেট করা যায় এবং বিভিন্ন ধরনের ইন্টারঅ্যাকটিভ এবং কাস্টমাইজড চার্ট তৈরি করতে সাহায্য করে।