সিম্পল এবং অ্যাডভান্সড সিরিজ কনফিগারেশন

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

১. সিম্পল সিরিজ কনফিগারেশন

একটি সিম্পল সিরিজ কনফিগারেশন হলো যখন আপনি একটি নির্দিষ্ট ধরনের চার্ট তৈরি করেন এবং সেটি একটি সাধারণ ডেটা সেটের সাথে কনফিগার করেন। উদাহরণস্বরূপ, একটি লাইন চার্ট তৈরি করা যা একটি ডেটা সিরিজকে প্রদর্শন করে।

১.১. সিম্পল লাইন চার্ট সিরিজ কনফিগারেশন

package com.mycompany.myproject.client;

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

public class HighchartsIntegration {

    public static native void createChart(String containerId, JsArray<Data> data) /*-{
        $wnd.Highcharts.chart(containerId, {
            chart: {
                type: 'line'
            },
            title: {
                text: 'Simple Line Chart'
            },
            series: [{
                name: 'Data Series',
                data: data  // Simple data series
            }]
        });
    }-*/;

    public static class Data extends JavaScriptObject {
        protected Data() {}

        public final native int getX() /*-{
            return this.x;
        }-*/;

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

এখানে, একটি সিম্পল লাইন চার্ট তৈরি করা হয়েছে যেখানে একটি series রয়েছে এবং সেটিতে name ও data সেট করা হয়েছে। data একটি ডেটা সিরিজ, যা X এবং Y পয়েন্টগুলোর মাধ্যমে প্রদর্শিত হবে।

২. অ্যাডভান্সড সিরিজ কনফিগারেশন

অ্যাডভান্সড সিরিজ কনফিগারেশন ব্যবহার করে আপনি আরো জটিল সিরিজ তৈরি করতে পারেন, যেখানে একাধিক সিরিজ থাকবে, স্ট্যাকড চার্ট, ডেটা লেবেলস, কাস্টমাইজড অ্যাক্সিস এবং অন্যান্য বৈশিষ্ট্য যুক্ত করা যাবে।

২.১. অ্যাডভান্সড লাইন চার্ট সিরিজ কনফিগারেশন

এখানে একটি অ্যাডভান্সড লাইন চার্ট কনফিগারেশন উদাহরণ দেওয়া হলো যেখানে একাধিক সিরিজ এবং কাস্টমাইজড স্টাইলিং করা হয়েছে:

package com.mycompany.myproject.client;

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

public class HighchartsAdvancedIntegration {

    public static native void createChart(String containerId, JsArray<Data> data1, JsArray<Data> data2) /*-{
        $wnd.Highcharts.chart(containerId, {
            chart: {
                type: 'line'
            },
            title: {
                text: 'Advanced Line Chart with Multiple Series'
            },
            xAxis: {
                title: {
                    text: 'Time'
                }
            },
            yAxis: {
                title: {
                    text: 'Value'
                }
            },
            series: [{
                name: 'Series 1',
                data: data1,  // First data series
                color: '#FF5733',  // Custom color for Series 1
                lineWidth: 2
            }, {
                name: 'Series 2',
                data: data2,  // Second data series
                color: '#33FF57',  // Custom color for Series 2
                lineWidth: 2,
                dashStyle: 'ShortDash'  // Custom dash style for Series 2
            }]
        });
    }-*/;

    public static class Data extends JavaScriptObject {
        protected Data() {}

        public final native int getX() /*-{
            return this.x;
        }-*/;

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

এখানে:

• Multiple Series: দুটি সিরিজ (Series 1 এবং Series 2) ব্যবহার করা হয়েছে।
• Color Customization: প্রতিটি সিরিজের জন্য আলাদা রঙ (color) নির্ধারণ করা হয়েছে।
• Line Width: লাইন ওয়াইডনেস কাস্টমাইজ করা হয়েছে।
• Dash Style: একটি সিরিজের জন্য ড্যাশ স্টাইলও কাস্টমাইজ করা হয়েছে।

২.২. স্ট্যাকড কলাম চার্ট সিরিজ কনফিগারেশন

স্ট্যাকড চার্টে একাধিক সিরিজের মান একে অপরের উপরে প্রদর্শিত হয়। এই ধরনের কনফিগারেশন করতে নিম্নলিখিত কোড ব্যবহার করা যেতে পারে:

$wnd.Highcharts.chart('chart-container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Stacked Column Chart'
    },
    plotOptions: {
        column: {
            stacking: 'normal'  // Stack the columns
        }
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
    },
    series: [{
        name: 'Series 1',
        data: [1, 2, 3, 4, 5],
        color: '#FF5733'
    }, {
        name: 'Series 2',
        data: [2, 3, 4, 5, 6],
        color: '#33FF57'
    }]
});

এখানে:

• Stacking: stacking: 'normal' ব্যবহার করা হয়েছে যাতে কলামগুলোর মান একে অপরের উপরে প্রদর্শিত হয়।

৩. অ্যাডভান্সড ডেটা লেবেলস কনফিগারেশন

Highcharts এ ডেটা লেবেলস কাস্টমাইজ করার জন্য আপনি dataLabels অপশন ব্যবহার করতে পারেন। এই অপশন দিয়ে আপনি ডেটা পয়েন্টগুলোর লেবেল, ফন্ট, রঙ এবং অন্যান্য স্টাইলিং কাস্টমাইজ করতে পারবেন।

$wnd.Highcharts.chart('chart-container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Customized Data Labels'
    },
    plotOptions: {
        column: {
            dataLabels: {
                enabled: true,  // Enable data labels
                format: '{y}',  // Display the y-value as the label
                style: {
                    fontSize: '14px',
                    fontWeight: 'bold',
                    color: '#000'
                }
            }
        }
    },
    series: [{
        name: 'Sales',
        data: [10, 20, 30, 40, 50]
    }]
});

এখানে dataLabels এর মাধ্যমে ডেটা পয়েন্টের লেবেল কাস্টমাইজ করা হয়েছে।

সারাংশ

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