Real-Time Data Update এর জন্য Chart Refresh করা

Web Development - অ্যাঙ্গুলার গুগল চার্ট (Angular Google Charts) - Dynamic Data Binding (ডাইনামিক ডেটা বাইন্ডিং) |

Google Charts API ব্যবহার করে আপনি রিয়েল-টাইম ডেটা আপডেট করতে পারেন এবং সেই অনুযায়ী চার্টটি রিফ্রেশ করতে পারেন। সাধারণত, যখন ডেটা পরিবর্তিত হয়, তখন আমরা Chart Refresh বা Re-drawing the Chart করি যাতে ব্যবহারকারী সর্বশেষ ডেটা দেখতে পারে। Angular অ্যাপ্লিকেশনে রিয়েল-টাইম ডেটা আপডেট এবং চার্ট রিফ্রেশ করার প্রক্রিয়া নিচে দেখানো হলো।

Real-Time Data Update এর জন্য Chart Refresh করার পদক্ষেপ

ধরা যাক, আপনি একটি Pie Chart তৈরি করেছেন এবং আপনার চার্টটি রিয়েল-টাইম ডেটা অনুযায়ী আপডেট করতে চান। এখানে আপনি Angular এর মধ্যে setInterval অথবা WebSocket ব্যবহার করতে পারেন যাতে ডেটা প্রতি নির্দিষ্ট সময় পরপর আপডেট হয় এবং সেই অনুযায়ী চার্ট রিফ্রেশ হয়।

Step 1: Google Chart ইন্সটল এবং কনফিগার করা

প্রথমে, angular-google-charts ইন্সটল করুন এবং প্রয়োজনীয় কনফিগারেশন সেট করুন, যেমন আগের উদাহরণে আলোচনা করা হয়েছে।

npm install angular-google-charts

Step 2: Chart Data Update এবং Refresh

এখন, আমরা Pie Chart ডেটা প্রতি 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 Google Chart Update';

  chartType = 'PieChart';  // Chart Type: Pie Chart
  chartData = [
    ['Task', 'Hours per Day'],
    ['Work', 8],
    ['Eat', 2],
    ['Commute', 2],
    ['Watch TV', 2],
    ['Sleep', 8]
  ];  // Initial Data

  chartOptions = {
    title: 'My Daily Activities',
    pieHole: 0.4,
    width: 600,
    height: 400
  };

  constructor() {}

  ngOnInit() {
    // Real-time Data Update every 5 seconds
    setInterval(() => {
      this.updateChartData();  // Update chart data every 5 seconds
    }, 5000);  // 5000 milliseconds = 5 seconds
  }

  // Function to simulate real-time data update
  updateChartData() {
    // Randomly changing data for demo purposes
    this.chartData = [
      ['Task', 'Hours per Day'],
      ['Work', Math.floor(Math.random() * 10) + 1],
      ['Eat', Math.floor(Math.random() * 4) + 1],
      ['Commute', Math.floor(Math.random() * 5) + 1],
      ['Watch TV', Math.floor(Math.random() * 4) + 1],
      ['Sleep', Math.floor(Math.random() * 10) + 4]
    ];

    // Trigger chart redraw with updated data
    this.redrawChart();
  }

  // Function to trigger chart redraw
  redrawChart() {
    // Simply triggering Angular change detection to redraw the chart
    // Google Chart will automatically update the data when it changes
  }
}

Step 3: HTML এ Chart রেন্ডার করা

এখন, app.component.html ফাইলে Google Chart কম্পোনেন্ট রেন্ডার করুন।

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

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

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

Step 4: Chart Refresh এবং Real-Time Data Update

এখন, setInterval() ব্যবহার করা হয়েছে যাতে প্রতি 5 সেকেন্ডে updateChartData() ফাংশনটি কল হয় এবং ডেটা আপডেট হয়ে চার্ট রিফ্রেশ হয়। এখানে, Math.random() ফাংশন ব্যবহার করে আমরা ডেটাকে রিয়েল-টাইমে পরিবর্তন করছি, তবে প্রকৃত প্রজেক্টে আপনি একটি API বা ডেটাবেস থেকে রিয়েল-টাইম ডেটা নিয়ে আসতে পারেন।

Real-Time Data Update এবং Refresh এর বৈশিষ্ট্য:

setInterval: প্রতিটি নির্দিষ্ট সময় পরপর ডেটা আপডেট করে এবং চার্ট রিফ্রেশ হয়।
Change Detection: Angular এর change detection স্বয়ংক্রিয়ভাবে চার্টের নতুন ডেটা রেন্ডার করে।
Random Data: এখানে রিয়েল-টাইম ডেটা আপডেটের জন্য Math.random() ব্যবহার করা হয়েছে, তবে প্রকৃত পরিবেশে API অথবা সোকেট ব্যবহার করা হবে।

Step 5: API বা WebSocket থেকে ডেটা সংগ্রহ

প্রকৃত অ্যাপ্লিকেশনে আপনি API বা WebSocket ব্যবহার করে রিয়েল-টাইম ডেটা সংগ্রহ করতে পারেন। উদাহরণস্বরূপ, আপনি WebSocket অথবা HTTP request এর মাধ্যমে ডেটা সংগ্রহ করবেন এবং সেই ডেটাকে চার্টে আপডেট করবেন।

WebSocket উদাহরণ (যদি WebSocket ব্যবহার করতে চান)

import { WebSocketSubject } from 'rxjs/webSocket';

export class AppComponent implements OnInit {
  private socket$ = new WebSocketSubject('wss://your-websocket-url');
  
  constructor() {}

  ngOnInit() {
    this.socket$.subscribe((data) => {
      this.chartData = data;  // Update chart data with WebSocket data
      this.redrawChart();  // Redraw the chart with updated data
    });
  }
  
  redrawChart() {
    // Trigger chart redraw based on WebSocket data
  }
}

সারাংশ

Real-Time Data Update এবং Chart Refresh করার জন্য, Angular অ্যাপে Google Charts ব্যবহার করে আপনি setInterval() অথবা WebSocket ব্যবহার করে ডেটা প্রতি নির্দিষ্ট সময় পরপর আপডেট করতে পারেন এবং সেই অনুযায়ী চার্ট রিফ্রেশ করতে পারেন। এই প্রক্রিয়া আপনাকে রিয়েল-টাইম ডেটা ভিজুয়ালাইজেশন এবং ইন্টারঅ্যাকটিভ চার্ট তৈরি করার সুযোগ দেয়।

Content added By

Md Azizur Rahman

Real-Time Data Update এর জন্য Chart Refresh করা

Real-Time Data Update এর জন্য Chart Refresh করা