Highcharts এ টেমপ্লেট এবং ডায়নামিক ডেটা বাইন্ডিং খুবই গুরুত্বপূর্ণ কনসেপ্ট। এগুলি আপনাকে চার্টের ডেটা এবং কনফিগারেশনকে আরও ইন্টারঅ্যাকটিভ এবং ইউজার-ফ্রেন্ডলি করে তোলে। টেমপ্লেটিং দ্বারা আপনি Highcharts এর চার্টকে কাস্টমাইজ করতে পারেন, এবং ডায়নামিক ডেটা বাইন্ডিংয়ের মাধ্যমে অ্যাপ্লিকেশন থেকে লাইভ ডেটা সরাসরি চার্টে আপডেট করা যায়।

1. Highcharts টেমপ্লেট

টেমপ্লেট বলতে একটি নির্দিষ্ট কাঠামো বা লেআউট বুঝায়, যার মধ্যে আপনি চার্টের সমস্ত কনফিগারেশন ও আউটপুট প্লট করার জন্য নির্দিষ্ট সেটিংস ব্যবহার করেন। Highcharts এ চার্ট তৈরি করার সময় টেমপ্লেট কাস্টমাইজ করা যায়। আপনি চার্টের শিরোনাম, এক্স-অ্যাক্সিস, ওয়াই-অ্যাক্সিস, সিরিজের ডেটা ইত্যাদি কাস্টমাইজ করতে পারবেন।

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

<div id="container" style="width:100%; height:400px;"></div>

<script>
  Highcharts.chart('container', {
    chart: {
      type: 'column' // কলাম চার্ট
    },
    title: {
      text: 'Sales Data for 2024' // টেমপ্লেটে শিরোনাম যোগ করা
    },
    xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'] // এক্স-অ্যাক্সিসের ক্যাটেগরি
    },
    yAxis: {
      title: {
        text: 'Sales in USD' // ওয়াই-অ্যাক্সিস শিরোনাম
      }
    },
    series: [{
      name: 'Sales',
      data: [100, 200, 300, 400, 500, 600] // সিরিজের ডেটা
    }]
  });
</script>

এখানে Highcharts.chart('container', {...}) এর মধ্যে প্রতিটি কনফিগারেশন টেমপ্লেট হিসেবে ব্যবহার করা হয়েছে, যেখানে title, xAxis, এবং yAxis কাস্টমাইজ করা হয়েছে। একইভাবে, series এর মধ্যে ডেটা পয়েন্টগুলোও টেমপ্লেট হিসেবে ব্যবহৃত হয়েছে।

2. ডায়নামিক ডেটা বাইন্ডিং

ডায়নামিক ডেটা বাইন্ডিং এর মাধ্যমে আপনি লাইভ ডেটা (যেমন API থেকে আসা ডেটা) সরাসরি Highcharts চার্টে প্রর্দশিত করতে পারেন। Angular, React বা Vanilla JavaScript ব্যবহার করে ডায়নামিক ডেটা লোড করতে এবং সেটি Highcharts চার্টে বাইন্ড করতে হয়।

Angular এ ডায়নামিক ডেটা বাইন্ডিং

Angular ব্যবহার করে Highcharts এর ডেটা ডায়নামিকভাবে বাইন্ড করার উদাহরণ দেওয়া হলো।

1. Angular Service তৈরি করা (API কল করতে):

data.service.ts ফাইলে API থেকে ডেটা ফেচ করতে নিচের কোড ব্যবহার করুন:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private apiUrl = 'https://api.example.com/sales'; // API URL

  constructor(private http: HttpClient) {}

  // ডেটা ফেচ করার জন্য ফাংশন
  getSalesData(): Observable<any> {
    return this.http.get<any>(this.apiUrl); // API থেকে ডেটা লোড
  }
}

2. Component এ ডেটা বাইন্ডিং:

এখন, আমরা app.component.ts ফাইলে API থেকে ডেটা লোড করবো এবং সেটি Highcharts চার্টে বাইন্ড করব।

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';
import * as Highcharts from 'highcharts';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  Highcharts: typeof Highcharts = Highcharts;
  chartOptions: Highcharts.Options = {};

  constructor(private dataService: DataService) {}

  ngOnInit() {
    // ডেটা API থেকে ফেচ করা
    this.dataService.getSalesData().subscribe((data) => {
      // Highcharts এর জন্য ডেটা কনফিগারেশন
      this.chartOptions = {
        chart: {
          type: 'line' // লাইন চার্ট
        },
        title: {
          text: 'Dynamic Sales Data' // ডায়নামিক শিরোনাম
        },
        xAxis: {
          categories: data.categories // API থেকে পাওয়া ক্যাটেগরি
        },
        yAxis: {
          title: {
            text: 'Sales in USD' // ওয়াই-অ্যাক্সিস শিরোনাম
          }
        },
        series: [{
          name: 'Sales',
          data: data.sales // API থেকে পাওয়া ডেটা
        }]
      };
    });
  }
}

এখানে, আমরা API থেকে categories এবং sales ডেটা ফেচ করেছি এবং chartOptions এ সেই ডেটা সেট করেছি। Highcharts এ এই ডেটা বাইন্ড করার মাধ্যমে একটি ডায়নামিক চার্ট তৈরি হয়েছে।

3. HTML টেমপ্লেট:

app.component.html ফাইলে Highcharts টেমপ্লেট রেন্ডার করার জন্য:

<div style="width:100%; height:400px;">
  <highcharts-chart 
    [Highcharts]="Highcharts" 
    [options]="chartOptions" 
    style="width: 100%; height: 100%; display: block;">
  </highcharts-chart>
</div>

এখানে, আমরা Angular এর highcharts-chart ডিরেক্টিভ ব্যবহার করে chartOptions এর ডেটা টেমপ্লেটে বাইন্ড করেছি।

3. ডায়নামিক ডেটা আপডেট (Live Data)

আপনি যখন লাইভ ডেটা বা রিয়েল-টাইম ডেটা (যেমন WebSocket অথবা API এর মাধ্যমে) লোড করছেন, তখন Highcharts চার্টটি ডায়নামিকভাবে আপডেট করা যায়। আপনি update() অথবা setData() ফাংশন ব্যবহার করে ডেটা রিফ্রেশ করতে পারেন।

Live Data Update Example:

// ডেটা আপডেট করার ফাংশন
updateChartData(newData: number[]) {
  this.chartOptions.series[0].data = newData; // সিরিজের ডেটা আপডেট
  this.Highcharts.chart('container', this.chartOptions); // চার্ট পুনরায় রেন্ডার করা
}

এটি ব্যবহারকারীর ইন্টারঅ্যাকশনের মাধ্যমে লাইভ ডেটা বা API থেকে পাওয়া নতুন ডেটা আপডেট করতে সক্ষম।

সারাংশ

Highcharts এ টেমপ্লেট কাস্টমাইজেশন এবং ডায়নামিক ডেটা বাইন্ডিং অত্যন্ত গুরুত্বপূর্ণ। Highcharts এর মাধ্যমে আপনি আপনার চার্টের কনফিগারেশন কাস্টমাইজ করতে পারেন এবং ডায়নামিক ডেটা সরাসরি API বা লাইভ ডেটা সোর্স থেকে বাইন্ড করতে পারেন। Angular, React অথবা Vanilla JavaScript ব্যবহার করে এই কনফিগারেশনটি করতে পারেন। এর ফলে আপনি ইন্টারঅ্যাকটিভ, লাইভ এবং ডায়নামিক ডেটা চার্ট তৈরি করতে পারবেন।

Angular একটি মডুলার এবং কম্পোনেন্ট ভিত্তিক ফ্রেমওয়ার্ক, যা ডাইনামিক ওয়েব অ্যাপ্লিকেশন তৈরি করতে ব্যবহৃত হয়। Angular এর একটি অন্যতম শক্তিশালী বৈশিষ্ট্য হলো টেমপ্লেট এবং ডেটা বাইন্ডিং। এই ফিচারের মাধ্যমে HTML টেমপ্লেট এবং Angular এর কম্পোনেন্ট ক্লাসের মধ্যে তথ্যের আদান-প্রদান সহজ হয়ে যায়।

এই টিউটোরিয়ালে আমরা Angular এর টেমপ্লেট এবং ডেটা বাইন্ডিং এর বিভিন্ন ধরনের ব্যবহার দেখব, যা আপনাকে Angular অ্যাপ্লিকেশন তৈরির সময় সাহায্য করবে।

ডেটা বাইন্ডিং কি?

ডেটা বাইন্ডিং হল একটি প্রক্রিয়া যার মাধ্যমে Angular কম্পোনেন্ট ক্লাস এবং HTML টেমপ্লেটের মধ্যে তথ্যের আদান-প্রদান করা হয়। Angular এর ডেটা বাইন্ডিং মূলত ৪ ধরনের হয়:

1. One-way Data Binding (One-way binding):
   • Interpolation
   • Property Binding
   • Event Binding
2. Two-way Data Binding (Two-way binding):
   • ngModel

1. Interpolation (One-way data binding)

Interpolation ব্যবহার করে আপনি কম্পোনেন্টের ক্লাস থেকে টেমপ্লেটের মধ্যে ডেটা প্রবাহিত করতে পারেন। এটি সাধারণত {{ }} স্যিনট্যাক্স দিয়ে করা হয়।

উদাহরণ:

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

@Component({
  selector: 'app-root',
  template: `
    <h1>{{ title }}</h1>
    <p>{{ description }}</p>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Angular Data Binding';
  description = 'This is an example of interpolation in Angular.';
}

এখানে, title এবং description কম্পোনেন্টের ক্লাসের ভেরিয়েবল, যা টেমপ্লেটের মধ্যে {{}} এর মাধ্যমে ইনপুট হচ্ছে।

2. Property Binding (One-way data binding)

Property Binding ব্যবহারের মাধ্যমে আপনি HTML ট্যাগের প্রপার্টি বা অ্যাট্রিবিউটকে কম্পোনেন্টের ক্লাস থেকে বাইন্ড করতে পারেন। এটি সাধারণত [] স্যিনট্যাক্স দিয়ে করা হয়।

উদাহরণ:

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

@Component({
  selector: 'app-root',
  template: `
    <img [src]="imageUrl" alt="Angular Logo" />
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  imageUrl = 'https://angular.io/assets/images/logos/angular/angular.svg';
}

এখানে, [src] অ্যাট্রিবিউটটি imageUrl ভেরিয়েবলের মানের সাথে বাইন্ড করা হয়েছে। ফলে, ইমেজের URL হিসেবে imageUrl এর মান ব্যবহার করা হবে।

3. Event Binding (One-way data binding)

Event Binding ব্যবহার করে আপনি Angular টেমপ্লেটে কোনো ইভেন্ট (যেমন ক্লিক, কিবোর্ড ইভেন্ট) হ্যান্ডল করতে পারেন। এটি সাধারণত () স্যিনট্যাক্স দিয়ে করা হয়।

উদাহরণ:

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

@Component({
  selector: 'app-root',
  template: `
    <button (click)="changeMessage()">Click Me</button>
    <p>{{ message }}</p>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  message = 'Hello, Angular!';

  changeMessage() {
    this.message = 'You clicked the button!';
  }
}

এখানে, (click) ইভেন্ট ব্যবহার করা হয়েছে, যা বাটনে ক্লিক করলে changeMessage() ফাংশনকে কল করবে এবং message ভেরিয়েবলের মান পরিবর্তন হবে।

4. Two-way Data Binding

Two-way Data Binding এর মাধ্যমে আপনি HTML টেমপ্লেট এবং কম্পোনেন্টের ক্লাসের মধ্যে ডেটা উভয় দিকেই আদান-প্রদান করতে পারেন। Angular এ এটি ngModel ডিরেকটিভ দিয়ে করা হয়।

উদাহরণ:

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

@Component({
  selector: 'app-root',
  template: `
    <input [(ngModel)]="name" placeholder="Enter your name">
    <p>Hello, {{ name }}!</p>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = '';
}

এখানে, [(ngModel)] দিয়ে two-way data binding করা হয়েছে। আপনি ইনপুট ফিল্ডে নাম লিখলে তা স্বয়ংক্রিয়ভাবে name ভেরিয়েবলে আপডেট হবে, এবং name ভেরিয়েবলের মানটি <p> ট্যাগে প্রদর্শিত হবে।

সারাংশ

Angular এর টেমপ্লেট এবং ডেটা বাইন্ডিং ব্যবহারের মাধ্যমে কম্পোনেন্ট এবং টেমপ্লেটের মধ্যে তথ্যের আদান-প্রদান অত্যন্ত সহজ হয়। Angular ৪টি প্রধান ধরনের ডেটা বাইন্ডিং সমর্থন করে:

1. Interpolation: একমুখী ডেটা প্রবাহ।
2. Property Binding: একমুখী ডেটা প্রবাহ এবং HTML অ্যাট্রিবিউট সেট করা।
3. Event Binding: ইউজারের ইভেন্ট হ্যান্ডলিং।
4. Two-way Binding: ডেটা উভয় দিকেই প্রবাহিত।

এই বৈশিষ্ট্যগুলো Angular অ্যাপ্লিকেশনে ইন্টারঅ্যাকটিভিটি এবং ইউজার-বান্ধব ফিচার তৈরি করতে সাহায্য করে।

Angular এ ngFor এবং ngIf ডিরেকটিভ ব্যবহার করে আপনি ডায়নামিকভাবে ডেটা লোড করতে পারেন এবং সেই ডেটার ভিত্তিতে Highcharts চার্ট তৈরি করতে পারেন। ngFor ব্যবহার করে ডেটা লুপ করা যায় এবং ngIf ব্যবহার করে শর্তাধীনভাবে কিছু উপাদান প্রদর্শন করা যায়।

এই টিউটোরিয়ালে আমরা দেখব কিভাবে Angular এ ngFor এবং ngIf ব্যবহার করে ডায়নামিক চার্ট তৈরি করা যায়।

স্টেপ 1: প্রজেক্ট সেটআপ এবং Highcharts ইন্টিগ্রেশন

প্রথমে, Highcharts এবং highcharts-angular লাইব্রেরি ইনস্টল করা প্রয়োজন।

npm install highcharts highcharts-angular --save

এরপর, app.module.ts ফাইলে HighchartsChartModule ইমপোর্ট করুন:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HighchartsChartModule } from 'highcharts-angular';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HighchartsChartModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

স্টেপ 2: ডায়নামিক ডেটা লোড এবং ngFor এর মাধ্যমে চার্ট তৈরি করা

এখন app.component.ts ফাইলে ডেটা এবং ngFor ব্যবহার করে Highcharts চার্ট কনফিগারেশন তৈরি করুন।

import { Component, OnInit } from '@angular/core';
import * as Highcharts from 'highcharts';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  Highcharts = Highcharts;  // Highcharts ব্যবহার করার জন্য
  chartOptions: any;  // চার্টের অপশন স্টোর করার জন্য

  // ডায়নামিকভাবে লোড হওয়া ডেটা
  categories = ['January', 'February', 'March', 'April', 'May'];
  seriesData = [
    { name: 'Product A', data: [10, 20, 30, 40, 50] },
    { name: 'Product B', data: [15, 25, 35, 45, 55] },
    { name: 'Product C', data: [20, 30, 40, 50, 60] }
  ];

  ngOnInit() {
    // Highcharts কনফিগারেশন তৈরি করা
    this.chartOptions = {
      chart: {
        type: 'line'
      },
      title: {
        text: 'ডায়নামিক ডেটা দিয়ে চার্ট'
      },
      xAxis: {
        categories: this.categories  // ngFor দিয়ে লোড হওয়া ক্যাটেগরি
      },
      yAxis: {
        title: {
          text: 'মান'
        }
      },
      series: this.seriesData  // ngFor দিয়ে সিরিজ লোড হওয়া
    };
  }
}

এখানে, categories এবং seriesData দুটি অ্যারে ব্যবহার করা হয়েছে যা ডায়নামিকভাবে ডেটা ধারণ করবে। categories অ্যারে মাসের নাম এবং seriesData অ্যারে পণ্যগুলোর জন্য বিক্রির ডেটা ধারণ করবে। ngFor এর মাধ্যমে এই ডেটা চার্টে যোগ করা হবে।

স্টেপ 3: ngFor এবং ngIf এর মাধ্যমে HTML-এ ডেটা প্রদর্শন

এখন app.component.html ফাইলে ngFor এবং ngIf ব্যবহার করে চার্টে ডেটা প্রদর্শন করব।

<div style="height: 400px;">
  <highcharts-chart
    [Highcharts]="Highcharts"
    [options]="chartOptions"
    style="width: 100%; height: 100%; display: block;">
  </highcharts-chart>
</div>

<!-- ngIf ব্যবহার করে কিছু শর্তাধীন উপাদান প্রদর্শন -->
<div *ngIf="categories.length > 0">
  <h3>ডেটা লোড করা হয়েছে!</h3>
</div>

<!-- ngFor দিয়ে ডেটার তালিকা দেখানো -->
<ul>
  <li *ngFor="let category of categories">
    {{ category }}
  </li>
</ul>

এখানে, ngIf ব্যবহার করা হয়েছে একটি শর্ত যাচাই করার জন্য (যদি ক্যাটেগরি ডেটা থাকে তবে "ডেটা লোড করা হয়েছে!" প্রদর্শিত হবে), এবং ngFor দিয়ে categories অ্যারের উপাদানগুলোকে তালিকাভুক্ত করা হয়েছে।

ব্যাখ্যা:

• ngFor: Angular এর ngFor ডিরেকটিভ লিস্ট বা অ্যারের উপাদানগুলোর ওপর লুপ চালিয়ে প্রতিটি উপাদানকে UI তে প্রদর্শন করতে ব্যবহৃত হয়। এই ক্ষেত্রে categories অ্যারে এবং seriesData অ্যারে লুপে ব্যবহার করা হয়েছে।
• ngIf: ngIf ডিরেকটিভটি শর্তাধীন উপাদান প্রদর্শন করার জন্য ব্যবহৃত হয়। এখানে, categories.length > 0 শর্তটি চেক করা হচ্ছে, যাতে নিশ্চিত হয় যে ডেটা লোড হয়েছে এবং সেই অনুযায়ী একটি মেসেজ দেখানো হচ্ছে।

স্টেপ 4: ডায়নামিকভাবে চার্টের ডেটা আপডেট করা

আপনি চাইলে ngFor এবং ngIf এর মাধ্যমে ডেটা পরিবর্তন করতে পারেন এবং সেই অনুযায়ী Highcharts চার্টকে রিফ্রেশ করতে পারেন। উদাহরণস্বরূপ, আপনি একটি বাটন ক্লিক করলে ডেটা আপডেট করতে পারেন:

updateChart() {
  this.seriesData = [
    { name: 'Product A', data: [20, 30, 40, 50, 60] },
    { name: 'Product B', data: [25, 35, 45, 55, 65] },
    { name: 'Product C', data: [30, 40, 50, 60, 70] }
  ];

  this.chartOptions.series = this.seriesData;  // সিরিজ ডেটা আপডেট করা
}

এবং HTML তে:

<button (click)="updateChart()">চার্ট আপডেট করুন</button>

এটি ব্যবহারকারীর জন্য চার্টে ডেটা পরিবর্তন করার সুযোগ দিবে।

সারাংশ

Angular এর ngFor এবং ngIf ডিরেকটিভ ব্যবহার করে আপনি ডায়নামিকভাবে ডেটা লোড করতে পারেন এবং Highcharts চার্টে সেই ডেটা প্রদর্শন করতে পারেন। ngFor লুপের মাধ্যমে ডেটা অ্যারে বা লিস্টে যেকোনো উপাদানকে স্বয়ংক্রিয়ভাবে UI তে দেখানো যায় এবং ngIf এর মাধ্যমে শর্ত অনুযায়ী উপাদান প্রদর্শন বা গোপন করা যায়। এর মাধ্যমে আপনি অত্যন্ত ইন্টারঅ্যাকটিভ এবং ডাইনামিক চার্ট তৈরি করতে সক্ষম হবেন।

Angular অ্যাপ্লিকেশনে Highcharts ব্যবহার করে ডায়নামিক চার্ট তৈরি করা এবং তার ডেটা আপডেট ও রিফ্রেশ করার প্রক্রিয়া অত্যন্ত গুরুত্বপূর্ণ। এই ফিচারটি মূলত রিয়েল-টাইম ডেটা আপডেট করতে সাহায্য করে, যেমনঃ স্টক মার্কেট ডেটা, সেলস রিপোর্ট, সেন্সর ডেটা ইত্যাদি।

এখানে আমরা দেখব কিভাবে Angular অ্যাপ্লিকেশনে Highcharts চার্টের ডেটা আপডেট এবং রিফ্রেশ করা যায়।

1. ডেটা আপডেট এবং রিফ্রেশ করার জন্য প্রয়োজনীয় পদক্ষেপ

1. ডেটার ফেচিং: API কল বা টেস্ট ডেটা ব্যবহারের মাধ্যমে ডেটা আনা।
2. Highcharts চার্টের রিফ্রেশ: ডেটা আপডেট হওয়ার পরে Highcharts চার্টকে রিফ্রেশ করা।

2. Angular এবং Highcharts এর সাথে ডেটা আপডেট করা

ধরা যাক, আপনার চার্টে ডায়নামিক ডেটা লোড হচ্ছে, এবং আপনি চাইছেন এই ডেটা কিছু সময় পর পর রিফ্রেশ বা আপডেট হোক। Angular এ এটি করার জন্য, আপনি setInterval অথবা rxjs Observables ব্যবহার করতে পারেন।

উদাহরণ:

এখানে আমরা দেখব কিভাবে setInterval ব্যবহার করে প্রতি ৫ সেকেন্ডে Highcharts চার্টের ডেটা আপডেট করা যায়।

1. app.component.ts ফাইলে ডেটা আপডেট এবং চার্ট রিফ্রেশ:

import { Component, OnInit } from '@angular/core';
import * as Highcharts from 'highcharts';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  Highcharts = Highcharts;  // Highcharts ব্যবহার করার জন্য
  chartOptions: any;  // চার্টের অপশন স্টোর করার জন্য

  chartData = [10, 20, 30, 40, 50]; // ডিফল্ট ডেটা

  ngOnInit() {
    // প্রথমে চার্টের অপশন সেট করা
    this.chartOptions = {
      chart: {
        type: 'line'
      },
      title: {
        text: 'ডাইনামিক ডেটা দিয়ে আপডেট হওয়া চার্ট'
      },
      series: [{
        name: 'Sales',
        data: this.chartData
      }]
    };

    // প্রতি ৫ সেকেন্ডে ডেটা পরিবর্তন করে চার্ট আপডেট করা
    setInterval(() => {
      // নতুন ডেটা তৈরি
      this.chartData = this.chartData.map(data => data + Math.floor(Math.random() * 10));

      // Highcharts এর মাধ্যমে চার্ট আপডেট করা
      this.updateChart();
    }, 5000); // প্রতি ৫ সেকেন্ডে আপডেট হবে
  }

  // Highcharts.chart() ব্যবহার করে চার্ট আপডেট করা
  updateChart() {
    Highcharts.charts[0].series[0].setData(this.chartData);
  }
}

2. app.component.html ফাইলে Highcharts কম্পোনেন্ট:

<div style="height: 400px;">
  <highcharts-chart
    [Highcharts]="Highcharts"
    [options]="chartOptions"
    style="width: 100%; height: 100%; display: block;">
  </highcharts-chart>
</div>

3. ব্যাখ্যা:

• chartOptions: প্রথমে chartOptions অবজেক্টে Highcharts এর কনফিগারেশন সেট করা হয়েছে। এতে চার্টের ধরন (line), টাইটেল এবং সিরিজের ডেটা দেয়া হয়েছে।
• chartData: ডেটার একটি ডিফল্ট মান দেওয়া হয়েছে, যা পরবর্তীতে setInterval দ্বারা প্রতি ৫ সেকেন্ডে আপডেট হবে।
• setInterval: এই ফাংশনটি প্রতি ৫ সেকেন্ডে chartData এর মান পরিবর্তন করবে (এখানে Math.random() ব্যবহার করা হয়েছে)। তারপর updateChart() ফাংশন কল করা হবে।
• updateChart(): Highcharts এর setData() মেথড ব্যবহার করে ডেটার নতুন মান চার্টে আপডেট করা হচ্ছে।
• Highcharts.charts[0].series[0].setData(this.chartData): এই কোডটি Highcharts এর প্রথম চার্টের প্রথম সিরিজের ডেটা আপডেট করবে।

4. রিয়েল-টাইম ডেটা ফেচিং:

আপনি যদি API থেকে রিয়েল-টাইম ডেটা ফেচ করতে চান, তাহলে Angular এর HttpClient ব্যবহার করতে পারেন। নিচে একটি উদাহরণ দেওয়া হলো:

API থেকে ডেটা ফেচ করে চার্ট আপডেট করা:

1. app.component.ts:

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import * as Highcharts from 'highcharts';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  Highcharts = Highcharts;
  chartOptions: any;
  chartData: any[] = [];

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.chartOptions = {
      chart: {
        type: 'line'
      },
      title: {
        text: 'API থেকে ডেটা আপডেট করা চার্ট'
      },
      series: [{
        name: 'Sales',
        data: this.chartData
      }]
    };

    // প্রতি ৫ সেকেন্ডে API কল করে ডেটা আপডেট করা
    setInterval(() => {
      this.fetchData();  // API কল
    }, 5000);
  }

  fetchData() {
    // API থেকে ডেটা ফেচ করা
    this.http.get<any[]>('https://api.example.com/data').subscribe(data => {
      this.chartData = data.map(item => item.value);  // API ডেটা থেকে সিরিজ ডেটা তৈরি
      this.updateChart();
    });
  }

  updateChart() {
    Highcharts.charts[0].series[0].setData(this.chartData);
  }
}

সারাংশ

Highcharts এর সাথে Angular অ্যাপ্লিকেশনে ডায়নামিক ডেটা আপডেট এবং রিফ্রেশ করা খুবই সহজ। setInterval বা rxjs Observables ব্যবহার করে আপনি API থেকে রিয়েল-টাইম ডেটা ফেচ করতে পারেন এবং Highcharts.setData() ফাংশন ব্যবহার করে ডেটা আপডেট করতে পারেন। এই পদ্ধতি ব্যবহার করে আপনি ইন্টারঅ্যাকটিভ এবং রিয়েল-টাইম ডেটা ভিজ্যুয়ালাইজেশন তৈরি করতে পারবেন।