Google Charts API-তে আপনি একাধিক চার্ট টাইপ একত্রে ব্যবহার করতে পারেন, যেমন ComboChart, যেখানে একই চার্টে Bar Chart এবং Line Chart একসাথে প্রদর্শিত হতে পারে। এই ধরনের চার্টগুলোর সাহায্যে আপনি বিভিন্ন ডেটা পয়েন্টের মধ্যে সম্পর্ক বা তুলনা করতে পারেন।

এখানে ComboChart ব্যবহার করে BarChart এবং LineChart একত্রে কিভাবে ব্যবহার করা যায় তা দেখানো হচ্ছে।

ComboChart এর মাধ্যমে Multiple Chart Types ব্যবহার করা

ComboChart আপনাকে একাধিক চার্ট টাইপ একসাথে ব্যবহার করার সুযোগ দেয়। আপনি একে একটি চার্টে Bar এবং Line টাইপের চার্ট একসাথে প্রদর্শন করতে ব্যবহার করতে পারেন।

ComboChart এর উদাহরণ

এখানে আমরা একটি Combo Chart তৈরি করব, যেখানে BarChart এবং LineChart একসাথে প্রদর্শিত হবে। আমাদের ডেটা হবে কয়েকটি বছরের বিক্রয় পরিসংখ্যান।

app.component.ts ফাইল:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Google Charts - Combo Chart Example';

  // Combo Chart Type
  chartType = 'ComboChart';

  // Chart Data
  chartData = [
    ['Year', 'Sales', 'Expenses'],
    ['2010', 1000, 400],
    ['2011', 1170, 460],
    ['2012', 660, 1120],
    ['2013', 1030, 540]
  ];

  // Chart Options (Multiple Chart Types together)
  chartOptions = {
    title: 'Company Performance',
    vAxis: { title: 'Amount' },
    hAxis: { title: 'Year' },
    seriesType: 'bars',  // Bar chart
    series: { 1: { type: 'line' } }  // Line chart for the second data series
  };
}

app.component.html ফাইল:

<h1>{{ title }}</h1>

<google-chart 
  [type]="chartType" 
  [data]="chartData" 
  [options]="chartOptions">
</google-chart>

Chart Type নির্বাচন এবং ComboChart কাস্টমাইজেশন

• seriesType: এই অপশনে আপনি প্রধান চার্টের ধরন (এখানে bars) নির্বাচন করবেন, এবং series এর মাধ্যমে আপনি নির্দিষ্ট ডেটা সিরিজের জন্য আলাদা টাইপ (এখানে line) ব্যবহার করবেন। এই কাস্টমাইজেশনে আপনি বার এবং লাইন একসাথে একটি চার্টে প্রদর্শন করতে পারবেন।
• vAxis এবং hAxis: এই অপশনগুলি অক্ষ (axis) কাস্টমাইজ করতে ব্যবহার করা হয়, যেমন অক্ষের টাইটেল এবং স্কেল।
• series: এখানে, সিরিজে আপনি কী ধরনের চার্ট চান তা কাস্টমাইজ করতে পারেন। প্রথম সিরিজের জন্য বার (Bar) এবং দ্বিতীয় সিরিজের জন্য লাইন (Line) টাইপ ব্যবহার করা হয়েছে।

Multiple Chart Types Example

এছাড়া, আপনি একাধিক চার্ট টাইপ একত্রে দেখানোর জন্য ColumnChart, LineChart, PieChart ইত্যাদি বিভিন্ন চার্ট একত্রে ComboChart এর মধ্যে কাস্টমাইজ করতে পারেন। উদাহরণস্বরূপ, নিম্নলিখিত ডেটার জন্য ComboChart ব্যবহার করা যেতে পারে:

app.component.ts ফাইল:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Multiple Chart Types Together';

  chartType = 'ComboChart';  // ComboChart

  // Data for ComboChart
  chartData = [
    ['Year', 'Sales', 'Expenses', 'Profit'],
    ['2010', 1000, 400, 600],
    ['2011', 1170, 460, 710],
    ['2012', 660, 1120, -460],
    ['2013', 1030, 540, 490]
  ];

  chartOptions = {
    title: 'Company Performance',
    vAxis: { title: 'Amount' },
    hAxis: { title: 'Year' },
    seriesType: 'bars',  // Bar chart for first data series
    series: { 
      1: { type: 'line' }, // Line chart for second data series (Expenses)
      2: { type: 'scatter' } // Scatter chart for third data series (Profit)
    }
  };
}

app.component.html ফাইল:

<h1>{{ title }}</h1>

<google-chart 
  [type]="chartType" 
  [data]="chartData" 
  [options]="chartOptions">
</google-chart>

এখানে, Bar Chart, Line Chart, এবং Scatter Chart একত্রে ব্যবহার করা হয়েছে।

Chart Types একত্রে ব্যবহার করার সুবিধা

1. ডেটা তুলনা: একসাথে বিভিন্ন ধরনের চার্ট ব্যবহার করে আপনি বিভিন্ন ডেটার মধ্যকার সম্পর্ক তুলনা করতে পারবেন। উদাহরণস্বরূপ, Bar Chart দিয়ে বিক্রয় এবং Line Chart দিয়ে খরচের তুলনা।
2. ভিজ্যুয়াল ক্লিয়ারিটি: একাধিক চার্ট টাইপ ব্যবহার করে ডেটাকে আরও সহজে বোঝানো যায়, বিশেষ করে যখন বিভিন্ন ধরনের ডেটা একসাথে উপস্থাপন করতে হয়।
3. ইন্টারঅ্যাকটিভ চার্ট: Google Charts এর মাধ্যমে আপনি ইন্টারঅ্যাকটিভ চার্ট তৈরি করতে পারেন, যেখানে ইউজার ডেটার সাথে ইন্টারঅ্যাক্ট করে আরও বিস্তারিত দেখতে পারে।

সারাংশ

ComboChart ব্যবহার করে আপনি Bar Chart, Line Chart, Column Chart, Pie Chart ইত্যাদি একত্রে ব্যবহার করতে পারেন। এটি একাধিক চার্ট টাইপের ডেটা একসাথে প্রদর্শন করতে সাহায্য করে এবং আপনি এই চার্টগুলির মধ্যে সম্পর্ক এবং তুলনা করতে পারেন। seriesType এবং series অপশন ব্যবহার করে আপনি চার্টের বিভিন্ন সিরিজের জন্য আলাদা টাইপ (যেমন বার, লাইন, বা স্ক্যাটার) নির্বাচন করতে পারেন। Google Charts API এ এই কাস্টমাইজেশন ফিচার ব্যবহার করে আপনি আরও কার্যকরী এবং তথ্যপূর্ণ ডেটা ভিজুয়ালাইজেশন তৈরি করতে পারেন।