Click Events এর মাধ্যমে ডেটা দেখানো

Highcharts ব্যবহার করে আপনি খুব সহজেই Click Events এর মাধ্যমে ডেটা প্রদর্শন করতে পারেন। এর মাধ্যমে ব্যবহারকারী যখন কোনো ডেটা পয়েন্ট বা সিরিজে ক্লিক করেন, তখন সেসম্পর্কিত তথ্য প্রদর্শিত হবে। এই ফিচারটি সাধারণত ডেটা ইন্টারঅ্যাকশন এবং ইউজার ফ্রেন্ডলি ইউজার ইন্টারফেস তৈরি করার জন্য ব্যবহৃত হয়।

GWT (Google Web Toolkit) ব্যবহার করে Highcharts-এ Click Event ইন্টিগ্রেট করা সম্ভব, যার মাধ্যমে আপনি ওয়েব অ্যাপ্লিকেশন বা ড্যাশবোর্ডে ব্যবহারকারীদের জন্য ইন্টারঅ্যাকটিভ ডেটা প্রদর্শন করতে পারেন।

১. Highcharts Click Event কনফিগারেশন

Highcharts এ click event কনফিগার করা খুবই সহজ। আপনি যখন একটি সিরিজ বা ডেটা পয়েন্টে ক্লিক করেন, তখন click ইভেন্ট ট্রিগার হয় এবং আপনি এটি কাস্টমাইজ করে বিভিন্ন তথ্য প্রদর্শন করতে পারেন।

নিচে একটি উদাহরণ দেওয়া হলো যেখানে একটি লাইন চার্টের ডেটা পয়েন্টে ক্লিক করলে সেই পয়েন্টের ডেটা প্রদর্শিত হবে:

Highcharts.chart('container', {
    chart: {
        type: 'line'
    },
    title: {
        text: 'Sales Data'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
    },
    yAxis: {
        title: {
            text: 'Sales in USD'
        }
    },
    series: [{
        name: 'Sales',
        data: [10, 20, 30, 40, 50],
        point: {
            events: {
                click: function () {
                    alert('You clicked on ' + this.category + ' with sales value ' + this.y);
                }
            }
        }
    }]
});

এখানে:

• click ইভেন্ট ব্যবহার করা হয়েছে, যা ব্যবহারকারী যখন কোনো ডেটা পয়েন্টে ক্লিক করবেন, তখন সেই পয়েন্টের ক্যাটেগরি এবং মান (value) প্রদর্শিত হবে।
• this.category দ্বারা x-axis এর ক্যাটেগরি এবং this.y দ্বারা y-axis এর মান পাওয়া যায়।

২. GWT কোডে Highcharts Click Event ব্যবহার

GWT (Google Web Toolkit) ব্যবহার করে Java কোডের মাধ্যমে Highcharts এ Click Event ইন্টিগ্রেট করা হয়। JSNI (JavaScript Native Interface) এর মাধ্যমে আপনি JavaScript কোড ব্যবহার করে Highcharts ইভেন্ট হ্যান্ডলার যোগ করতে পারেন। নিচে একটি উদাহরণ দেওয়া হলো:

public static native void createChartWithClickEvent(String containerId, JsArrayString categories, JsArrayNumber data) /*-{
    $wnd.Highcharts.chart(containerId, {
        chart: {
            type: 'line'
        },
        title: {
            text: 'Sales Data'
        },
        xAxis: {
            categories: categories
        },
        yAxis: {
            title: {
                text: 'Sales in USD'
            }
        },
        series: [{
            name: 'Sales',
            data: data,
            point: {
                events: {
                    click: function () {
                        alert('You clicked on ' + this.category + ' with sales value ' + this.y);
                    }
                }
            }
        }]
    });
}-*/;

এখানে:

• createChartWithClickEvent ফাংশনটি GWT ক্লাসের মধ্যে JavaScript কোডে Highcharts চার্ট তৈরি করার জন্য ব্যবহৃত হয়েছে।
• click ইভেন্ট ট্রিগার করা হচ্ছে, যাতে ব্যবহারকারী একটি ডেটা পয়েন্টে ক্লিক করলে তা সম্পর্কিত তথ্য প্রদর্শিত হয়।

৩. Click Event দ্বারা ডেটা HTML-এ প্রদর্শন

আপনি ক্লিক ইভেন্ট ব্যবহার করে ডেটাকে ওয়েব পৃষ্ঠায় HTML এলিমেন্টে প্রদর্শনও করতে পারেন। উদাহরণস্বরূপ, আপনি একটি পপআপ বা ডায়লগে তথ্য দেখানোর বদলে, সরাসরি পৃষ্ঠায় তথ্য তুলে ধরতে পারেন:

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Monthly Sales'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
    },
    yAxis: {
        title: {
            text: 'Sales (USD)'
        }
    },
    series: [{
        name: 'Sales',
        data: [100, 200, 300, 400, 500],
        point: {
            events: {
                click: function () {
                    document.getElementById('dataDisplay').innerHTML = 'You clicked on ' + this.category + ' with sales value: ' + this.y;
                }
            }
        }
    }]
});

এখানে:

• document.getElementById('dataDisplay').innerHTML ব্যবহার করা হয়েছে, যা ক্লিক করা ডেটা পয়েন্টের তথ্য HTML পৃষ্ঠায় একটি নির্দিষ্ট এলিমেন্টে (যেমন dataDisplay) প্রদর্শন করবে।

৪. GWT কোডে HTML-এ ডেটা দেখানো

GWT-এ আপনি JavaScript ইভেন্ট ব্যবহার করে এই একই কাজ করতে পারেন, যা HTML পৃষ্ঠায় ডেটা দেখানোর জন্য JavaScript DOM ম্যানিপুলেশন ব্যবহার করবে।

public static native void createChartWithDisplay(String containerId, JsArrayString categories, JsArrayNumber data) /*-{
    var chart = $wnd.Highcharts.chart(containerId, {
        chart: {
            type: 'column'
        },
        title: {
            text: 'Monthly Sales'
        },
        xAxis: {
            categories: categories
        },
        yAxis: {
            title: {
                text: 'Sales (USD)'
            }
        },
        series: [{
            name: 'Sales',
            data: data,
            point: {
                events: {
                    click: function () {
                        $doc.getElementById('dataDisplay').innerHTML = 'You clicked on ' + this.category + ' with sales value: ' + this.y;
                    }
                }
            }
        }]
    });
}-*/;

এখানে:

• innerHTML ব্যবহার করে JavaScript DOM ম্যানিপুলেশন দ্বারা ডেটা HTML পৃষ্ঠায় প্রদর্শিত হচ্ছে।
• GWT কোডে এই ইভেন্টের মাধ্যমে আপনি JavaScript DOM উপাদানগুলোর সাথে ইন্টারঅ্যাক্ট করতে পারেন।

সারাংশ

Highcharts এ Click Events ব্যবহার করে আপনি ডেটার উপর ইন্টারঅ্যাকশন তৈরি করতে পারেন। GWT ব্যবহার করে আপনি Java কোডের মাধ্যমে এই Click Events ইন্টিগ্রেট করতে পারেন, যাতে ব্যবহারকারীরা যখন কোনো ডেটা পয়েন্টে ক্লিক করেন, তখন সেই ডেটা বা মান সম্পর্কিত তথ্য প্রদর্শিত হয়। এটি আপনার ওয়েব অ্যাপ্লিকেশন বা ড্যাশবোর্ডকে আরও ইন্টারঅ্যাকটিভ এবং ইউজার ফ্রেন্ডলি করে তোলে।