Interactive এবং Drilldown চার্ট

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

এখানে GWT এবং Highcharts ব্যবহার করে Interactive Charts এবং Drilldown Charts তৈরির পদ্ধতি আলোচনা করা হলো।

১. Interactive Charts

Highcharts এ ইন্টারঅ্যাকটিভিটি যোগ করার মাধ্যমে ব্যবহারকারী সহজেই চার্টের বিভিন্ন উপাদান (যেমন, লেবেল, বার, পয়েন্ট ইত্যাদি) এর সাথে ইন্টারঅ্যাক্ট করতে পারে। Highcharts তে বিভিন্ন ধরনের ইন্টারঅ্যাকটিভ ফিচার যেমন zoom, tooltip, hover effects, draggable points, ইত্যাদি পাওয়া যায়।

Interactive Features উদাহরণ

1. Tooltip কাস্টমাইজেশন: Highcharts তে টুলটিপ কাস্টমাইজ করা খুবই সহজ। আপনি মাউস হোভার করার সময় ডেটার বিস্তারিত তথ্য দেখতে পারবেন।

   tooltip: {
       shared: true,  // একাধিক সিরিজের জন্য টুলটিপ শেয়ার করা
       valueSuffix: ' ৳'  // টুলটিপে মানের শেষে সিকোয়েন্স যোগ করা
   }
   

2. Zoom Functionality: Highcharts তে জুম ফিচার ব্যবহারের মাধ্যমে ব্যবহারকারী সহজেই চার্টের একটি নির্দিষ্ট অংশে জুম ইন বা জুম আউট করতে পারবেন।

   chart: {
       zoomType: 'xy'  // এক্স এবং ওয়াই-অক্ষের জন্য জুম সক্ষম করা
   }
   

3. Point Hover Effects: যখন আপনি চার্টের কোনো পয়েন্টের উপর মাউস নিয়ে যাবেন, তখন ব্যবহারকারীরা চার্টের অংশের সাথে ইন্টারঅ্যাক্ট করতে পারেন।

   plotOptions: {
       series: {
           cursor: 'pointer',  // পয়েন্টের উপর ক্লিক করার জন্য কাঁটাচামচ পয়েন্ট
           point: {
               events: {
                   mouseOver: function () {
                       this.update({color: '#ff0000'});  // হোভার করার সময় পয়েন্টের রঙ পরিবর্তন
                   },
                   mouseOut: function () {
                       this.update({color: '#00ff00'});  // মাউস আউট হলে রঙ আগের মতো করা
                   }
               }
           }
       }
   }
   

এই কনফিগারেশনের মাধ্যমে আপনার চার্টে ইন্টারঅ্যাকটিভিটি যোগ করা সম্ভব।

২. Drilldown Charts

Drilldown চার্ট ব্যবহারকারীদেরকে বিস্তারিত ডেটাতে ড্রিলডাউন করার সুবিধা দেয়। এটি বিশেষভাবে ব্যবহারকারীকে একটি উপস্থাপনা থেকে আরও ডিটেইলড ডেটা দেখতে সহায়তা করে, যখন একটি নির্দিষ্ট ডেটা পয়েন্টে ক্লিক করা হয়।

Highcharts এ Drilldown ফিচারটি কার্যকরীভাবে কাজ করে এবং এটি মূলত ডেটার স্তরভিত্তিক বিশ্লেষণ প্রদান করে। এটি বিভিন্ন সিরিজের মধ্যে ক্লিকেবল এলিমেন্ট তৈরি করতে সাহায্য করে, যা ব্যবহারকারীদের একটি গভীর স্তরে নিয়ে যায়।

Drilldown Chart উদাহরণ

// ডেটা এবং সিরিজের জন্য কনফিগারেশন
series: [{
    name: 'ফল',
    data: [
        ['Apple', 10],
        ['Banana', 15],
        ['Orange', 25]
    ]
}],
drilldown: {
    series: [{
        id: 'Apple',  // Apple সিরিজের জন্য ড্রিলডাউন কনফিগারেশন
        data: [
            ['Green Apple', 5],
            ['Red Apple', 5]
        ]
    }, {
        id: 'Banana',  // Banana সিরিজের জন্য ড্রিলডাউন কনফিগারেশন
        data: [
            ['Ripe Banana', 10],
            ['Unripe Banana', 5]
        ]
    }]
}

ব্যাখ্যা:

• id: এখানে 'Apple' এবং 'Banana' সিরিজের জন্য আলাদা আলাদা আইডি ব্যবহার করা হয়েছে।
• data: প্রতিটি সিরিজের ভিতরে থাকা ডেটাকে ড্রিলডাউন করা যায়। উদাহরণস্বরূপ, 'Apple' এ ক্লিক করলে 'Green Apple' এবং 'Red Apple' নামে দুটি নতুন ডেটা ভিউ হবে।

Drilldown Event Handling

ড্রিলডাউন ইভেন্ট হ্যান্ডেল করার জন্য, Highcharts এর drilldown ইভেন্ট ব্যবহার করা যেতে পারে।

chart: {
    events: {
        drilldown: function (e) {
            console.log('Drilled down to: ' + e.point.name);
        }
    }
}

এই কোড ব্লকে, drilldown ইভেন্টের মাধ্যমে আপনি জানতে পারবেন কোন পয়েন্টে ড্রিলডাউন করা হয়েছে এবং সেগুলোর নাম অথবা ডেটা দেখতে পারবেন।

৩. GWT এর সাথে Interactive এবং Drilldown Chart ইন্টিগ্রেশন

GWT অ্যাপ্লিকেশনে Highcharts এর ইন্টারঅ্যাকটিভ এবং ড্রিলডাউন চার্ট ইন্টিগ্রেট করতে হলে আপনাকে JavaScriptOverlay ব্যবহার করতে হবে। নিচে একটি উদাহরণ দেয়া হলো কিভাবে GWT অ্যাপ্লিকেশনে Highcharts ড্রিলডাউন চার্ট ইন্টিগ্রেট করা যায়।

package com.mycompany.myproject.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.JsArray;
import com.google.gwt.user.client.ui.RootPanel;

public class HighchartsExample implements EntryPoint {

    // JSNI ফাংশন ব্যবহার করে Highcharts চার্ট তৈরি
    public native void createChartWithDrilldown(JavaScriptObject chartData) /*-{
        $wnd.Highcharts.chart('container', {
            chart: {
                type: 'pie'
            },
            title: {
                text: 'Fruit Distribution'
            },
            series: chartData.series,
            drilldown: {
                series: chartData.drilldown
            }
        });
    }-*/;

    @Override
    public void onModuleLoad() {
        // JSON অবজেক্ট তৈরি করা
        JavaScriptObject chartData = createChartData();

        // Highcharts এ JSON ডেটা পাস করা
        createChartWithDrilldown(chartData);
    }

    // JSON ডেটা তৈরি করার জন্য একটি JavaScriptObject তৈরি করা
    private native JavaScriptObject createChartData() /*-{
        return {
            series: [{
                name: 'Fruits',
                data: [
                    ['Apple', 10],
                    ['Banana', 15],
                    ['Orange', 25]
                ]
            }],
            drilldown: {
                series: [{
                    id: 'Apple',
                    data: [
                        ['Green Apple', 5],
                        ['Red Apple', 5]
                    ]
                }, {
                    id: 'Banana',
                    data: [
                        ['Ripe Banana', 10],
                        ['Unripe Banana', 5]
                    ]
                }]
            }
        };
    }-*/;
}

এই কোডে:

• createChartWithDrilldown ফাংশনটি Highcharts এর ড্রিলডাউন এবং ইন্টারঅ্যাকটিভ চার্ট তৈরি করে।
• JSON ডেটা তৈরি করা হয়েছে createChartData ফাংশনে, যেখানে সিরিজ এবং ড্রিলডাউন সিরিজ ডেটা দেওয়া হয়েছে।

সারাংশ

Highcharts ব্যবহার করে GWT অ্যাপ্লিকেশনে Interactive Charts এবং Drilldown Charts ইন্টিগ্রেট করা সম্ভব, যা আপনার ওয়েব অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ এবং ব্যবহারকারী-বান্ধব করে তোলে। Interactive Charts বিভিন্ন ইন্টারঅ্যাকটিভ ফিচার যেমন টুলটিপ, জুম, হোভার ইফেক্টস ইত্যাদি প্রদান করে, এবং Drilldown Charts ব্যবহারকারীদেরকে ডেটার আরও বিস্তারিত স্তরে নিয়ে যায়। GWT এর মাধ্যমে Highcharts এর এই ফিচারগুলো সহজে অ্যাপ্লিকেশনগুলিতে ইন্টিগ্রেট করা যায় এবং এটি ডেটা ভিজুয়ালাইজেশনের শক্তিশালী টুল হিসেবে কাজ করে।

Highcharts একটি অত্যন্ত শক্তিশালী লাইব্রেরি যা শুধুমাত্র ডেটা ভিজুয়ালাইজেশন নয়, বরং ইন্টারঅ্যাকটিভ ফিচার যোগ করতেও সাহায্য করে। GWT (Google Web Toolkit) এর মাধ্যমে আপনি Highcharts এর ইন্টারঅ্যাকটিভ ফিচারগুলো যেমন: হোভার ইফেক্ট, ক্লিক ইভেন্ট, জুম ইন/আউট, প্যানিং, টুলটিপ ইত্যাদি যুক্ত করতে পারেন। এগুলো ব্যবহারকারীর অভিজ্ঞতা উন্নত করে এবং চার্টের সাথে আরও যুক্তিযুক্ত ইন্টারঅ্যাকশন সম্ভব করে।

এই অংশে, আমরা আলোচনা করব কিভাবে GWT অ্যাপ্লিকেশনে Highcharts চার্টে ইন্টারঅ্যাকশন যোগ করা যায়।

১. ইন্টারঅ্যাকটিভ টুলটিপ (Interactive Tooltip)

Highcharts দিয়ে আপনি খুব সহজেই টুলটিপ যোগ করতে পারেন, যা ডেটা পয়েন্টের উপর হোভার করলে অতিরিক্ত তথ্য দেখায়। GWT দিয়ে এটি কাস্টমাইজ করা সম্ভব।

টুলটিপ কাস্টমাইজেশন

tooltip: {
    formatter: function () {
        return 'Month: ' + this.point.category + '<br>Value: ' + this.point.y;
    }
}

এই কনফিগারেশন দিয়ে আপনি টুলটিপে কাস্টম ইনফরমেশন যেমন মাস এবং মান প্রদর্শন করতে পারবেন।

GWT ক্লাসে টুলটিপ সেট করা

public native void createChartWithTooltip(JavaScriptObject chartData) /*-{
    $wnd.Highcharts.chart('container', {
        chart: {
            type: 'line'
        },
        title: {
            text: 'Sales Data'
        },
        tooltip: {
            formatter: function () {
                return 'Month: ' + this.point.category + '<br>Sales: ' + this.point.y;
            }
        },
        series: [{
            name: 'Sales',
            data: chartData
        }]
    });
}-*/;

এখানে, Highcharts এর tooltip.formatter মেথড ব্যবহার করে কাস্টম টুলটিপ কনফিগার করা হয়েছে।

২. ক্লিক ইভেন্ট (Click Event)

Highcharts ক্লিক ইভেন্টের মাধ্যমে ডেটা পয়েন্টের উপর ক্লিক করলে আপনি কিছু করতে পারেন, যেমন বিস্তারিত তথ্য প্রদর্শন বা অন্য কোন অ্যাকশন। GWT অ্যাপ্লিকেশনে ক্লিক ইভেন্টের মাধ্যমে আপনি ইন্টারঅ্যাকশন সহজেই যোগ করতে পারেন।

ক্লিক ইভেন্ট কনফিগারেশন

plotOptions: {
    series: {
        point: {
            events: {
                click: function () {
                    alert('You clicked on ' + this.category + ': ' + this.y);
                }
            }
        }
    }
}

এখানে, ক্লিক ইভেন্টে this.category এবং this.y ব্যবহার করে পয়েন্টের ক্যাটেগরি এবং মান (Value) প্রদর্শিত হচ্ছে।

GWT ক্লাসে ক্লিক ইভেন্ট

public native void createChartWithClickEvent(JavaScriptObject chartData) /*-{
    $wnd.Highcharts.chart('container', {
        chart: {
            type: 'line'
        },
        title: {
            text: 'Sales Data'
        },
        plotOptions: {
            series: {
                point: {
                    events: {
                        click: function () {
                            alert('You clicked on ' + this.category + ': ' + this.y);
                        }
                    }
                }
            }
        },
        series: [{
            name: 'Sales',
            data: chartData
        }]
    });
}-*/;

এখানে, click ইভেন্ট ব্যবহার করা হয়েছে যা ব্যবহারকারী যখন চার্টের পয়েন্টে ক্লিক করবে, তখন একটি পপ-আপ (অ্যালার্ট) প্রদর্শিত হবে।

৩. জুম ইন/আউট (Zoom In/Out)

Highcharts এর সাথে জুম ইন/আউট ফিচারও খুব সহজেই যোগ করা যায়। এটি গ্রাফের বিভিন্ন অংশে ডেটার গভীরে যাওয়ার জন্য বা এক্সেল ডেটা বিশ্লেষণের জন্য সাহায্য করে।

জুম কনফিগারেশন

chart: {
    zoomType: 'xy'  // X এবং Y অক্ষ উভয়ই জুম করা যাবে
}

GWT ক্লাসে জুম ইন/আউট যোগ করা

public native void createChartWithZoom(JavaScriptObject chartData) /*-{
    $wnd.Highcharts.chart('container', {
        chart: {
            type: 'line',
            zoomType: 'xy'  // X এবং Y অক্ষ উভয়েই জুম করা যাবে
        },
        title: {
            text: 'Sales Data'
        },
        series: [{
            name: 'Sales',
            data: chartData
        }]
    });
}-*/;

এখানে, zoomType: 'xy' এর মাধ্যমে X এবং Y উভয় অক্ষেই জুম ইন/আউট করা যাবে।

৪. প্যানিং (Panning)

Highcharts-এ প্যানিং ফিচার যোগ করা সম্ভব যা চার্টের একটি অংশ থেকে অন্য অংশে স্ক্রোল করার অনুমতি দেয়।

প্যানিং কনফিগারেশন

chart: {
    panning: true,  // প্যানিং সক্ষম করা
    panKey: 'shift'  // প্যানিং করার জন্য Shift কিপ্রেস ব্যবহার করা
}

GWT ক্লাসে প্যানিং যোগ করা

public native void createChartWithPanning(JavaScriptObject chartData) /*-{
    $wnd.Highcharts.chart('container', {
        chart: {
            type: 'line',
            panning: true,
            panKey: 'shift'  // Shift কিপ্রেস ব্যবহার করে প্যানিং করা যাবে
        },
        title: {
            text: 'Sales Data'
        },
        series: [{
            name: 'Sales',
            data: chartData
        }]
    });
}-*/;

এখানে, panning: true এবং panKey: 'shift' সেট করার মাধ্যমে আপনি Shift কিপ্রেস ব্যবহার করে চার্টে প্যানিং করতে পারবেন।

৫. লেজেন্ড ইন্টারঅ্যাকশন (Legend Interaction)

Highcharts এর লেজেন্ড ইন্টারঅ্যাকশন ফিচার ব্যবহার করে আপনি সিরিজের প্রদর্শন/অদৃশ্য করার জন্য ব্যবহারকারীকে সুযোগ দিতে পারেন। এটি বিশেষ করে লেজেন্ডের ক্লিক ইভেন্টে কার্যকর।

লেজেন্ড কাস্টমাইজেশন

legend: {
    enabled: true,
    itemClick: function(event) {
        alert('You clicked on ' + event.target.name);
    }
}

GWT ক্লাসে লেজেন্ড ইন্টারঅ্যাকশন

public native void createChartWithLegendInteraction(JavaScriptObject chartData) /*-{
    $wnd.Highcharts.chart('container', {
        chart: {
            type: 'line'
        },
        title: {
            text: 'Sales Data'
        },
        legend: {
            enabled: true,
            itemClick: function(event) {
                alert('You clicked on ' + event.target.name);
            }
        },
        series: [{
            name: 'Sales',
            data: chartData
        }]
    });
}-*/;

এখানে, itemClick ইভেন্ট ব্যবহার করে লেজেন্ডে ক্লিক করলে একটি পপ-আপ শো করবে যেখানে সিরিজের নাম প্রদর্শিত হবে।

সারাংশ

Highcharts এর মাধ্যমে GWT অ্যাপ্লিকেশনগুলোতে বিভিন্ন ধরনের ইন্টারঅ্যাকটিভ ফিচার যোগ করা সম্ভব। এর মধ্যে রয়েছে টুলটিপ কাস্টমাইজেশন, ক্লিক ইভেন্ট, জুম ইন/আউট, প্যানিং এবং লেজেন্ড ইন্টারঅ্যাকশন। GWT এবং Highcharts এর শক্তিশালী ইন্টিগ্রেশন ব্যবহার করে আপনি আপনার চার্টের ইন্টারঅ্যাকটিভিটি বৃদ্ধি করতে পারেন এবং ব্যবহারকারীদের জন্য আরও তথ্যপূর্ণ এবং ডায়নামিক অভিজ্ঞতা তৈরি করতে পারেন।

Highcharts-এ Drilldown একটি শক্তিশালী বৈশিষ্ট্য যা আপনাকে চার্টে ক্লিক করে আরও বিস্তারিত তথ্য দেখতে সাহায্য করে। এটি মূলত একটি ইন্টারঅ্যাকটিভ ফিচার, যেখানে আপনি একটি ডেটা পয়েন্টে ক্লিক করলে আরো ছোট আকারে বিস্তারিত ডেটা প্রদর্শিত হয়। GWT (Google Web Toolkit) ব্যবহার করে Highcharts এর Drilldown ফিচার ইনটিগ্রেট করতে পারবেন।

নিচে Highcharts Drilldown চার্ট তৈরি করার একটি উদাহরণ দেয়া হলো এবং GWT কোডে Drilldown চার্ট ব্যবহারের পদ্ধতি দেওয়া হলো।

Drilldown চার্ট তৈরি করার পদক্ষেপ

১. Drilldown কনফিগারেশন

Drilldown ফিচারটি সাধারণত একটি সিরিজের (Series) মধ্যে অতিরিক্ত তথ্য প্রদর্শন করার জন্য ব্যবহৃত হয়। প্রথমে একটি সাধারণ চার্ট তৈরি করা হয়, এবং তারপর প্রতিটি ডেটা পয়েন্টের জন্য Drilldown ডেটা যুক্ত করা হয়। নিচে Drilldown কনফিগারেশনের একটি উদাহরণ দেওয়া হলো:

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Sales Data'
    },
    subtitle: {
        text: 'Click on a column to view more details'
    },
    xAxis: {
        type: 'category'
    },
    yAxis: {
        title: {
            text: 'Sales'
        }
    },
    series: [{
        name: 'Sales by Region',
        colorByPoint: true,
        data: [{
            name: 'North America',
            y: 30,
            drilldown: 'northAmerica'  // Drilldown ডেটা সংযুক্ত করা
        }, {
            name: 'Europe',
            y: 20,
            drilldown: 'europe'
        }, {
            name: 'Asia',
            y: 50,
            drilldown: 'asia'
        }]
    }],
    drilldown: {
        series: [{
            id: 'northAmerica',
            data: [
                ['USA', 15],
                ['Canada', 10],
                ['Mexico', 5]
            ]
        }, {
            id: 'europe',
            data: [
                ['UK', 8],
                ['Germany', 6],
                ['France', 6]
            ]
        }, {
            id: 'asia',
            data: [
                ['China', 25],
                ['India', 15],
                ['Japan', 10]
            ]
        }]
    }
});

এখানে:

• drilldown: মূল সিরিজের ডেটা পয়েন্টে ক্লিক করলে Drilldown সিরিজের ডেটা দেখাবে।
• drilldown.series: Drilldown সিরিজের ডেটা সংজ্ঞায়িত করা হয়েছে, যেখানে প্রতিটি অঞ্চলের বিস্তারিত ডেটা দেওয়া হয়েছে।
• drilldown.id: Drilldown ডেটার পরিচিতি (যেমন, 'northAmerica', 'europe', 'asia')।

২. GWT-এ Drilldown চার্ট ইন্টিগ্রেশন

GWT (Google Web Toolkit) দিয়ে Highcharts-এর Drilldown ফিচার ব্যবহার করতে, আপনাকে JavaScriptNativeInterface (JSNI) ব্যবহার করতে হবে। JSNI ব্যবহারের মাধ্যমে Java থেকে JavaScript ফাংশন কল করা সম্ভব হয়। নিচে একটি উদাহরণ দেওয়া হলো, যেখানে GWT অ্যাপ্লিকেশনে Highcharts Drilldown চার্ট ব্যবহার করা হয়েছে:

২.১. JavaScriptOverlay ব্যবহার করে Highcharts Drilldown ফিচার

package com.mycompany.myproject.client;

import com.google.gwt.core.client.JavaScriptObject;
import com.google.gwt.core.client.JsArray;

public class HighchartsIntegration {

    // JavaScriptOverlay ক্লাস তৈরি করা
    public static native void createDrilldownChart(String containerId, JsArray<Data> data, JsArray<DrilldownSeries> drilldownSeries) /*-{
        $wnd.Highcharts.chart(containerId, {
            chart: {
                type: 'column'
            },
            title: {
                text: 'Sales Data'
            },
            subtitle: {
                text: 'Click on a column to view more details'
            },
            xAxis: {
                type: 'category'
            },
            yAxis: {
                title: {
                    text: 'Sales'
                }
            },
            series: [{
                name: 'Sales by Region',
                colorByPoint: true,
                data: data
            }],
            drilldown: {
                series: drilldownSeries  // Drilldown ডেটা সিরিজ
            }
        });
    }-*/;

    // Data ক্লাস (ডেটার জন্য)
    public static class Data extends JavaScriptObject {
        protected Data() {}

        public final native String getName() /*-{
            return this.name;
        }-*/;

        public final native int getY() /*-{
            return this.y;
        }-*/;

        public final native String getDrilldown() /*-{
            return this.drilldown;
        }-*/;
    }

    // DrilldownSeries ক্লাস (Drilldown ডেটার জন্য)
    public static class DrilldownSeries extends JavaScriptObject {
        protected DrilldownSeries() {}

        public final native String getId() /*-{
            return this.id;
        }-*/;

        public final native JsArray<Data> getData() /*-{
            return this.data;
        }-*/;
    }
}

২.২. Static ডেটা তৈরি করা

এখন Static ডেটা তৈরি করে Drilldown ফিচারটি GWT এ ব্যবহার করা হবে। নিচে Static ডেটা তৈরি করার পদ্ধতি দেওয়া হলো:

package com.mycompany.myproject.client;

import com.google.gwt.core.client.JsArray;
import com.google.gwt.user.client.ui.RootPanel;

public class HighchartsExample {

    public void loadChart() {
        // Static ডেটা তৈরি করা
        JsArray<HighchartsIntegration.Data> data = createStaticData();
        
        // Drilldown সিরিজ ডেটা তৈরি করা
        JsArray<HighchartsIntegration.DrilldownSeries> drilldownSeries = createDrilldownSeries();
        
        // Highcharts Drilldown chart তৈরি করা
        HighchartsIntegration.createDrilldownChart("chart-container", data, drilldownSeries);
    }

    // Static ডেটা তৈরি করার জন্য মেথড
    private JsArray<HighchartsIntegration.Data> createStaticData() {
        JsArray<HighchartsIntegration.Data> data = JsArray.createArray().cast();
        
        HighchartsIntegration.Data dataPoint1 = createDataPoint("North America", 30, "northAmerica");
        HighchartsIntegration.Data dataPoint2 = createDataPoint("Europe", 20, "europe");
        HighchartsIntegration.Data dataPoint3 = createDataPoint("Asia", 50, "asia");

        data.push(dataPoint1);
        data.push(dataPoint2);
        data.push(dataPoint3);

        return data;
    }

    // Drilldown সিরিজ তৈরি করার জন্য মেথড
    private JsArray<HighchartsIntegration.DrilldownSeries> createDrilldownSeries() {
        JsArray<HighchartsIntegration.DrilldownSeries> series = JsArray.createArray().cast();
        
        HighchartsIntegration.DrilldownSeries series1 = createDrilldownSeries("northAmerica", createDrilldownData("USA", 15, "Canada", 10, "Mexico", 5));
        HighchartsIntegration.DrilldownSeries series2 = createDrilldownSeries("europe", createDrilldownData("UK", 8, "Germany", 6, "France", 6));
        HighchartsIntegration.DrilldownSeries series3 = createDrilldownSeries("asia", createDrilldownData("China", 25, "India", 15, "Japan", 10));

        series.push(series1);
        series.push(series2);
        series.push(series3);

        return series;
    }

    // Drilldown ডেটা তৈরি করার জন্য মেথড
    private JsArray<HighchartsIntegration.Data> createDrilldownData(String... countriesAndSales) {
        JsArray<HighchartsIntegration.Data> data = JsArray.createArray().cast();
        for (int i = 0; i < countriesAndSales.length; i += 2) {
            HighchartsIntegration.Data dataPoint = createDataPoint(countriesAndSales[i], Integer.parseInt(countriesAndSales[i + 1]), "");
            data.push(dataPoint);
        }
        return data;
    }

    // Static Data পয়েন্ট তৈরি করার জন্য মেথড
    private HighchartsIntegration.Data createDataPoint(String name, int y, String drilldown) {
        HighchartsIntegration.Data dataPoint = JavaScriptObject.createObject().cast();
        dataPoint.setName(name);
        dataPoint.setY(y);
        dataPoint.setDrilldown(drilldown);
        return dataPoint;
    }

    // DrilldownSeries পয়েন্ট তৈরি করার জন্য মেথড
    private HighchartsIntegration.DrilldownSeries createDrilldownSeries(String id, JsArray<HighchartsIntegration.Data> data) {
        HighchartsIntegration.DrilldownSeries series = JavaScriptObject.createObject().cast();
        series.setId(id);
        series.setData(data);
        return series;
    }
}

২.৩. HTML ফাইল

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Highcharts Drilldown Example</title>
    <script src="js/highcharts.js"></script>
</head>
<body>
    <div id="chart-container" style="width: 100%; height: 400px;"></div>
</body>
</html>

সারাংশ

Highcharts-এ Drilldown ফিচারটি ব্যবহার করে আপনি একটি ইন্টারঅ্যাকটিভ চার্ট তৈরি করতে পারেন যেখানে ডেটা পয়েন্টে ক্লিক করে আরও বিস্তারিত তথ্য দেখানো হয়। GWT-এ Highcharts Drilldown চার্ট তৈরি করতে JavaScriptNativeInterface (JSNI) ব্যবহার করা হয়। GWT এবং Highcharts একত্রিত করে Static ডেটা এবং Drilldown সিরিজ ব্যবহার করা যায়, যা ওয়েব অ্যাপ্লিকেশনে উন্নত ডেটা ভিজুয়ালাইজেশন এবং ইন্টারঅ্যাকশন প্রদান করে।

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 কনফিগারেশন ব্যবহার করে আপনি এই বৈশিষ্ট্যগুলো আপনার অ্যাপ্লিকেশনে দ্রুত সংযুক্ত করতে পারেন। এর মাধ্যমে আপনি আপনার চার্টগুলিকে আরো ব্যবহারকারী-বান্ধব এবং ডাইনামিক করতে পারবেন, যা ওয়েব অ্যাপ্লিকেশনটির কার্যক্ষমতা এবং ইউজার এক্সপেরিয়েন্সকে উন্নত করবে।

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 ইন্টিগ্রেট করতে পারেন, যাতে ব্যবহারকারীরা যখন কোনো ডেটা পয়েন্টে ক্লিক করেন, তখন সেই ডেটা বা মান সম্পর্কিত তথ্য প্রদর্শিত হয়। এটি আপনার ওয়েব অ্যাপ্লিকেশন বা ড্যাশবোর্ডকে আরও ইন্টারঅ্যাকটিভ এবং ইউজার ফ্রেন্ডলি করে তোলে।