Drilldown চার্ট তৈরি এবং ব্যবহার

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