Live Data Visualization এর জন্য চার্ট আপডেট করা

Highcharts-এ লাইভ ডেটা ভিজুয়ালাইজেশন তৈরির জন্য চার্ট আপডেট করা খুবই গুরুত্বপূর্ণ একটি ফিচার, যা রিয়েল-টাইম ডেটা ডিসপ্লে করার জন্য ব্যবহৃত হয়। এতে, চার্টটি স্বয়ংক্রিয়ভাবে আপডেট হয় যখন নতুন ডেটা আসে, এবং এটি ইউজারের কাছে সর্বশেষ এবং সঠিক তথ্য সরবরাহ করে। Live Data Visualization এর জন্য আমরা setInterval অথবা WebSocket ব্যবহার করে ডেটার পরিবর্তনগুলি সময়-সময়ে চার্টে আপডেট করতে পারি।

নিচে Highcharts-এ লাইভ ডেটা ভিজুয়ালাইজেশনের জন্য একটি সাধারণ উদাহরণ দেখানো হলো, যেখানে একটি লাইন চার্ট প্রতি সেকেন্ডে আপডেট হয় নতুন ডেটা সহ।

উদাহরণ: Live Data Visualization - Line Chart

Highcharts.chart('container', {
    chart: {
        type: 'line',
        animation: false  // Animation বন্ধ করে রাখা
    },
    title: {
        text: 'Live Data Visualization Example'  // চার্টের শিরোনাম
    },
    xAxis: {
        type: 'datetime',  // x-axis টাইম স্ট্যাম্প ব্যবহার
        tickPixelInterval: 150
    },
    yAxis: {
        title: {
            text: 'Value'
        }
    },
    series: [{
        name: 'Live Data',
        data: (function () {
            var data = [],
                time = (new Date()).getTime(),
                i;

            for (i = -10; i <= 0; i++) {
                data.push({
                    x: time + i * 1000,
                    y: Math.random() * 100  // র্যান্ডম ডেটা
                });
            }
            return data;
        })()
    }]
});

// Live Data Update Every Second
setInterval(function () {
    var chart = Highcharts.chart('container'),
        series = chart.series[0],
        x = (new Date()).getTime(),  // বর্তমান সময়
        y = Math.random() * 100;  // র্যান্ডম ডেটা

    // নতুন ডেটা যুক্ত করা
    series.addPoint([x, y], true, true);  // true মানে: সর্বশেষ পয়েন্টে স্ক্রল হবে
}, 1000);

কোডের ব্যাখ্যা:

1. Chart Configuration:
   • type: 'line' এর মাধ্যমে লাইন চার্ট তৈরি করা হয়েছে।
   • animation: false ব্যবহার করা হয়েছে যাতে লাইভ ডেটা আপডেটের সময় অ্যানিমেশন নিষ্ক্রিয় থাকে এবং তা দ্রুত আপডেট হয়।
   • xAxis: { type: 'datetime' } ব্যবহার করা হয়েছে যাতে x-অক্ষের মানটি টাইম স্ট্যাম্প হিসেবে প্রদর্শিত হয়।
2. Data Initialization:
   • প্রথমে কিছু র্যান্ডম ডেটা উৎপন্ন করা হয়েছে যাতে প্রথমবারের জন্য চার্টে কিছু ডেটা প্রদর্শিত হয়। data.push({ x: time + i * 1000, y: Math.random() * 100 }) ব্যবহার করা হয়েছে যাতে ডেটা প্রতিটি সেকেন্ডে সময় অনুযায়ী যোগ করা হয়।
3. Live Data Update (setInterval):
   • setInterval() ফাংশন ব্যবহার করা হয়েছে যা প্রতি এক সেকেন্ডে একটি নতুন পয়েন্ট যুক্ত করবে।
   • series.addPoint([x, y], true, true) ব্যবহার করা হয়েছে, যা প্রতিবার নতুন পয়েন্ট যোগ করার পর চার্টটি আপডেট করবে এবং স্ক্রল করবে যাতে সর্বশেষ পয়েন্ট দেখা যায়।

উদাহরণ: Live Data Visualization - Column Chart

একইভাবে আপনি একটি কলাম চার্টেও লাইভ ডেটা আপডেট করতে পারেন। নিচে একটি উদাহরণ দেখানো হলো যেখানে কলাম চার্টে প্রতি সেকেন্ডে ডেটা আপডেট হচ্ছে।

Highcharts.chart('container', {
    chart: {
        type: 'column',
        animation: false  // Animation বন্ধ
    },
    title: {
        text: 'Live Data Column Chart Example'
    },
    xAxis: {
        type: 'datetime'
    },
    yAxis: {
        title: {
            text: 'Units Sold'
        }
    },
    series: [{
        name: 'Sales',
        data: (function () {
            var data = [],
                time = (new Date()).getTime(),
                i;

            for (i = -10; i <= 0; i++) {
                data.push({
                    x: time + i * 1000,
                    y: Math.random() * 50  // র্যান্ডম ডেটা
                });
            }
            return data;
        })()
    }]
});

// Live Data Update Every Second
setInterval(function () {
    var chart = Highcharts.chart('container'),
        series = chart.series[0],
        x = (new Date()).getTime(),
        y = Math.random() * 50;

    series.addPoint([x, y], true, true);  // প্রতিবার নতুন পয়েন্টে স্ক্রল হবে
}, 1000);

WebSocket ব্যবহার করে লাইভ ডেটা আপডেট

একটি আরও উন্নত পদ্ধতি হল WebSocket ব্যবহার করা, যেখানে ডেটা সার্ভার থেকে সরাসরি আসবে এবং চার্টে সরাসরি আপডেট হবে।

// WebSocket সংযোগ
var socket = new WebSocket('ws://your-websocket-server');

socket.onmessage = function(event) {
    var data = JSON.parse(event.data);  // সার্ভার থেকে প্রাপ্ত ডেটা

    // নতুন ডেটা সিরিজে যোগ করা
    var chart = Highcharts.chart('container'),
        series = chart.series[0];

    var x = (new Date()).getTime();  // বর্তমান সময়
    var y = data.value;  // সার্ভার থেকে আসা ডেটা

    series.addPoint([x, y], true, true);
};

এখানে WebSocket ব্যবহার করে লাইভ ডেটা সার্ভার থেকে আসছে, এবং সেই ডেটা সঠিকভাবে চার্টে আপডেট হচ্ছে।

সারাংশ

Highcharts এ লাইভ ডেটা ভিজুয়ালাইজেশনের জন্য চার্ট আপডেট করার বিভিন্ন পদ্ধতি রয়েছে। setInterval() দিয়ে প্রতি সেকেন্ডে র্যান্ডম ডেটা যুক্ত করা অথবা WebSocket ব্যবহার করে সরাসরি সার্ভার থেকে আসা ডেটা আপডেট করা সম্ভব। এর মাধ্যমে আপনি রিয়েল-টাইম ডেটা প্রদর্শন করতে পারবেন, যা চার্টের ইন্টারঅ্যাকটিভিটি এবং ডায়নামিকনেস বাড়িয়ে দেয়।