Chart Control এবং Data Table Filtering হল এমন একটি প্রক্রিয়া যেখানে আপনি Google Charts API এর মাধ্যমে প্রদর্শিত ডেটা ফিল্টার বা নিয়ন্ত্রণ করতে পারেন। এর মাধ্যমে চার্টে কেবল নির্দিষ্ট ডেটা বা কলামগুলো প্রদর্শিত হতে পারে এবং ইউজারের জন্য ডেটা ভিজুয়ালাইজেশন আরও ইন্টারঅ্যাকটিভ এবং কার্যকরী হয়ে ওঠে।
এখানে আমরা Google Charts API এর মাধ্যমে Data Table Filtering এবং Chart Control কিভাবে ব্যবহার করা যায় তার একটি উদাহরণ দেখব।
প্রথমে একটি নতুন Angular প্রজেক্ট তৈরি করুন (যদি ইতিমধ্যে তৈরি থাকে, তবে সেটি ব্যবহার করতে পারেন):
ng new chart-control-filter-example
cd chart-control-filter-example
এখন angular-google-charts প্যাকেজটি ইন্সটল করতে হবে:
npm install angular-google-charts
এখন, আপনার অ্যাপ্লিকেশনে 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 { }
এখন, আমরা একটি Column Chart তৈরি করব এবং একটি ডেটা টেবিলের মাধ্যমে ফিল্টার করব। এটি একটি ইন্টারঅ্যাকটিভ চিত্র তৈরি করবে যেখানে ইউজার ডেটার কিছু অংশ দেখতে বা ফিল্টার করতে পারবেন।
app.component.ts ফাইল:import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'Chart Control and Data Table Filter';
chartType = 'ColumnChart'; // Chart Type
// Initial Chart Data
chartData = [
['City', '2010', '2020'],
['New York', 8175133, 8398748],
['Los Angeles', 3792621, 3990456],
['Chicago', 2695598, 2705994],
['Houston', 2129784, 2296224],
['Phoenix', 1445632, 1680992]
]; // Chart Data
chartOptions = {
title: 'City Population Comparison',
hAxis: { title: 'City' },
vAxis: { title: 'Population' },
legend: { position: 'top' }
};
// Filtered Data
filteredData: any;
constructor() {}
ngOnInit(): void {
// Initially setting filtered data to show all data
this.filteredData = this.chartData;
}
// Function to filter the data based on selected year
filterData(year: string) {
const yearIndex = year === '2010' ? 1 : 2;
this.filteredData = this.chartData.filter((row, index) => {
if (index === 0) return true; // Keep the header row
return row[yearIndex] > 2500000; // Filter cities with population greater than 2.5M
});
}
}
app.component.html ফাইল:<h1>{{ title }}</h1>
<!-- Filter Options -->
<select (change)="filterData($event.target.value)">
<option value="2010">2010 Population</option>
<option value="2020">2020 Population</option>
</select>
<!-- Google Chart Component -->
<google-chart
[type]="chartType"
[data]="filteredData"
[options]="chartOptions">
</google-chart>
এছাড়া, আপনি Chart Control ব্যবহার করে চার্টের অন্যান্য নিয়ন্ত্রণও যুক্ত করতে পারেন, যেমন:
এগুলো সাধারণত Google Charts API তে যুক্ত করা যায় সহজেই। উদাহরণস্বরূপ:
chartOptions = {
selectionMode: 'single', // Allows users to select one data point
tooltip: {
trigger: 'selection' // Tooltip shows when a user selects a data point
}
};
এটি চার্টের সাথে আরও Interactive কন্ট্রোল যোগ করবে।
Chart Control এবং Data Table Filtering ব্যবহার করে আপনি চার্টের ডেটা কাস্টমাইজ এবং নিয়ন্ত্রণ করতে পারেন। 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
