Google Charts একটি শক্তিশালী JavaScript লাইব্রেরি যা ডেটা ভিজুয়ালাইজেশনের জন্য ব্যবহৃত হয়। Angular অ্যাপ্লিকেশনে Google Charts ব্যবহার করতে angular-google-charts লাইব্রেরি ইন্সটল করা হয়। নিচে Angular প্রজেক্টে angular-google-charts লাইব্রেরি ইন্সটল এবং কনফিগার করার ধাপগুলো বিস্তারিতভাবে আলোচনা করা হলো।
Step 1: Angular প্রজেক্ট তৈরি বা নির্বাচন
প্রথমে একটি Angular প্রজেক্ট তৈরি করুন, যদি আপনার কাছে পূর্বের কোনো প্রজেক্ট থাকে, তাহলে সেটি ব্যবহার করতে পারেন।
- নতুন প্রজেক্ট তৈরি করতে:
ng new google-charts-angular
cd google-charts-angular
Step 2: angular-google-charts ইন্সটল করা
Google Charts এর জন্য Angular wrapper angular-google-charts লাইব্রেরি ইন্সটল করতে নিচের কমান্ডটি ব্যবহার করুন:
npm install angular-google-charts
এই কমান্ডটি চলানোর পর angular-google-charts লাইব্রেরি আপনার প্রজেক্টের node_modules ফোল্ডারে ইন্সটল হয়ে যাবে।
Step 3: GoogleChartsModule ইমপোর্ট করা
এখন GoogleChartsModule আপনার অ্যাপ্লিকেশনে ব্যবহার করার জন্য মডিউল ফাইলে ইমপোর্ট করতে হবে।
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 Chart ব্যবহার করা
এখন আপনি আপনার কম্পোনেন্টে Google Chart ব্যবহার করতে পারবেন। উদাহরণস্বরূপ, app.component.ts ফাইলে Google Chart এর জন্য ডেটা এবং অপশন সেট করুন।
app.component.ts ফাইল:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular Google Charts Demo';
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,
width: 600,
height: 400
}; // চার্টের অপশন
}
app.component.html ফাইল:
<h1>{{ title }}</h1>
<!-- Google Chart কম্পোনেন্ট -->
<google-chart
[type]="chartType"
[data]="chartData"
[options]="chartOptions">
</google-chart>
Step 5: অ্যাপ রান করা
এখন অ্যাপ রান করতে নিচের কমান্ডটি ব্যবহার করুন:
ng serve
এটি ডিফল্টভাবে অ্যাপ্লিকেশনটি http://localhost:4200 এ রান করবে। ব্রাউজারে গিয়ে আপনি আপনার Google Chart দেখতে পারবেন।
সারাংশ
angular-google-charts লাইব্রেরি ইন্সটল এবং কনফিগার করার মাধ্যমে Angular অ্যাপ্লিকেশনে Google Charts ব্যবহার করা সম্ভব হয়। এটি সহজেই চার্টের টাইপ, ডেটা এবং অপশন কাস্টমাইজ করার সুযোগ দেয়। এই লাইব্রেরি ব্যবহার করে আপনি সহজেই ডেটা ভিজুয়ালাইজেশন তৈরি করতে পারবেন।
Read more
