Google Charts API-তে Combo Chart এবং Dashboard Chart দুটি খুবই শক্তিশালী টুল যা আপনাকে ডেটা ভিজুয়ালাইজেশনে বিভিন্ন মাত্রা এবং গভীরতা যোগ করার সুযোগ দেয়।

এখানে, আমরা Combo Chart এবং Dashboard Chart নিয়ে আলোচনা করব এবং কিভাবে আপনি Angular অ্যাপ্লিকেশনে এই চার্টগুলি ব্যবহার করতে পারেন তা দেখাবো।

Combo Chart (কম্বো চার্ট)

Combo Chart একাধিক চার্টের সংমিশ্রণ হতে পারে, যেমন বার (Bar) এবং লাইন (Line) চার্ট একসাথে ব্যবহার করা। এটি এমন পরিস্থিতিতে উপকারী, যেখানে আপনি একাধিক ভেরিয়েবলের মধ্যে সম্পর্ক এবং ট্রেন্ড দেখতে চান।

Combo Chart তৈরি করার ধাপ:

ধরা যাক, আমাদের একটি Combo 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 = 'Combo Chart Example';

  chartType = 'ComboChart';  // Chart Type: ComboChart
  chartData = [
    ['Month', 'Sales', 'Expenses'],
    ['Jan', 1000, 400],
    ['Feb', 1170, 460],
    ['Mar', 660, 1120],
    ['Apr', 1030, 540]
  ];  // Data for combo chart

  chartOptions = {
    title: 'Sales and Expenses',
    vAxis: { title: 'Amount' },
    hAxis: { title: 'Month' },
    seriesType: 'bars',  // Set default series type as bar
    series: { 1: { type: 'line' } }  // Set second series (Expenses) as line
  };
}

app.component.html:

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

<!-- Google Combo Chart -->
<google-chart 
  [type]="chartType" 
  [data]="chartData" 
  [options]="chartOptions">
</google-chart>

এখানে কী হচ্ছে:

• chartType এ 'ComboChart' ব্যবহার করা হয়েছে, যা বার এবং লাইন চার্টের সংমিশ্রণ।
• chartData তে আমরা Sales এবং Expenses এর ডেটা রেখেছি।
• chartOptions এ seriesType: 'bars' সেট করা হয়েছে, যা প্রথম সিরিজকে বার চার্ট হিসেবে দেখাবে, এবং series: { 1: { type: 'line' } } দিয়ে দ্বিতীয় সিরিজ (Expenses) কে লাইন চার্ট হিসেবে রেন্ডার করার নির্দেশ দেওয়া হয়েছে।

Dashboard Chart (ড্যাশবোর্ড চার্ট)

Dashboard Chart হল একাধিক চার্টের একটি সমন্বয়, যা একটি একক ড্যাশবোর্ডে একযোগে প্রদর্শিত হয়। এটি খুবই উপকারী যখন আপনি বিভিন্ন ডেটা পয়েন্টকে একসাথে পর্যবেক্ষণ করতে চান।

Google Charts API তে Dashboard তৈরি করার জন্য আপনাকে একটি Dashboard কম্পোনেন্ট এবং একাধিক চার্ট একত্রে ব্যবহার করতে হবে।

Dashboard Chart তৈরি করার ধাপ:

ধরা যাক, আমরা দুটি চার্ট (পাই চার্ট এবং বার চার্ট) একসাথে একটি ড্যাশবোর্ডে প্রদর্শন করতে চাই।

app.component.ts:

import { Component, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  title = 'Dashboard Chart Example';

  chartData1 = [
    ['Task', 'Hours per Day'],
    ['Work', 8],
    ['Eat', 2],
    ['Commute', 2],
    ['Watch TV', 2],
    ['Sleep', 8]
  ];  // Pie Chart Data

  chartOptions1 = {
    title: 'My Daily Activities',
    pieHole: 0.4,
    width: '100%',
    height: 300
  };

  chartData2 = [
    ['Month', 'Sales'],
    ['Jan', 1000],
    ['Feb', 1170],
    ['Mar', 660],
    ['Apr', 1030]
  ];  // Bar Chart Data

  chartOptions2 = {
    title: 'Sales per Month',
    vAxis: { title: 'Amount' },
    hAxis: { title: 'Month' },
    width: '100%',
    height: 300
  };

  constructor() {}

  ngAfterViewInit() {
    // Initialize Google Dashboard and Charts
    google.charts.load('current', {
      packages: ['corechart', 'dashboard']
    });
    google.charts.setOnLoadCallback(this.drawDashboard.bind(this));
  }

  drawDashboard() {
    const dashboard = new google.visualization.Dashboard(
      document.getElementById('dashboard_div')
    );

    const pieChart = new google.visualization.PieChart(
      document.getElementById('piechart_div')
    );
    const barChart = new google.visualization.BarChart(
      document.getElementById('barchart_div')
    );

    dashboard.bind([], [pieChart, barChart]);

    pieChart.draw(google.visualization.arrayToDataTable(this.chartData1), this.chartOptions1);
    barChart.draw(google.visualization.arrayToDataTable(this.chartData2), this.chartOptions2);
  }
}

app.component.html:

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

<!-- Dashboard Container -->
<div id="dashboard_div">
  <!-- Pie Chart -->
  <div id="piechart_div"></div>

  <!-- Bar Chart -->
  <div id="barchart_div"></div>
</div>

এখানে কী হচ্ছে:

• google.charts.load দ্বারা আমরা corechart এবং dashboard প্যাকেজ লোড করেছি।
• google.visualization.Dashboard ব্যবহার করে দুটি চার্ট (Pie Chart এবং Bar Chart) একসাথে এক ড্যাশবোর্ডে রেন্ডার করা হয়েছে।
• dashboard.bind দিয়ে দুটি চার্টের মধ্যে সম্পর্ক স্থাপন করা হয়েছে এবং তারপর draw ফাংশন দিয়ে চার্ট দুটি রেন্ডার করা হয়েছে।

Combo এবং Dashboard Chart এর সুবিধা

সারাংশ

Combo Chart এবং Dashboard Chart হল দুইটি শক্তিশালী টুল যা Google Charts API তে উপলব্ধ। Combo Chart একাধিক চার্টের সংমিশ্রণ প্রদান করে এবং Dashboard Chart একাধিক চার্ট বা গ্রাফকে একসাথে একটি ড্যাশবোর্ডে প্রদর্শন করে। এই চার্টগুলি ডেটা ভিজুয়ালাইজেশনের জন্য অত্যন্ত কার্যকরী এবং অনেক পরিস্থিতিতে ব্যবহৃত হতে পারে, যেমন ডেটার বিভিন্ন দিক বিশ্লেষণ বা একসাথে অনেক ডেটা প্রদর্শন করা। Angular অ্যাপ্লিকেশনে এই চার্টগুলি খুব সহজেই ইন্টিগ্রেট করা সম্ভব এবং ব্যবহারকারী-বান্ধব ইন্টারফেস তৈরি করা যায়।

Combo Chart (কম্বো চার্ট) একাধিক চার্টের সংমিশ্রণ হতে পারে, যেমন একটি চার্টে Bar Chart এবং অন্যটিতে Line Chart একত্রে প্রদর্শন করা হয়। এটি খুবই উপকারী যখন আপনি একাধিক ভেরিয়েবলের মধ্যে সম্পর্ক এবং ট্রেন্ড দেখতে চান। Google Charts API তে Combo Chart তৈরি করা এবং বিভিন্ন Data Series যুক্ত করা খুবই সহজ।

এখানে, আমরা দেখব কিভাবে একটি Combo Chart তৈরি করা হয় এবং একাধিক Data Series যুক্ত করা হয়।

Step 1: Angular প্রজেক্ট এবং লাইব্রেরি ইন্সটল করা

প্রথমে, angular-google-charts লাইব্রেরি ইন্সটল করুন যদি আপনি ইতিমধ্যে এটি ইন্সটল না করে থাকেন:

npm install angular-google-charts

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

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

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

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 3: Combo Chart তৈরি এবং Data Series যুক্ত করা

এখন আমরা একটি Combo Chart তৈরি করব, যেখানে একটি সিরিজ হবে Bar Chart এবং অন্য সিরিজ হবে Line 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 = 'Combo Chart with Multiple Data Series';

  chartType = 'ComboChart';  // Chart Type: ComboChart
  chartData = [
    ['Month', 'Sales', 'Expenses'],
    ['Jan', 1000, 400],
    ['Feb', 1170, 460],
    ['Mar', 660, 1120],
    ['Apr', 1030, 540]
  ];  // Data for combo chart

  chartOptions = {
    title: 'Sales and Expenses Comparison',
    vAxis: { title: 'Amount' },
    hAxis: { title: 'Month' },
    seriesType: 'bars',  // Set default series type as bar chart
    series: { 1: { type: 'line' } }  // Set second series (Expenses) as line chart
  };
}

app.component.html ফাইল:

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

<!-- Google Combo Chart -->
<google-chart 
  [type]="chartType" 
  [data]="chartData" 
  [options]="chartOptions">
</google-chart>

ব্যাখ্যা:

• chartType এ 'ComboChart' ব্যবহার করা হয়েছে, যাতে একাধিক সিরিজ প্রদর্শন করা যায়।
• chartData তে দুটি ডেটা সিরিজ প্রদান করা হয়েছে: Sales এবং Expenses।
• chartOptions এ:
  • seriesType: 'bars' সেট করা হয়েছে, যাতে প্রথম সিরিজ (Sales) বার চার্ট হিসেবে প্রদর্শিত হয়।
  • series: { 1: { type: 'line' } } দ্বারা দ্বিতীয় সিরিজ (Expenses) কে Line Chart হিসেবে প্রদর্শন করা হচ্ছে।

Step 4: Combo Chart কাস্টমাইজেশন

এখন আপনি বিভিন্ন data series যোগ করতে এবং অন্যান্য কাস্টমাইজেশন অপশন ব্যবহার করতে পারেন। উদাহরণস্বরূপ, আপনি একাধিক সিরিজ তৈরি করতে পারেন, যেমন Bar এবং Line সিরিজ, অথবা একাধিক Line Series।

Data Series কাস্টমাইজেশন উদাহরণ:

chartOptions = {
  title: 'Sales and Expenses Comparison',
  vAxis: { title: 'Amount' },
  hAxis: { title: 'Month' },
  seriesType: 'bars', // Default series type
  series: {
    0: { type: 'line', color: 'blue' },  // First series (Sales) as Line
    1: { type: 'bars', color: 'green' }  // Second series (Expenses) as Bar
  }
};

এখানে, আমরা দুটি সিরিজ যোগ করেছি:

• প্রথম সিরিজ (Sales) Line Chart হিসেবে এবং এর রঙ blue সেট করেছি।
• দ্বিতীয় সিরিজ (Expenses) Bar Chart হিসেবে এবং এর রঙ green সেট করেছি।

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

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

ng serve

এটি ডিফল্টভাবে অ্যাপ্লিকেশনটি http://localhost:4200 এ রান করবে। আপনার ব্রাউজারে গিয়ে আপনি Combo Chart দেখতে পাবেন, যেখানে দুটি ভিন্ন ধরনের সিরিজ (Bar এবং Line) একসাথে প্রদর্শিত হবে।

Combo Chart এ আরও Data Series যোগ করা

এখন আপনি Combo Chart এ আরও Data Series যোগ করতে পারেন, যেমন একটি Stacked Bar Chart বা Area Chart সিরিজ। এটি সহজেই seriesType এবং series কাস্টমাইজেশন দিয়ে করা যায়।

উদাহরণ: আরও Data Series যোগ করা

chartData = [
  ['Month', 'Sales', 'Expenses', 'Profit'],
  ['Jan', 1000, 400, 600],
  ['Feb', 1170, 460, 710],
  ['Mar', 660, 1120, -460],
  ['Apr', 1030, 540, 490]
];

chartOptions = {
  title: 'Sales, Expenses and Profit Comparison',
  vAxis: { title: 'Amount' },
  hAxis: { title: 'Month' },
  seriesType: 'bars',
  series: {
    0: { type: 'line', color: 'blue' },  // Sales as line chart
    1: { type: 'bars', color: 'green' }, // Expenses as bar chart
    2: { type: 'area', color: 'red' }    // Profit as area chart
  }
};

এখানে, আমরা Profit সিরিজটি একটি Area Chart হিসেবে যোগ করেছি, এবং এটি Sales (line chart) এবং Expenses (bar chart) সিরিজের সাথে একটি Combo Chart তৈরি করেছে।

সারাংশ

Combo Chart একটি শক্তিশালী ভিজুয়াল টুল যা একাধিক চার্টের সংমিশ্রণ প্রদান করে। Google Charts API ব্যবহার করে আপনি সহজেই বিভিন্ন Data Series যোগ করতে পারেন, যেমন Bar, Line, এবং Area Chart। এই ফিচারটির সাহায্যে আপনি বিভিন্ন ভেরিয়েবলের মধ্যে সম্পর্ক এবং ট্রেন্ড দেখতে পারেন এবং আপনার ডেটা ভিজুয়ালাইজেশনকে আরও ইন্টারঅ্যাকটিভ ও কার্যকরী করতে পারেন। Angular অ্যাপ্লিকেশনে Combo Chart ব্যবহার করা খুবই সহজ এবং কাস্টমাইজেশন অপশন দিয়ে আপনি আপনার প্রয়োজন অনুযায়ী এটি তৈরি করতে পারেন।

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

এখানে আমরা Angular অ্যাপ্লিকেশন তৈরি করব এবং তাতে একাধিক Google Charts (যেমন Pie Chart, Bar Chart, Line Chart) একত্রে প্রদর্শন করব।

Step-by-Step: Dashboard তৈরি এবং একাধিক চার্ট একত্রে প্রদর্শন করা

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

প্রথমে একটি নতুন Angular প্রজেক্ট তৈরি করুন:

ng new dashboard-app
cd dashboard-app

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

এখন, angular-google-charts লাইব্রেরি ইন্সটল করতে হবে:

npm install angular-google-charts

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: Dashboard UI তৈরি করা

এখন, আমরা একটি Dashboard তৈরি করব যেখানে একাধিক চার্ট একত্রে প্রদর্শিত হবে। এখানে আমরা একটি Pie Chart, Bar Chart, এবং Line 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 = 'Google Charts Dashboard';

  // Pie Chart 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,
    width: 400,
    height: 400
  };

  // Bar Chart Data
  barChartType = 'BarChart';
  barChartData = [
    ['City', '2010 Population', '2011 Population'],
    ['New York', 8175133, 8269190],
    ['Los Angeles', 3792621, 3792621],
    ['Chicago', 2695598, 2695598],
    ['Houston', 2129784, 2296224]
  ];
  barChartOptions = {
    chart: {
      title: 'City Population',
      subtitle: 'Population of major US cities',
    },
  };

  // Line Chart Data
  lineChartType = 'LineChart';
  lineChartData = [
    ['Year', 'Sales', 'Expenses'],
    ['2010', 1000, 400],
    ['2011', 1170, 460],
    ['2012', 660, 1120],
    ['2013', 1030, 540]
  ];
  lineChartOptions = {
    title: 'Company Performance',
    hAxis: { title: 'Year' },
    vAxis: { title: 'Amount' },
  };
}

app.component.html ফাইল:

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

<!-- Dashboard Layout -->
<div class="dashboard-container">
  <!-- Pie Chart -->
  <div class="chart-container">
    <h2>Pie Chart</h2>
    <google-chart 
      [type]="pieChartType" 
      [data]="pieChartData" 
      [options]="pieChartOptions">
    </google-chart>
  </div>

  <!-- Bar Chart -->
  <div class="chart-container">
    <h2>Bar Chart</h2>
    <google-chart 
      [type]="barChartType" 
      [data]="barChartData" 
      [options]="barChartOptions">
    </google-chart>
  </div>

  <!-- Line Chart -->
  <div class="chart-container">
    <h2>Line Chart</h2>
    <google-chart 
      [type]="lineChartType" 
      [data]="lineChartData" 
      [options]="lineChartOptions">
    </google-chart>
  </div>
</div>

app.component.css ফাইল:

/* Dashboard layout styling */
.dashboard-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 3 columns layout */
  gap: 20px;
  margin-top: 20px;
}

.chart-container {
  border: 1px solid #ddd;
  padding: 20px;
  border-radius: 8px;
  background-color: #f9f9f9;
  text-align: center;
}

h2 {
  margin-bottom: 10px;
}

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

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

ng serve

এটি ডিফল্টভাবে অ্যাপ্লিকেশনটি http://localhost:4200 এ রান করবে। আপনি ব্রাউজারে গিয়ে ড্যাশবোর্ড দেখতে পারবেন যেখানে একাধিক চার্ট (Pie Chart, Bar Chart, Line Chart) একত্রে প্রদর্শিত হবে।

Responsive Dashboard

রেসপন্সিভ ডিজাইন নিশ্চিত করতে CSS গ্রিড এবং মিডিয়া কুয়েরি ব্যবহার করা যেতে পারে। আপনি যদি নিশ্চিত করতে চান যে চার্টগুলি ছোট পর্দায় সুন্দরভাবে প্রদর্শিত হবে, তাহলে আপনি CSS Grid বা Flexbox ব্যবহার করতে পারেন।

.dashboard-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Makes it responsive */
  gap: 20px;
}

এটি auto-fill এবং minmax ব্যবহার করে গ্রিডের কলাম সংখ্যা এবং আকার ডাইনামিকভাবে পরিবর্তন করবে, যাতে ছোট স্ক্রীনে চার্টগুলো সুন্দরভাবে ফিট হয়।

সারাংশ

এই উদাহরণে, আমরা Google Charts এবং Angular ব্যবহার করে একটি Dashboard তৈরি করেছি যেখানে একাধিক চার্ট (Pie Chart, Bar Chart, Line Chart) একত্রে প্রদর্শিত হয়েছে। আমরা CSS Grid ব্যবহার করে ড্যাশবোর্ডের লেআউট তৈরি করেছি এবং প্রতিটি চার্টের জন্য আলাদা কাস্টম অপশন ব্যবহার করেছি। এই ধরনের ড্যাশবোর্ড খুবই কার্যকরী যখন একাধিক ডেটা ভিজুয়ালাইজেশন একত্রে প্রদর্শন করতে হয়।

Chart Control এবং Data Table Filtering হল এমন একটি প্রক্রিয়া যেখানে আপনি Google Charts API এর মাধ্যমে প্রদর্শিত ডেটা ফিল্টার বা নিয়ন্ত্রণ করতে পারেন। এর মাধ্যমে চার্টে কেবল নির্দিষ্ট ডেটা বা কলামগুলো প্রদর্শিত হতে পারে এবং ইউজারের জন্য ডেটা ভিজুয়ালাইজেশন আরও ইন্টারঅ্যাকটিভ এবং কার্যকরী হয়ে ওঠে।

এখানে আমরা Google Charts API এর মাধ্যমে Data Table Filtering এবং Chart Control কিভাবে ব্যবহার করা যায় তার একটি উদাহরণ দেখব।

Chart Control এবং Data Table Filtering এর উদাহরণ

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

প্রথমে একটি নতুন Angular প্রজেক্ট তৈরি করুন (যদি ইতিমধ্যে তৈরি থাকে, তবে সেটি ব্যবহার করতে পারেন):

ng new chart-control-filter-example
cd chart-control-filter-example

Step 2: Google Charts লাইব্রেরি ইন্সটল করা

এখন angular-google-charts প্যাকেজটি ইন্সটল করতে হবে:

npm install angular-google-charts

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: Data Table Filter এবং Chart Control সেটআপ

এখন, আমরা একটি 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>

ব্যাখ্যা:

1. chartData:
   এটি চার্টের মূল ডেটা যা শহরের জনসংখ্যা (২০১০ এবং ২০২০) দেখাচ্ছে। প্রথমে সব ডেটা দেখানো হবে, তবে ইউজার যদি কোনো নির্দিষ্ট বছর নির্বাচন করে, তখন আমরা filterData() ফাংশনের মাধ্যমে ডেটা ফিল্টার করব।
2. filterData(year):
   এটি একটি ফাংশন যা বছর অনুযায়ী ফিল্টার করবে। যদি 2010 নির্বাচন করা হয়, তবে 2010 বছরটির ডেটার উপর ভিত্তি করে ফিল্টার হবে, আর যদি 2020 বছর নির্বাচন করা হয়, তবে 2020 বছরটির ডেটা ফিল্টার হবে।
3. filteredData:
   এই ভেরিয়েবলটি ফিল্টার করা ডেটা ধারণ করে, যা Google Chart কম্পোনেন্টে প্রদর্শিত হবে।
4. chartOptions:
   এখানে চার্টের টাইটেল, অক্ষ এবং লেজেন্ড কাস্টমাইজ করা হয়েছে।
5. UI Control (Dropdown):
   ড্রপডাউন মেনুর মাধ্যমে ইউজার 2010 বা 2020 বছর নির্বাচন করতে পারে, এবং সেই অনুযায়ী চার্টের ডেটা ফিল্টার হবে।

Chart Control Implementation

এছাড়া, আপনি Chart Control ব্যবহার করে চার্টের অন্যান্য নিয়ন্ত্রণও যুক্ত করতে পারেন, যেমন:

• Zoom In/Out
• Data Points Selection
• Interactive Legends (যেখানে ইউজার লেজেন্ড ক্লিক করলে নির্দিষ্ট ডেটা বা সেগমেন্ট দেখা যাবে)

এগুলো সাধারণত 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 ব্যবহার করে, আপনি ডেটাকে ফিল্টার করতে পারেন এবং ইউজারের ইন্টারঅ্যাকশনের মাধ্যমে চার্ট কাস্টমাইজেশন করতে পারেন। এটি চার্টের ব্যবহারকারীর অভিজ্ঞতা আরও ইন্টারঅ্যাকটিভ এবং কার্যকরী করে তোলে।

Real-time data visualization একটি গুরুত্বপূর্ণ উপাদান, যা ডেটা পরিবর্তন হওয়ার সাথে সাথে তা গ্রাফিক্যালি উপস্থাপন করে। এটি বিভিন্ন ক্ষেত্র যেমন ব্যবসা, অর্থনীতি, স্বাস্থ্যসেবা, এবং প্রযুক্তি ক্ষেত্রে ডেটার অবস্থান এবং প্রবণতা অনুসরণ করতে সহায়ক। Dashboard একটি ইন্টারফেস সরবরাহ করে যা ব্যবহারকারীদের একাধিক চার্ট এবং গ্রাফের মাধ্যমে ডেটার প্রতি মুহূর্তের আপডেট দেখতে সাহায্য করে।

এই প্রক্রিয়া Google Charts ব্যবহার করে Angular অ্যাপ্লিকেশনে বাস্তবায়ন করা যেতে পারে। এখানে আমরা দেখব কিভাবে Angular এর মাধ্যমে একটি real-time data dashboard তৈরি করা যায়।

Real-Time Data Visualization: গুরুত্বপূর্ণ ধারণা

• Real-Time Data: এটি সেই ডেটা যা সঠিক মুহূর্তে পরিবর্তিত হয় এবং তাৎক্ষণিকভাবে প্রদর্শিত হয়।
• Dashboard: এটি একটি ইউজার ইন্টারফেস যা ডেটা, চার্ট, এবং গ্রাফের মাধ্যমে একটি সিস্টেমের অবস্থা বা পরিসংখ্যান উপস্থাপন করে।
• Data Binding: Angular এ ডেটা বাইনডিং ব্যবহার করে ডেটা অটোমেটিকভাবে UI এ আপডেট হয়।

Step-by-Step: Real-Time Data Dashboard with Google Charts in Angular

এখানে আমরা একটি real-time data dashboard তৈরি করব, যেখানে Google Charts ব্যবহার করে বিভিন্ন চার্টের মাধ্যমে ডেটা ভিজুয়ালাইজেশন করা হবে। আমরা একটি Pie Chart এবং Line Chart ব্যবহার করব, যা ডেটার পরিবর্তনের সাথে সাথে আপডেট হবে।

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

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

ng new realtime-dashboard
cd realtime-dashboard

Step 2: Install angular-google-charts

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

npm install angular-google-charts

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: Real-Time Data for Dashboard

এখন, app.component.ts ফাইলে ডেটা তৈরি করা হবে যা প্রতি মুহূর্তে পরিবর্তিত হবে। এখানে আমরা একটি সার্ভিস ব্যবহার করব যা প্রতি 5 সেকেন্ড পর পর ডেটা আপডেট করবে।

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 = 'Real-Time Dashboard';

  // Chart Type
  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: '100%',
    height: 400
  };

  lineChartType = 'LineChart';
  lineChartData = [
    ['2021-01-01', 10],
    ['2021-01-02', 15],
    ['2021-01-03', 12],
    ['2021-01-04', 17]
  ];

  lineChartOptions = {
    title: 'Monthly Sales',
    curveType: 'function',
    width: '100%',
    height: 400
  };

  ngOnInit() {
    setInterval(() => {
      this.updateData();
    }, 5000); // Update data every 5 seconds
  }

  // Function to update data for Pie Chart
  updateData() {
    // Randomize the data for demo purposes
    this.chartData = [
      ['Task', 'Hours per Day'],
      ['Work', Math.floor(Math.random() * 10)],
      ['Eat', Math.floor(Math.random() * 5)],
      ['Commute', Math.floor(Math.random() * 4)],
      ['Watch TV', Math.floor(Math.random() * 3)],
      ['Sleep', Math.floor(Math.random() * 9)]
    ];

    // Randomize the data for Line Chart
    const newData = [
      ['2021-01-05', Math.floor(Math.random() * 20)],
      ['2021-01-06', Math.floor(Math.random() * 20)],
      ['2021-01-07', Math.floor(Math.random() * 20)],
      ['2021-01-08', Math.floor(Math.random() * 20)]
    ];

    this.lineChartData = [...this.lineChartData, ...newData];
  }
}

• এখানে updateData ফাংশনটি প্রতি 5 সেকেন্ড পর পর ডেটা আপডেট করবে এবং নতুন মান যোগ করবে।
• Pie Chart এবং Line Chart এর ডেটা প্রতি 5 সেকেন্ডে পরিবর্তিত হবে, এটি real-time আপডেট দেখাবে।

Step 5: Dashboard Layout

এখন, app.component.html ফাইলে দুইটি চার্টের জন্য কন্টেইনার তৈরি করুন।

app.component.html ফাইল:

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

<div id="dashboard">
  <div class="chart-container">
    <h2>Daily Activities</h2>
    <google-chart 
      [type]="chartType" 
      [data]="chartData" 
      [options]="chartOptions">
    </google-chart>
  </div>

  <div class="chart-container">
    <h2>Sales Trend</h2>
    <google-chart 
      [type]="lineChartType" 
      [data]="lineChartData" 
      [options]="lineChartOptions">
    </google-chart>
  </div>
</div>

এখানে, দুইটি চার্ট - Pie Chart এবং Line Chart দুটি প্রদর্শিত হবে।

Step 6: CSS for Layout

এখন, app.component.css ফাইলে ড্যাশবোর্ডের জন্য সিম্পল লেআউট তৈরি করা হবে:

app.component.css ফাইল:

#dashboard {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.chart-container {
  width: 48%;
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .chart-container {
    width: 100%;
  }
}

এখানে, flexbox ব্যবহার করে চার্ট দুটি সমান্তরালে স্থাপন করা হয়েছে এবং media queries এর মাধ্যমে মোবাইল ডিভাইসের জন্য চার্টগুলো পুরোপুরি একসাথে দেখানোর ব্যবস্থা করা হয়েছে।

Step 7: Run the Application

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

ng serve

এটি http://localhost:4200 এ রান করবে, যেখানে আপনি real-time dashboard দেখতে পারবেন। এখানে Pie Chart এবং Line Chart প্রতি 5 সেকেন্ড পর পর ডেটা আপডেট করবে।

সারাংশ

Real-time Data Visualization-এর মাধ্যমে আপনি Angular অ্যাপে Google Charts ব্যবহার করে ড্যাশবোর্ড তৈরি করতে পারেন। Angular এর মাধ্যমে ডেটা আপডেট করা এবং Google Charts এর মাধ্যমে ডেটা ভিজুয়ালাইজেশন করা সহজ হয়। এই প্রক্রিয়াতে real-time data, dashboard layout, এবং data binding ব্যবহার করে একটি কার্যকরী এবং ইন্টারঅ্যাকটিভ ড্যাশবোর্ড তৈরি করা যায়।