বিভিন্ন ফ্রেমওয়ার্কের সাথে চার্ট ডেটা আপডেট করা

Chart.js: বিভিন্ন ফ্রেমওয়ার্কের সাথে চার্ট ডেটা আপডেট করা

Chart.js এর সাথে বিভিন্ন ফ্রেমওয়ার্ক ব্যবহার করে ডেটা আপডেট করা একটি গুরুত্বপূর্ণ বিষয়, বিশেষ করে রিয়েল-টাইম ডেটা ভিজ্যুয়ালাইজেশনের জন্য। ফ্রেমওয়ার্ক যেমন React, Angular, Vue.js এর সাথে Chart.js ইন্টিগ্রেট করে ডাইনামিক ডেটা আপডেট করা যায়। এখানে আমরা দেখব কিভাবে বিভিন্ন ফ্রেমওয়ার্কে Chart.js ব্যবহার করে ডেটা আপডেট করা যায়।

১. React এর সাথে Chart.js ডেটা আপডেট করা

React ব্যবহার করে Chart.js এর সাথে ডেটা আপডেট করতে, আপনাকে useState এবং useEffect হুক ব্যবহার করতে হবে। এখানে আমরা একটি Line Chart এর উদাহরণ দেব।

ধাপ ১: Chart.js এবং React-Chartjs-2 ইনস্টল করা

প্রথমে Chart.js এবং react-chartjs-2 প্যাকেজ দুটি ইনস্টল করতে হবে:

npm install chart.js react-chartjs-2

ধাপ ২: React Component তৈরি করা

import React, { useState, useEffect } from 'react';
import { Line } from 'react-chartjs-2';
import Chart from 'chart.js/auto';

const RealTimeChart = () => {
    // Initial data
    const [data, setData] = useState({
        labels: ['January', 'February', 'March', 'April', 'May'],
        datasets: [
            {
                label: 'Sales',
                data: [12, 19, 3, 5, 2],
                fill: false,
                borderColor: 'rgba(75, 192, 192, 1)',
                tension: 0.1
            }
        ]
    });

    // Function to update chart data
    const updateData = () => {
        const newData = [...data.datasets[0].data];
        newData.push(Math.floor(Math.random() * 100));
        newData.shift(); // Remove the first element to keep the size constant

        setData({
            labels: data.labels,
            datasets: [
                {
                    label: 'Sales',
                    data: newData,
                    fill: false,
                    borderColor: 'rgba(75, 192, 192, 1)',
                    tension: 0.1
                }
            ]
        });
    };

    // Update data every 2 seconds
    useEffect(() => {
        const interval = setInterval(updateData, 2000);
        return () => clearInterval(interval);
    }, [data]);

    return (
        <div>
            <h2>Real-time Sales Data</h2>
            <Line data={data} />
        </div>
    );
};

export default RealTimeChart;

ব্যাখ্যা:

• useState দিয়ে চার্টের ডেটা স্টোর করা হয়।
• updateData ফাংশনটি প্রতি ২ সেকেন্ডে ডেটা আপডেট করে এবং setData দিয়ে নতুন ডেটা সেট করা হয়।
• useEffect দিয়ে আমরা setInterval ব্যবহার করে ২ সেকেন্ডে ডেটা আপডেট করি।

২. Vue.js এর সাথে Chart.js ডেটা আপডেট করা

Vue.js ব্যবহার করে Chart.js এর ডেটা আপডেট করতে, আপনি reactive বা data ব্যবহার করে ডেটা ম্যানেজ করতে পারবেন।

ধাপ ১: Chart.js এবং Vue-Chartjs ইনস্টল করা

npm install chart.js vue-chartjs

ধাপ ২: Vue Component তৈরি করা

<template>
  <div>
    <h2>Real-time Sales Data</h2>
    <LineChart :data="chartData" />
  </div>
</template>

<script>
import { defineComponent, ref, onMounted } from 'vue';
import { Line } from 'vue-chartjs';
import { Chart as ChartJS, Title, Tooltip, Legend, LineElement, CategoryScale, LinearScale } from 'chart.js';

ChartJS.register(Title, Tooltip, Legend, LineElement, CategoryScale, LinearScale);

export default defineComponent({
  components: {
    LineChart: Line
  },
  setup() {
    const chartData = ref({
      labels: ['January', 'February', 'March', 'April', 'May'],
      datasets: [
        {
          label: 'Sales',
          data: [12, 19, 3, 5, 2],
          fill: false,
          borderColor: 'rgba(75, 192, 192, 1)',
          tension: 0.1
        }
      ]
    });

    // Function to update chart data
    const updateData = () => {
      const newData = [...chartData.value.datasets[0].data];
      newData.push(Math.floor(Math.random() * 100));
      newData.shift(); // Remove the first element to keep the size constant

      chartData.value = {
        labels: chartData.value.labels,
        datasets: [
          {
            label: 'Sales',
            data: newData,
            fill: false,
            borderColor: 'rgba(75, 192, 192, 1)',
            tension: 0.1
          }
        ]
      };
    };

    // Update data every 2 seconds
    onMounted(() => {
      setInterval(updateData, 2000);
    });

    return { chartData };
  }
});
</script>

ব্যাখ্যা:

• ref দিয়ে চার্টের ডেটা স্টোর করা হয়।
• updateData ফাংশনটি প্রতি ২ সেকেন্ডে ডেটা আপডেট করে।
• setInterval ব্যবহার করে ডেটা আপডেট করা হয়, এবং এই আপডেটটি রিয়েল-টাইমে চার্টে রিফ্লেক্ট হয়।

৩. Angular এর সাথে Chart.js ডেটা আপডেট করা

Angular ব্যবহার করে Chart.js এর মাধ্যমে ডেটা আপডেট করতে, আপনাকে একটি Chart component তৈরি করতে হবে এবং এই কম্পোনেন্টে ডেটা আপডেট করার জন্য ngOnInit বা setInterval ব্যবহার করতে হবে।

ধাপ ১: Chart.js এবং ng2-charts ইনস্টল করা

npm install chart.js ng2-charts

ধাপ ২: Angular Component তৈরি করা

import { Component, OnInit } from '@angular/core';
import { ChartOptions, ChartType, ChartDataSets } from 'chart.js';
import { BaseChartDirective } from 'ng2-charts';

@Component({
  selector: 'app-real-time-chart',
  templateUrl: './real-time-chart.component.html',
  styleUrls: ['./real-time-chart.component.css']
})
export class RealTimeChartComponent implements OnInit {
  public chartOptions: ChartOptions = {
    responsive: true,
  };
  public chartLabels: string[] = ['January', 'February', 'March', 'April', 'May'];
  public chartData: ChartDataSets[] = [
    { data: [12, 19, 3, 5, 2], label: 'Sales' }
  ];
  public chartType: ChartType = 'line';

  constructor() {}

  ngOnInit(): void {
    setInterval(() => {
      const newData = [...this.chartData[0].data as number[]];
      newData.push(Math.floor(Math.random() * 100));
      newData.shift();
      this.chartData = [{ data: newData, label: 'Sales' }];
    }, 2000);
  }
}

ব্যাখ্যা:

• Angular component তৈরি করা হয়েছে যেখানে Chart.js ব্যবহার করা হয়েছে।
• setInterval দিয়ে প্রতি ২ সেকেন্ডে ডেটা আপডেট হচ্ছে।
• chartData এবং chartLabels পরিবর্তন করা হচ্ছে, যাতে রিয়েল-টাইম ডেটা গ্রাফে দেখানো যায়।

সারাংশ

Chart.js এর মাধ্যমে বিভিন্ন ফ্রেমওয়ার্কে রিয়েল-টাইম ডেটা আপডেট করা একটি অত্যন্ত কার্যকর পদ্ধতি। আপনি React, Vue.js, এবং Angular এর মতো ফ্রেমওয়ার্কের মাধ্যমে Chart.js ইনটিগ্রেট করে ডেটা রিয়েল-টাইমে আপডেট করতে পারেন। এতে setInterval, useState, useEffect এবং অন্যান্য লাইফসাইকেল মেথডস ব্যবহার করে ডেটা দ্রুত এবং স্বাভাবিকভাবে আপডেট হয়।