Real-Time Data পরিবর্তনের সাথে সাথে চার্ট আপডেট করা

Real-Time Data চার্টে পরিবর্তন হওয়ার সাথে সাথে Google Charts এ আপডেট দেখানো একটি গুরুত্বপূর্ণ বৈশিষ্ট্য, বিশেষত ডেটা ড্যাশবোর্ড, ট্র্যাকিং সিস্টেম, এবং স্টক মার্কেট অ্যাপ্লিকেশনগুলির জন্য। আপনি Angular এর মাধ্যমে Google Charts ব্যবহার করে real-time ডেটা আপডেট এবং চার্ট রেন্ডার করতে পারেন। এটি ডেটার পরিবর্তন হওয়ার সাথে সাথে তা real-time চার্টে প্রদর্শন করবে।

এখানে আমরা একটি Real-Time Data পরিবর্তনের সাথে সাথে Google Charts আপডেট করার প্রক্রিয়া দেখাবো।

Real-Time Data পরিবর্তনের সাথে সাথে Google Chart আপডেট করার জন্য প্রয়োজনীয় পদক্ষেপ

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

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

ng new real-time-chart
cd real-time-chart

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

Google Charts API ব্যবহারের জন্য 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: Real-Time Data আপডেট ফাংশন তৈরি করা

এখন, app.component.ts ফাইলে ডেটা আপডেট করার জন্য একটি ফাংশন তৈরি করতে হবে, যাতে প্রতি কয়েক সেকেন্ড পর পর ডেটা আপডেট হয় এবং তা চার্টে রিফ্লেক্ট হয়।

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 Data Chart';

  chartType = 'LineChart'; // Line Chart Type
  chartData = [
    ['Time', 'Value'],
    ['0', 0]
  ]; // Initial Data
  chartOptions = {
    title: 'Real-Time Data',
    curveType: 'function',
    width: '100%',
    height: 400
  };

  ngOnInit() {
    setInterval(() => {
      this.updateChartData(); // Update data every 2 seconds
    }, 2000);
  }

  // Function to update chart data in real-time
  updateChartData() {
    const time = this.chartData.length;
    const newValue = Math.floor(Math.random() * 100); // Random value for demonstration

    // Add new data point to chartData
    this.chartData.push([time.toString(), newValue]);

    // Remove the first data point to maintain only the last 10 values
    if (this.chartData.length > 10) {
      this.chartData.shift();
    }
  }
}

• এখানে, setInterval ব্যবহার করা হয়েছে যা প্রতি 2 সেকেন্ডে updateChartData() ফাংশনটি কল করবে।
• updateChartData() ফাংশনে আমরা Math.random() ব্যবহার করে নতুন র্যান্ডম ডেটা যোগ করছি, এবং আগের ডেটা রিমুভ করতে shift() ব্যবহার করা হচ্ছে।
• chartData হলো ডেটা যা লাইন চার্টে প্রদর্শিত হবে, এবং এটি প্রতি 2 সেকেন্ডে আপডেট হবে।

Step 5: HTML ফাইলে Chart রেন্ডার করা

এখন, app.component.html ফাইলে চার্ট রেন্ডার করতে হবে।

app.component.html ফাইল:

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

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

এখানে, google-chart কম্পোনেন্টের মাধ্যমে আমাদের Line Chart রেন্ডার হচ্ছে। এই চার্টে ডেটা প্রতি 2 সেকেন্ডে আপডেট হবে।

Step 6: CSS for Layout

এখন, চার্টের কন্টেইনারের জন্য কিছু স্টাইলিং CSS যোগ করা হবে যাতে এটি সুন্দরভাবে দেখায়।

app.component.css ফাইল:

h1 {
  text-align: center;
  font-family: Arial, sans-serif;
}

google-chart {
  display: block;
  margin: 20px auto;
}

এখানে, google-chart কম্পোনেন্টের জন্য কিছু সেন্টারিং এবং মার্জিন অ্যাড করা হয়েছে যাতে চার্টটি সুন্দরভাবে প্রদর্শিত হয়।

Step 7: Run the Application

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

ng serve

এটি http://localhost:4200 এ রান করবে। আপনি দেখতে পাবেন যে প্রতি 2 সেকেন্ডে লাইন চার্টে নতুন ডেটা যোগ হচ্ছে এবং পুরনো ডেটা অপসারণ হচ্ছে। এটি একটি real-time data আপডেট করা চার্ট।

সারাংশ

এভাবে, আপনি Angular এবং Google Charts ব্যবহার করে real-time data পরিবর্তনের সাথে সাথে চার্ট আপডেট করতে পারেন। এখানে আমরা setInterval() ব্যবহার করে প্রতি কয়েক সেকেন্ডে নতুন ডেটা আপডেট করছি এবং সেটি LineChart-এ প্রদর্শন করছি। এই কৌশলটি ডেটা ভিজুয়ালাইজেশন, স্টক মার্কেট অ্যাপ্লিকেশন, ওয়েব এনালিটিক্স ইত্যাদি ক্ষেত্রে খুবই কার্যকরী।