Highstock ব্যবহার করে সময়ভিত্তিক ডেটা প্রদর্শন করা

Highstock হলো Highcharts এর একটি বিশেষ সংস্করণ যা সময়ভিত্তিক (time-series) ডেটা ভিজ্যুয়ালাইজেশনের জন্য ব্যবহৃত হয়। এটি মূলত স্টক মার্কেট, ফিনান্সিয়াল ডেটা, বা অন্য কোনো ডেটা যা সময়ের সাথে পরিবর্তিত হয়, সেটি প্রদর্শন করার জন্য উপযোগী। Highstock ব্যবহারের মাধ্যমে আপনি রিয়েল-টাইম ডেটা আপডেট, জুম এবং প্যানিং ফিচার সহ সময়ভিত্তিক চার্ট তৈরি করতে পারবেন।

এখানে আমরা দেখব কিভাবে Angular অ্যাপ্লিকেশনে Highstock ব্যবহার করে সময়ভিত্তিক ডেটা প্রদর্শন করা যায়।

Highstock লাইব্রেরি ইন্টিগ্রেশন

প্রথমে, আপনাকে Highcharts এবং Highstock লাইব্রেরি ইনস্টল করতে হবে, কারণ Highstock Highcharts এর ওপর ভিত্তি করে কাজ করে।

Step 1: Highstock ইনস্টল করা

আপনি npm ব্যবহার করে highcharts এবং highcharts/highstock লাইব্রেরি ইনস্টল করতে পারেন।

npm install highcharts --save
npm install highcharts-angular --save

এটি Highcharts এবং Highstock-এর প্রয়োজনীয় প্যাকেজ আপনার প্রজেক্টে ইন্সটল করবে।

Step 2: Highcharts এবং Highstock ইমপোর্ট করা

Angular প্রজেক্টে Highstock ব্যবহারের জন্য highcharts এবং highcharts-angular মডিউল ইমপোর্ট করতে হবে। 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';  // Highcharts মডিউল ইমপোর্ট

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HighchartsChartModule  // Highcharts মডিউল ব্যবহার করা
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Step 3: Highstock Chart কনফিগারেশন

Highstock ব্যবহার করে সময়ভিত্তিক ডেটা প্রদর্শন করতে, আপনাকে ডেটা টাইমস্ট্যাম্প সহ প্রস্তুত করতে হবে এবং Highstock এর series এ টাইমস্ট্যাম্প সহ ডেটা ইনজেক্ট করতে হবে।

1. app.component.ts ফাইলের মধ্যে Highstock চার্টের কনফিগারেশন করুন:

import { Component, OnInit } from '@angular/core';
import * as Highcharts from 'highcharts/highstock'; // Highstock ইমপোর্ট

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

  ngOnInit() {
    this.chartOptions = {
      chart: {
        type: 'line'
      },
      title: {
        text: 'সময়ভিত্তিক ডেটা প্রদর্শন'
      },
      rangeSelector: {
        selected: 1  // রেঞ্জ সিলেক্টর দিয়ে চার্টের সময়কাল নির্বাচন
      },
      xAxis: {
        type: 'datetime'  // টাইমস্ট্যাম্প ডেটা রেন্ডারিং
      },
      series: [{
        name: 'Stock Price',
        data: [
          [Date.UTC(2024, 0, 1), 29.9],  // ২০২৪-০১-০১ তারিখে ২৯.৯
          [Date.UTC(2024, 0, 2), 31.9],  // ২০২৪-০১-০২ তারিখে ৩১.৯
          [Date.UTC(2024, 0, 3), 35.1],  // ২০২৪-০১-০৩ তারিখে ৩৫.১
          [Date.UTC(2024, 0, 4), 40.5],  // ২০২৪-০১-০৪ তারিখে ৪০.৫
          [Date.UTC(2024, 0, 5), 42.2],  // ২০২৪-০১-০৫ তারিখে ৪২.২
          [Date.UTC(2024, 0, 6), 45.3],  // ২০২৪-০১-০৬ তারিখে ৪৫.৩
        ]
      }]
    };
  }
}

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>

ব্যাখ্যা:

1. Date.UTC(): Highcharts টাইমস্ট্যাম্প ডেটা প্রদর্শনের জন্য Date.UTC() ফাংশন ব্যবহার করে টাইমস্ট্যাম্প তৈরি করা হয়। এটি একটি বিশেষ ফাংশন যা টাইমস্ট্যাম্প হিসাবে একটি UTC তারিখ তৈরি করে।
2. rangeSelector: rangeSelector এর মাধ্যমে আপনি চার্টে একটি সময় সীমা নির্বাচন করতে পারেন (যেমন ১ দিন, ১ সপ্তাহ, ১ মাস ইত্যাদি)। এটি ব্যবহারকারীকে চার্টের বিভিন্ন সময়কাল দেখানোর সুযোগ দেয়।
3. xAxis.type: 'datetime': xAxis এর type এ 'datetime' ব্যবহার করে আমরা নিশ্চিত করি যে x-axis তে টাইমস্ট্যাম্পের ভিত্তিতে ডেটা রেন্ডার হবে।
4. series: series এ আমাদের মূল ডেটা থাকে, যেটি একটি অ্যারে হিসেবে টাইমস্ট্যাম্প এবং ডেটা ভ্যালু ধারণ করে।

Step 4: রিয়েল-টাইম ডেটা আপডেট (Optional)

আপনি যদি রিয়েল-টাইম ডেটা হালনাগাদ করতে চান, তবে আপনি WebSocket বা API কলের মাধ্যমে নতুন ডেটা গ্রহণ করে setData() ব্যবহার করে চার্ট আপডেট করতে পারেন।

সারাংশ

Highstock ব্যবহার করে আপনি সহজেই সময়ভিত্তিক ডেটা ভিজ্যুয়ালাইজ করতে পারেন। টাইমস্ট্যাম্প ডেটা ইনজেক্ট করার মাধ্যমে আপনি স্টক মার্কেট, ফিনান্সিয়াল ডেটা অথবা সেন্সর ডেটা প্রদর্শন করতে পারেন। Highstock আপনাকে zooming, panning, range selection এবং real-time updates সহ আরও অনেক সুবিধা প্রদান করে।