Big Data and Analytics Highcharts এর জন্য Built-in Events (load, click, etc.) গাইড ও নোট

Highcharts লাইব্রেরি আপনাকে built-in events প্রদান করে, যা চার্টের বিভিন্ন উপাদানের সাথে ইন্টারঅ্যাকশন তৈরি করতে সহায়ক। এই ইভেন্টগুলোর মাধ্যমে আপনি chart, series, point, xAxis, yAxis ইত্যাদি বিভিন্ন উপাদানে অ্যাকশন বা রেসপন্স করতে পারেন। এই ইভেন্টগুলো ব্যবহারকারীর কার্যকলাপ বা ডেটার পরিবর্তন অনুযায়ী চার্টে কোনো কিছু পরিবর্তন করার সুযোগ দেয়।

Highcharts এর built-in ইভেন্টগুলোর মধ্যে অন্যতম হল load, click, mouseover, mouseout, update, selection ইত্যাদি। চলুন, এগুলোর ব্যবহার এবং কাস্টমাইজেশন নিয়ে আলোচনা করি।

Highcharts Built-in Events: কীভাবে কাজ করে?

Highcharts এর built-in events ইভেন্ট হ্যান্ডলার হিসেবে কাজ করে, যেখানে আপনি প্রতিটি ইভেন্টের জন্য একটি callback function সংজ্ঞায়িত করতে পারেন। ইভেন্টগুলি সাধারণত chart, series, বা point-এর সাথে সংযুক্ত থাকে, এবং আপনি সেগুলোকে trigger (ক্রিয়াকলাপ) বা handle (প্রক্রিয়া) করতে পারেন।

ইভেন্টগুলোর সাধারণ সিনট্যাক্স:

chartInstance.on('eventName', function () {
    // ইভেন্ট ঘটলে যা করতে চান তা এখানে
});

এখানে, chartInstance হল আপনার চার্টের ইনস্ট্যান্স এবং 'eventName' হল ইভেন্টের নাম (যেমন 'load', 'click', ইত্যাদি)।

Highcharts এর কিছু সাধারণ Built-in Events

১. load Event

load ইভেন্ট তখন ট্রিগার হয় যখন চার্ট প্রথমবার রেন্ডার হয়। এটি সাধারণত চার্টের প্রথম লোডিং বা ইনিশিয়ালাইজেশনের সময় কাজ করে।

উদাহরণ:

Highcharts.chart('container', {
    chart: {
        type: 'line',
        events: {
            load: function () {
                alert('চার্ট লোড হয়েছে!');
            }
        }
    },
    title: {
        text: 'বিক্রয় ডেটা'
    },
    series: [{
        data: [10, 20, 30, 40, 50]
    }]
});

এখানে, load ইভেন্টটি চার্ট লোড হলে একটি এলার্ট বার্তা দেখাবে।

২. click Event

click ইভেন্ট তখন ঘটে যখন আপনি চার্টের উপর ক্লিক করেন। এটি সাধারণত point, series, বা chart-এ ক্লিক করার সময় ট্রিগার হয়। আপনি এই ইভেন্টটি ব্যবহার করে point বা series এর সাথে ইন্টারঅ্যাকশন করতে পারেন।

উদাহরণ:

Highcharts.chart('container', {
    chart: {
        type: 'column',
        events: {
            click: function (event) {
                alert('চার্টে ক্লিক করা হয়েছে। কোঅর্ডিনেট: ' + event.xAxis[0].value);
            }
        }
    },
    title: {
        text: 'বিক্রয় ডেটা'
    },
    series: [{
        data: [10, 20, 30, 40, 50]
    }]
});

এখানে, যখন ব্যবহারকারী চার্টে ক্লিক করবেন, তখন একটি এলার্ট বার্তা দেখানো হবে যা ক্লিক করা স্থানটির xAxis মান প্রদর্শন করবে।

৩. mouseOver Event

mouseOver ইভেন্ট তখন ট্রিগার হয় যখন আপনি চার্টের কোনো পয়েন্টের উপর মাউস রাখেন। এটি সাধারণত tooltip বা point highlight সহ ইন্টারঅ্যাকশন তৈরি করতে ব্যবহৃত হয়।

উদাহরণ:

Highcharts.chart('container', {
    chart: {
        type: 'line'
    },
    title: {
        text: 'বিক্রয় প্রবণতা'
    },
    series: [{
        data: [10, 20, 30, 40, 50],
        point: {
            events: {
                mouseOver: function () {
                    alert('পয়েন্টের উপর মাউস রেখেছেন: ' + this.y);
                }
            }
        }
    }]
});

এখানে, যখন একটি point এর উপর মাউস রাখা হয়, তখন একটি এলার্ট বার্তা দেখানো হবে যার মধ্যে সেই point এর মান (যেমন y মান) প্রদর্শিত হবে।

৪. mouseOut Event

mouseOut ইভেন্ট তখন ট্রিগার হয় যখন আপনি চার্টের কোনো পয়েন্টের উপর থেকে মাউস সরিয়ে নেন। এটি সাধারণত highlighting বা tooltip এর সাথে ব্যবহৃত হয়।

উদাহরণ:

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'বিক্রয় ডেটা'
    },
    series: [{
        data: [10, 20, 30, 40, 50],
        point: {
            events: {
                mouseOut: function () {
                    alert('পয়েন্টের উপর থেকে মাউস সরানো হয়েছে!');
                }
            }
        }
    }]
});

এখানে, যখন আপনি একটি point এর উপর থেকে মাউস সরিয়ে নেবেন, তখন একটি এলার্ট বার্তা দেখানো হবে।

৫. selection Event

selection ইভেন্ট তখন ট্রিগার হয় যখন আপনি চার্টের একটি অংশ নির্বাচন করেন (যেমন, একটি রেঞ্জ নির্বাচন করা)। এটি zooming বা panning এর জন্য ব্যবহার করা হয়।

উদাহরণ:

Highcharts.chart('container', {
    chart: {
        type: 'line',
        events: {
            selection: function (event) {
                alert('নির্বাচিত রেঞ্জ: ' + event.xAxis[0].min + ' - ' + event.xAxis[0].max);
            }
        }
    },
    title: {
        text: 'বিক্রয় ডেটা'
    },
    series: [{
        data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100]
    }]
});

এখানে, যখন আপনি চার্টের কোনো অংশ নির্বাচন করবেন, তখন একটি এলার্ট বার্তা দেখানো হবে যা নির্বাচিত রেঞ্জের xAxis মান প্রদর্শন করবে।

ইভেন্টের সাথে ডেটা আপডেট

আপনি Highcharts এর ইভেন্ট ব্যবহার করে ডেটা আপডেট বা চার্ট রিফ্রেশ করতে পারেন। উদাহরণস্বরূপ, click ইভেন্টে সিরিজের ডেটা পরিবর্তন বা নতুন ডেটা যোগ করা যেতে পারে।

উদাহরণ:

Highcharts.chart('container', {
    chart: {
        type: 'line',
        events: {
            click: function () {
                var newData = [5, 15, 25, 35, 45];
                this.series[0].setData(newData);
            }
        }
    },
    title: {
        text: 'বিক্রয় প্রবণতা'
    },
    series: [{
        data: [10, 20, 30, 40, 50]
    }]
});

এখানে, যখন ব্যবহারকারী চার্টে ক্লিক করবেন, তখন series[0] এর ডেটা পরিবর্তিত হয়ে newData প্রদর্শিত হবে।

উপসংহার

Highcharts এর built-in events চার্টের বিভিন্ন উপাদান যেমন chart, series, point, xAxis, yAxis ইত্যাদির সাথে ইন্টারঅ্যাকশন করতে সহায়ক। আপনি load, click, mouseover, mouseout, selection ইত্যাদি ইভেন্ট ব্যবহার করে চার্টের ইন্টারঅ্যাকটিভিটি এবং কার্যক্ষমতা কাস্টমাইজ করতে পারেন। এই ইভেন্টগুলো callback function ব্যবহার করে আপনি কার্যকরভাবে আপনার চার্টের আচরণ নিয়ন্ত্রণ করতে পারবেন। Highcharts এর এই শক্তিশালী ফিচারগুলো ডেটা ভিজুয়ালাইজেশনকে আরও আকর্ষণীয় এবং ব্যবহারকারী-বান্ধব করে তোলে।