Google Charts API ব্যবহার করে আপনি বিভিন্ন ধরনের চার্ট তৈরি করতে পারেন এবং ডেটা বাইন্ডিংয়ের মাধ্যমে চার্টে প্রদর্শিত তথ্য পরিচালনা করতে পারেন। এখানে আমরা Chart Type এবং Data Binding এর ভূমিকা এবং কিভাবে এগুলি ব্যবহার করতে হয় তা আলোচনা করব।
Google Charts API-এ Chart Type দ্বারা আপনি যে ধরনের চার্ট তৈরি করবেন তা নির্ধারণ করা হয়। বিভিন্ন ধরনের চার্ট বিভিন্ন প্রয়োজনে ব্যবহার করা হয়। এখানে কিছু জনপ্রিয় Chart Types দেওয়া হলো:
Pie Chart মূলত ডেটার একটি অংশের তুলনা দেখানোর জন্য ব্যবহৃত হয়। এটি সাধারণত শতাংশের ভিত্তিতে ডেটা দেখায়।
chartType = 'PieChart';
Bar Chart সাধারণত বিভিন্ন ক্যাটেগরি বা গ্রুপের মধ্যে তুলনা করতে ব্যবহৃত হয়, যেখানে প্রতিটি ক্যাটেগরি একটি বার দ্বারা উপস্থাপিত হয়।
chartType = 'BarChart';
Line Chart সাধারণত সময়ের সাথে ডেটার পরিবর্তন বা প্রবণতা প্রদর্শনের জন্য ব্যবহৃত হয়।
chartType = 'LineChart';
Column Chart Bar Chart এর মতো, তবে এটি প্রতিটি তুলনা কলামের আকারে প্রদর্শিত হয়।
chartType = 'ColumnChart';
Area Chart লাইন চার্টের মতো, তবে এখানে লাইনটির নিচের অংশ রঙিন থাকে এবং একটি ভলিউমের ধারণা দেয়।
chartType = 'AreaChart';
Combo Chart একাধিক চার্টের সংমিশ্রণ হতে পারে। যেমন একটি চার্টে বার এবং লাইন একসাথে প্রদর্শন করা হয়।
chartType = 'ComboChart';
Bubble Chart প্রতিটি ডেটা পয়েন্টকে একটি বুদ্বুদ দ্বারা উপস্থাপন করে, যেখানে বুদ্বুদটির আকার এবং রঙ অতিরিক্ত ডেটা বা পরিমাপ তুলে ধরে।
chartType = 'BubbleChart';
Gantt Chart প্রজেক্ট ম্যানেজমেন্ট এবং সময়সূচী প্রদর্শনের জন্য ব্যবহৃত হয়।
chartType = 'Gantt';
Data Binding একটি প্রক্রিয়া যা ডেটা এবং ইউআই (User Interface) এর মধ্যে যোগাযোগ তৈরি করে। Angular এর মাধ্যমে Google Charts এর ডেটা বাইন্ডিং খুবই সহজ। Google Charts API তে Data Binding এর মাধ্যমে আপনি ডেটা এবং চার্টের মধ্যে সম্পর্ক স্থাপন করতে পারেন। Angular এ ডেটা বাইন্ডিংয়ের মাধ্যমে ডেটা পরিবর্তন হলে তা চার্টে স্বয়ংক্রিয়ভাবে প্রতিফলিত হয়।
ধরা যাক, আমরা একটি Pie Chart তৈরি করছি, যেখানে ডেটা chartData অ্যারে থেকে আসে এবং আমাদের chartType এবং chartOptions কাস্টমাইজ করা থাকে।
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Google Charts with Data Binding';
// Chart Type
chartType = 'PieChart';
// Chart Data (ডেটা বাইন্ডিং)
chartData = [
['Task', 'Hours per Day'],
['Work', 8],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 8]
];
// Chart Options (কাস্টম অপশন)
chartOptions = {
title: 'My Daily Activities',
pieHole: 0.4, // Doughnut style
width: 600,
height: 400
};
// ডেটা পরিবর্তন করার ফাংশন
updateChartData() {
this.chartData = [
['Task', 'Hours per Day'],
['Work', 6],
['Eat', 3],
['Commute', 2],
['Watch TV', 1],
['Sleep', 12]
];
}
}
<h1>{{ title }}</h1>
<!-- Google Chart কম্পোনেন্ট -->
<google-chart
[type]="chartType"
[data]="chartData"
[options]="chartOptions">
</google-chart>
<!-- একটি বাটন যা ডেটা আপডেট করবে -->
<button (click)="updateChartData()">Update Chart Data</button>
এখানে, chartData হচ্ছে যে ডেটা চার্টে প্রদর্শিত হবে, এবং chartType ও chartOptions হচ্ছে চার্টের কাস্টমাইজেশন।
যখন updateChartData() ফাংশনটি কল করা হবে, তখন chartData অ্যারে পরিবর্তন হবে এবং নতুন ডেটা চার্টে স্বয়ংক্রিয়ভাবে প্রদর্শিত হবে।
One-way Data Binding: ডেটা শুধুমাত্র একদিকে প্রবাহিত হয় (যেমন: কম্পোনেন্ট থেকে টেমপ্লেটে)।
উদাহরণ:
<h1>{{ title }}</h1>
Two-way Data Binding: ডেটা দুটি দিকে প্রবাহিত হয় (কম্পোনেন্ট থেকে টেমপ্লেটে এবং টেমপ্লেট থেকে কম্পোনেন্টে)।
উদাহরণ:
<input [(ngModel)]="title">
Angular তে ডেটা বাইন্ডিংয়ের মাধ্যমে আপনি ডেটা পরিবর্তন করে তা সোজা চার্টে রিফ্লেক্ট করতে পারেন। যেমন একটি বোতাম ক্লিকের মাধ্যমে ডেটা পরিবর্তন করা:
updateChartData() {
this.chartData = [
['Task', 'Hours per Day'],
['Work', 6],
['Eat', 3],
['Commute', 2],
['Watch TV', 1],
['Sleep', 12]
];
}
এটি করলে, Pie Chart-এ স্বয়ংক্রিয়ভাবে নতুন ডেটা প্রদর্শিত হবে।
Chart Type এবং Data Binding এর মাধ্যমে আপনি Google Charts API তে বিভিন্ন ধরনের চার্ট তৈরি করতে পারেন এবং ডেটাকে সহজেই পরিবর্তন করে তা চার্টে প্রতিফলিত করতে পারেন। Angular এর ডেটা বাইন্ডিংয়ের মাধ্যমে আপনি কম্পোনেন্টের ডেটা পরিবর্তন করলে তা স্বয়ংক্রিয়ভাবে টেমপ্লেটে এবং চার্টে প্রদর্শিত হয়। এটি ডেটা ভিজুয়ালাইজেশনের জন্য অত্যন্ত কার্যকরী এবং ইন্টারঅ্যাকটিভ উপায়।
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
