Google Charts ব্যবহার করার সময়, আপনি ডেটার উৎস (data source) আলাদা আলাদা রাখতে পারেন এবং সেই ডেটা ভিত্তিক চার্টে ভিন্ন ভিন্ন তথ্য বাইন্ডিং করতে পারেন। এই প্রক্রিয়ায় বিভিন্ন ধরনের ডেটা একটি চার্টের মাধ্যমে বা একাধিক চার্টে ব্যবহার করা হয়। নিচে আমি কিভাবে আলাদা আলাদা data binding করতে পারি তা বিস্তারিতভাবে দেখাবো।

Data Binding এর মাধ্যমে Google Chart কাস্টমাইজ করা

1. Multiple Charts with Different Data

ধরা যাক, আমাদের দুটি আলাদা চার্ট রয়েছে, একটি Pie Chart এবং একটি Bar Chart। আমরা Pie Chart-এ একটি ডেটা সেট ব্যবহার করব এবং Bar Chart-এ আরেকটি ডেটা সেট ব্যবহার করব।

2. Angular Example with Multiple Data Binding

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 Google Charts with Data Binding';

  // Pie Chart Type and Data
  pieChartType = 'PieChart';
  pieChartData = [
    ['Task', 'Hours per Day'],
    ['Work', 8],
    ['Eat', 2],
    ['Commute', 2],
    ['Watch TV', 2],
    ['Sleep', 8]
  ];
  pieChartOptions = {
    title: 'My Daily Activities',
    pieHole: 0.4, // Doughnut style
    width: 600,
    height: 400
  };

  // Bar Chart Type and Data
  barChartType = 'BarChart';
  barChartData = [
    ['City', '2010 Population', '2011 Population'],
    ['New York', 8175133, 8268231],
    ['Los Angeles', 3792621, 3844829],
    ['Chicago', 2695598, 2718782]
  ];
  barChartOptions = {
    title: 'City Populations',
    chartArea: { width: '50%' },
    hAxis: {
      title: 'Population',
      minValue: 0
    },
    vAxis: {
      title: 'City'
    }
  };
}

app.component.html ফাইল:

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

<!-- Pie Chart with Data Binding -->
<h2>Pie Chart</h2>
<google-chart 
  [type]="pieChartType" 
  [data]="pieChartData" 
  [options]="pieChartOptions">
</google-chart>

<!-- Bar Chart with Data Binding -->
<h2>Bar Chart</h2>
<google-chart 
  [type]="barChartType" 
  [data]="barChartData" 
  [options]="barChartOptions">
</google-chart>

Data Binding Explanation:

• Data Binding: এই ক্ষেত্রে, pieChartData এবং barChartData দুটি আলাদা ডেটা সেট যা Pie Chart এবং Bar Chart-এ বাইন্ড করা হয়েছে। যখন ডেটা পরিবর্তিত হয়, তখন স্বয়ংক্রিয়ভাবে চার্ট আপডেট হয়।
  • Pie Chart-এর জন্য: pieChartData অ্যারে ব্যবহার করা হচ্ছে, যা বিভিন্ন টাস্কের জন্য ঘণ্টা ভাগ করে।
  • Bar Chart-এর জন্য: barChartData অ্যারে ব্যবহার করা হচ্ছে, যা বিভিন্ন শহরের জনসংখ্যার তুলনা করছে।
• Chart Type: pieChartType এবং barChartType দুটি ভিন্ন Chart Type নির্দেশ করছে।
• Options: প্রত্যেকটি চার্টের জন্য আলাদা chart options রয়েছে (যেমন: টাইটেল, সাইজ, অক্ষের কাস্টমাইজেশন ইত্যাদি)।

Data Binding এর ক্ষেত্রে পরিবর্তন এবং আপডেট

আপনি যদি Pie Chart বা Bar Chart-এর ডেটা পরিবর্তন করতে চান, তাহলে আপনি কম্পোনেন্টের ডেটা পরিবর্তন করে সেই চার্ট আপডেট করতে পারেন।

Change Data Dynamically (ডেটা ডাইনামিক্যালি পরিবর্তন করা)

ধরা যাক, আপনি একটি বাটন ক্লিক করার মাধ্যমে Pie Chart বা Bar Chart এর ডেটা পরিবর্তন করতে চান। নিচে দেখানো হলো কিভাবে এই কাজ করা যায়:

app.component.ts ফাইল (ডেটা আপডেট করার ফাংশন):

updatePieChartData() {
  this.pieChartData = [
    ['Task', 'Hours per Day'],
    ['Work', 6],
    ['Eat', 3],
    ['Commute', 3],
    ['Watch TV', 1],
    ['Sleep', 9]
  ];
}

updateBarChartData() {
  this.barChartData = [
    ['City', '2010 Population', '2011 Population'],
    ['New York', 8000000, 8100000],
    ['Los Angeles', 3800000, 3900000],
    ['Chicago', 2700000, 2800000]
  ];
}

app.component.html ফাইল (বাটন ক্লিকের মাধ্যমে ডেটা আপডেট):

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

<!-- Pie Chart with Data Binding -->
<h2>Pie Chart</h2>
<google-chart 
  [type]="pieChartType" 
  [data]="pieChartData" 
  [options]="pieChartOptions">
</google-chart>
<button (click)="updatePieChartData()">Update Pie Chart Data</button>

<!-- Bar Chart with Data Binding -->
<h2>Bar Chart</h2>
<google-chart 
  [type]="barChartType" 
  [data]="barChartData" 
  [options]="barChartOptions">
</google-chart>
<button (click)="updateBarChartData()">Update Bar Chart Data</button>

এখানে, updatePieChartData() এবং updateBarChartData() ফাংশনগুলো বাটন ক্লিক করার পর নতুন ডেটা সেটে চার্ট আপডেট করবে।

Data Binding এর সুবিধা

1. Dynamic Data: ডেটা পরিবর্তন হলে চার্টও স্বয়ংক্রিয়ভাবে আপডেট হয়।
2. Separate Data Management: আপনি আলাদা আলাদা ডেটা ব্যবহার করে বিভিন্ন চার্টে ডেটা বাইন্ড করতে পারেন, যা অ্যাপ্লিকেশনের স্ট্রাকচার সহজ করে।
3. Real-time Updates: লাইভ ডেটা বা রিয়েল-টাইম ডেটা ইনপুট দিলে চার্টের ডেটাও রিয়েল-টাইমে আপডেট হয়।

সারাংশ

Google Charts API-এ Data Binding এর মাধ্যমে আপনি সহজেই একাধিক চার্টের মধ্যে আলাদা আলাদা ডেটা বাইন্ড করতে পারেন। Angular কম্পোনেন্টে বিভিন্ন ধরনের ডেটা (যেমন: Pie Chart, Bar Chart) আলাদা ভাবে তৈরি করে, সেগুলোকে Chart Type অনুযায়ী বাইন্ড করা হয়। ডেটা আপডেট করার সময় স্বয়ংক্রিয়ভাবে চার্ট আপডেট হয়ে যায়, যা dynamic data visualization করতে সাহায্য করে।