Angular অ্যাপ্লিকেশনে Google Charts ইন্টিগ্রেট করার জন্য angular-google-charts লাইব্রেরি ব্যবহার করা হয়। এটি Angular-এ Google Charts API এর মাধ্যমে ডেটা ভিজুয়ালাইজেশন সহজে তৈরি করতে সহায়তা করে। নিচে ধাপে ধাপে Google Charts কনফিগার করার প্রক্রিয়া বর্ণনা করা হলো।

Step 1: Angular প্রজেক্ট তৈরি করা

প্রথমে একটি নতুন Angular প্রজেক্ট তৈরি করুন অথবা যদি আপনার একটি প্রজেক্ট থাকে, তবে সেটি ব্যবহার করতে পারেন।

• নতুন প্রজেক্ট তৈরি করতে:

ng new google-charts-angular
cd google-charts-angular

Step 2: angular-google-charts লাইব্রেরি ইন্সটল করা

Google Charts লাইব্রেরি Angular অ্যাপে ব্যবহার করার জন্য angular-google-charts প্যাকেজটি ইন্সটল করতে হবে। এটি করতে:

npm install angular-google-charts

এটি ইন্সটল হওয়ার পর angular-google-charts আপনার node_modules ফোল্ডারে যুক্ত হয়ে যাবে।

Step 3: GoogleChartsModule ইমপোর্ট করা

এখন, GoogleChartsModule কে Angular অ্যাপ্লিকেশনে ইমপোর্ট করতে হবে। এর জন্য app.module.ts ফাইলে নিম্নলিখিত কোডটি যোগ করুন:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { GoogleChartsModule } from 'angular-google-charts'; // GoogleChartsModule ইমপোর্ট করুন

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    GoogleChartsModule // এখানে GoogleChartsModule যোগ করুন
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 4: কম্পোনেন্টে Google Charts ব্যবহার করা

এখন আপনি আপনার Angular কম্পোনেন্টে Google Charts ব্যবহার করতে পারেন। চলুন একটি পাই চার্টের উদাহরণ দেখি।

4.1. 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 with Angular';

  chartType = 'PieChart'; // চার্টের ধরন
  chartData = [
    ['Task', 'Hours per Day'],
    ['Work', 8],
    ['Eat', 2],
    ['Commute', 2],
    ['Watch TV', 2],
    ['Sleep', 8]
  ]; // চার্টের ডেটা
  chartOptions = {
    title: 'My Daily Activities',
    pieHole: 0.4,  // Doughnut চার্টের জন্য
    width: 600,
    height: 400
  }; // চার্টের অপশন
}

4.2. app.component.html ফাইল:

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

<!-- Google Chart কম্পোনেন্ট -->
<google-chart 
  [type]="chartType" 
  [data]="chartData" 
  [options]="chartOptions">
</google-chart>

এখানে, আমরা একটি Pie Chart ব্যবহার করেছি, তবে আপনি আপনার প্রয়োজন অনুযায়ী Bar Chart, Line Chart, Column Chart, ইত্যাদি ব্যবহার করতে পারেন।

Step 5: অ্যাপ্লিকেশন রান করা

এখন, Angular অ্যাপ্লিকেশন চালানোর জন্য নিচের কমান্ডটি ব্যবহার করুন:

ng serve

এটি ডিফল্টভাবে অ্যাপ্লিকেশনটি http://localhost:4200 এ রান করবে। ব্রাউজারে গিয়ে আপনি আপনার Google Chart দেখতে পারবেন।

কাস্টমাইজেশন

Google Charts-এর অপশনগুলি ব্যবহার করে আপনি চার্ট কাস্টমাইজ করতে পারেন:

1. Chart Type:

চার্টের ধরন নির্ধারণ করুন, যেমন 'PieChart', 'BarChart', 'LineChart' ইত্যাদি।

2. Chart Data:

ডেটার পরিবর্তন করতে chartData অবজেক্টটি কাস্টমাইজ করুন। উদাহরণস্বরূপ:

chartData = [
  ['City', 'Population'],
  ['New York', 8175133],
  ['Los Angeles', 3792621],
  ['Chicago', 2695598]
];

3. Chart Options:

Chart এর অপশন কাস্টমাইজ করতে chartOptions ব্যবহার করুন। কিছু জনপ্রিয় অপশন:

• title: চার্টের টাইটেল।
• pieHole: ডোঘনাট চার্টের জন্য গর্ত তৈরি করে (Pie chart).
• width এবং height: চার্টের সাইজ নির্ধারণ।
• is3D: 3D চার্ট ব্যবহার করার জন্য।

chartOptions = {
  title: 'City Population',
  is3D: true,
  colors: ['#4285F4', '#DB4437', '#0F9D58'],
  legend: { position: 'top' }
};

সারাংশ

Angular এর মাধ্যমে Google Charts কনফিগার করার জন্য angular-google-charts লাইব্রেরি ইন্সটল করা হয়, যা Google Charts API কে Angular অ্যাপ্লিকেশনে ব্যবহারের সুবিধা প্রদান করে। আপনি সহজেই বিভিন্ন ধরনের চার্ট তৈরি করতে পারেন এবং ডেটা, অপশন এবং কাস্টমাইজেশন দিয়ে তা নিয়ন্ত্রণ করতে পারেন। Google Charts এর সাহায্যে আপনি ইন্টারঅ্যাকটিভ, ডাইনামিক এবং আকর্ষণীয় ডেটা ভিজুয়ালাইজেশন তৈরি করতে পারবেন।