Zooming, Panning, এবং Hover ইফেক্ট যোগ করা

Highcharts একটি অত্যন্ত শক্তিশালী লাইব্রেরি যা বিভিন্ন ধরনের ইন্টারঅ্যাকটিভ বৈশিষ্ট্য প্রদান করে। এর মধ্যে Zooming, Panning এবং Hover ইফেক্টগুলি অন্যতম। GWT এবং Highcharts একত্রে ব্যবহার করার মাধ্যমে আপনি ওয়েব অ্যাপ্লিকেশনে এসব ইন্টারঅ্যাকটিভ বৈশিষ্ট্য খুব সহজে সংযুক্ত করতে পারেন।

এখানে GWT এবং Highcharts এর মাধ্যমে Zooming, Panning, এবং Hover ইফেক্ট যোগ করার পদ্ধতি বর্ণনা করা হলো।

১. Zooming যোগ করা

Zooming এর মাধ্যমে ব্যবহারকারী তাদের মাউস ব্যবহার করে চার্টের X বা Y অক্ষ বরাবর ডেটা আরও বিস্তারিতভাবে দেখতে পারেন। Highcharts লাইব্রেরিতে Zooming সমর্থিত এবং এটি chart.zoomType কনফিগারেশন অপশনের মাধ্যমে সক্রিয় করা হয়।

Zooming কনফিগারেশন:

public native void createZoomableChart(JavaScriptObject chartData) /*-{
    $wnd.Highcharts.chart('container', {
        chart: {
            type: 'line',
            zoomType: 'xy'  // এটি X এবং Y অক্ষের উপর জুম সক্রিয় করে
        },
        title: {
            text: 'Zooming Example'
        },
        xAxis: {
            categories: chartData.categories
        },
        yAxis: {
            title: {
                text: 'Value'
            }
        },
        series: chartData.series
    });
}-*/;

এখানে zoomType: 'xy' দ্বারা উল্লিখিত হয়েছে যে, চার্টের উভয় অক্ষ (X এবং Y) জুম করা যাবে। আপনি এটি x বা y দিয়েও কনফিগার করতে পারেন, অর্থাৎ শুধুমাত্র এক অক্ষের জন্য Zooming চালু করতে পারেন।

২. Panning যোগ করা

Panning হলো যখন আপনি চার্টের ডেটা একটি নির্দিষ্ট দিক (উপরে, নিচে, বামে, ডানে) স্ক্রল করতে পারেন। Highcharts এ Panning সাপোর্ট করে এবং এটি chart.panKey এবং chart.panning এর মাধ্যমে কনফিগার করা যায়।

Panning কনফিগারেশন:

public native void createPannableChart(JavaScriptObject chartData) /*-{
    $wnd.Highcharts.chart('container', {
        chart: {
            type: 'line',
            panning: true,
            panKey: 'shift'  // Shift কীগুলি ব্যবহার করে প্যানিং সক্ষম করা
        },
        title: {
            text: 'Panning Example'
        },
        xAxis: {
            categories: chartData.categories
        },
        yAxis: {
            title: {
                text: 'Value'
            }
        },
        series: chartData.series
    });
}-*/;

এখানে panning: true দ্বারা Panning সক্ষম করা হয়েছে এবং panKey: 'shift' দ্বারা এটি নির্ধারণ করা হয়েছে যে, Panning কেবল Shift কী প্রেস করলে হবে। আপনি এটি কাস্টমাইজও করতে পারেন, যেমন panKey: 'alt' বা অন্য কোন কী ব্যবহার করতে।

৩. Hover ইফেক্ট যোগ করা

Hover ইফেক্টের মাধ্যমে ব্যবহারকারী চার্টের কোনো নির্দিষ্ট ডেটা পয়েন্টের উপর মাউস হভার করলে সেই পয়েন্টের সম্পর্কে আরও তথ্য দেখানো হয়। Highcharts এ Hover ইফেক্ট সহজে কাস্টমাইজ করা যায়।

Hover ইফেক্ট কনফিগারেশন:

public native void createChartWithHoverEffect(JavaScriptObject chartData) /*-{
    $wnd.Highcharts.chart('container', {
        chart: {
            type: 'line'
        },
        title: {
            text: 'Hover Effect Example'
        },
        xAxis: {
            categories: chartData.categories
        },
        yAxis: {
            title: {
                text: 'Value'
            }
        },
        series: chartData.series,
        plotOptions: {
            series: {
                point: {
                    events: {
                        mouseOver: function () {
                            this.update({
                                marker: {
                                    radius: 10
                                }
                            });
                        },
                        mouseOut: function () {
                            this.update({
                                marker: {
                                    radius: 5
                                }
                            });
                        }
                    }
                }
            }
        }
    });
}-*/;

এখানে plotOptions.series.point.events.mouseOver এবং mouseOut ইভেন্ট ব্যবহার করা হয়েছে:

• mouseOver ইভেন্টে ডেটা পয়েন্টের মার্কার রেডিয়াস পরিবর্তন করা হচ্ছে (ডেটা পয়েন্ট বড় হবে)।
• mouseOut ইভেন্টে পূর্বাবস্থায় ফিরে আসবে (মার্কার রেডিয়াস ছোট হবে)।

৪. Zooming, Panning এবং Hover ইফেক্ট একত্রে ব্যবহার

নিচে একটি সম্পূর্ণ উদাহরণ দেওয়া হলো যেখানে Zooming, Panning, এবং Hover ইফেক্ট একসাথে ব্যবহার করা হয়েছে:

public native void createInteractiveChart(JavaScriptObject chartData) /*-{
    $wnd.Highcharts.chart('container', {
        chart: {
            type: 'line',
            zoomType: 'xy',
            panning: true,
            panKey: 'shift'
        },
        title: {
            text: 'Interactive Chart with Zooming, Panning, and Hover Effect'
        },
        xAxis: {
            categories: chartData.categories
        },
        yAxis: {
            title: {
                text: 'Value'
            }
        },
        series: chartData.series,
        plotOptions: {
            series: {
                point: {
                    events: {
                        mouseOver: function () {
                            this.update({
                                marker: {
                                    radius: 10
                                }
                            });
                        },
                        mouseOut: function () {
                            this.update({
                                marker: {
                                    radius: 5
                                }
                            });
                        }
                    }
                }
            }
        }
    });
}-*/;

এখানে:

• Zooming: zoomType: 'xy' দিয়ে X এবং Y অক্ষের উপর Zooming সক্ষম করা হয়েছে।
• Panning: panning: true এবং panKey: 'shift' দিয়ে Panning যোগ করা হয়েছে।
• Hover Effect: mouseOver এবং mouseOut ইভেন্ট দ্বারা Hover এফেক্ট কাস্টমাইজ করা হয়েছে।

সারাংশ

Highcharts এ Zooming, Panning, এবং Hover ইফেক্ট যোগ করা খুবই সহজ এবং ইন্টারঅ্যাকটিভ ওয়েব অ্যাপ্লিকেশন তৈরি করার জন্য অত্যন্ত কার্যকরী। GWT এর মাধ্যমে JavaScript কনফিগারেশন ব্যবহার করে আপনি এই বৈশিষ্ট্যগুলো আপনার অ্যাপ্লিকেশনে দ্রুত সংযুক্ত করতে পারেন। এর মাধ্যমে আপনি আপনার চার্টগুলিকে আরো ব্যবহারকারী-বান্ধব এবং ডাইনামিক করতে পারবেন, যা ওয়েব অ্যাপ্লিকেশনটির কার্যক্ষমতা এবং ইউজার এক্সপেরিয়েন্সকে উন্নত করবে।