চার্টে Multiple Axes যোগ করা

Highcharts লাইব্রেরি আপনাকে একাধিক Axes (অক্ষ) যোগ করার সুবিধা দেয়, যা একসাথে বিভিন্ন ধরনের ডেটা প্রদর্শন করতে সাহায্য করে। সাধারণত, X এবং Y অক্ষের সাথে একাধিক ডেটা সিরিজ বা স্কেল ব্যবহার করার প্রয়োজন হলে Multiple Axes ব্যবহার করা হয়। GWT (Google Web Toolkit) ব্যবহার করে আপনি Highcharts এর মাধ্যমে সহজেই Multiple Axes যোগ করতে পারেন এবং একাধিক অক্ষের মধ্যে ডেটা রেঞ্জ এবং স্কেল কাস্টমাইজ করতে পারেন।

এই সেকশনে আমরা দেখব কিভাবে GWT এবং Highcharts ব্যবহার করে একাধিক অক্ষ (Multiple Axes) যুক্ত করা যায়।

১. Highcharts-এ Multiple Axes কাস্টমাইজেশন

Highcharts এ Multiple Axes যোগ করার জন্য, আপনাকে xAxis এবং yAxis অপশনের মধ্যে একাধিক অক্ষ কনফিগার করতে হবে। এখানে একটি উদাহরণ দেওয়া হলো, যেখানে একটি চার্টে দুটি Y অক্ষ (Primary এবং Secondary Y-Axis) ব্যবহার করা হয়েছে।

উদাহরণ: Multiple Axes সহ চার্ট তৈরি করা

$wnd.Highcharts.chart('container', {
    chart: {
        type: 'line'
    },
    title: {
        text: 'Multiple Axes Example'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    yAxis: [{ // Primary Y-Axis
        title: {
            text: 'Temperature (°C)'
        },
        min: 0
    }, { // Secondary Y-Axis
        title: {
            text: 'Rainfall (mm)'
        },
        opposite: true, // Secondary Y-Axis will be placed on the right
        min: 0
    }],
    series: [{
        name: 'Temperature',
        data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
    }, {
        name: 'Rainfall',
        data: [30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140],
        yAxis: 1 // Linking Rainfall data to the secondary Y-Axis
    }]
});

এই উদাহরণে:

• প্রথম yAxis হচ্ছে Primary Y-Axis, যা তাপমাত্রার (Temperature) জন্য ব্যবহৃত হচ্ছে।
• দ্বিতীয় yAxis হচ্ছে Secondary Y-Axis, যা বৃষ্টিপাতের (Rainfall) জন্য ব্যবহৃত হচ্ছে এবং opposite: true প্রপার্টি ব্যবহার করে এটি ডান পাশে অবস্থান করবে।
• series[1] (Rainfall) কে Secondary Y-Axis এর সাথে সংযুক্ত করা হয়েছে yAxis: 1 সেটিং ব্যবহার করে।

২. GWT এ Multiple Axes কাস্টমাইজেশন

GWT এবং Highcharts এর মধ্যে ইন্টিগ্রেশন করতে, আমরা JavaScript Overlay বা JsInterop ব্যবহার করে Highcharts এর কোডে একাধিক অক্ষ কাস্টমাইজেশন যোগ করতে পারি। নিচে একটি উদাহরণ দেওয়া হলো কিভাবে GWT-এ Multiple Axes কাস্টমাইজ করা যায়।

GWT কোডে Multiple Axes যুক্ত করা

public class HighchartsMultipleAxesExample {
    
    public void createChart() {
        // Multiple Axes এর জন্য ডেটা তৈরি করা
        String chartData = "[[1, 29], [2, 71], [3, 106], [4, 129], [5, 144]]";
        String rainfallData = "[[1, 30], [2, 40], [3, 50], [4, 60], [5, 70]]";
        
        // Highcharts JSNI ফাংশন ব্যবহার করে চার্ট তৈরি করা
        createMultipleAxesChart(chartData, rainfallData);
    }

    private native void createMultipleAxesChart(String temperatureData, String rainfallData) /*-{
        var chart = new $wnd.Highcharts.chart('container', {
            chart: {
                type: 'line'
            },
            title: {
                text: 'Multiple Axes with GWT'
            },
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
            },
            yAxis: [{
                title: {
                    text: 'Temperature (°C)'
                },
                min: 0
            }, {
                title: {
                    text: 'Rainfall (mm)'
                },
                opposite: true, // Secondary Y-Axis will be placed on the right
                min: 0
            }],
            series: [{
                name: 'Temperature',
                data: $wnd.JSON.parse(temperatureData)
            }, {
                name: 'Rainfall',
                data: $wnd.JSON.parse(rainfallData),
                yAxis: 1 // Linking Rainfall data to the secondary Y-Axis
            }]
        });
    }-*/;
}

এখানে:

• createMultipleAxesChart() ফাংশনটি temperatureData এবং rainfallData পাস করে Highcharts চার্ট তৈরি করে।
• প্রথম yAxis (Primary) তাপমাত্রা (Temperature) প্রদর্শন করে, এবং দ্বিতীয় yAxis (Secondary) বৃষ্টিপাত (Rainfall) প্রদর্শন করে।
• yAxis: 1 ব্যবহার করে বৃষ্টিপাতের ডেটা Secondary Y-Axis এর সাথে সংযুক্ত করা হয়েছে।

৩. Multiple Axes এর আরও কাস্টমাইজেশন

Highcharts এ Multiple Axes কাস্টমাইজ করা আরও কয়েকটি উপায়ে করা যেতে পারে:

• Axis Grid Lines: আপনি একাধিক অক্ষের জন্য গ্রিড লাইন কাস্টমাইজ করতে পারেন, যেমন একটি অক্ষের জন্য হালকা গ্রিড লাইন এবং অন্যটির জন্য গা dark ় গ্রিড লাইন।
• Axis Titles: প্রতিটি অক্ষের জন্য আলাদা টাইটেল সেট করা যেতে পারে, যেমন "Temperature (°C)" এবং "Rainfall (mm)"।
• Axis Ranges: আপনি যেকোনো অক্ষের জন্য min, max, tickInterval ইত্যাদি সেটিংস ব্যবহার করে রেঞ্জ এবং স্কেল কাস্টমাইজ করতে পারেন।

উদাহরণ: গ্রিড লাইন কাস্টমাইজ করা

yAxis: [{
    title: {
        text: 'Temperature (°C)'
    },
    gridLineWidth: 1, // Primary Y-Axis grid line width
    gridLineColor: '#cccccc' // Grid line color for primary axis
}, {
    title: {
        text: 'Rainfall (mm)'
    },
    gridLineWidth: 2, // Secondary Y-Axis grid line width
    gridLineColor: '#ff0000', // Grid line color for secondary axis
    opposite: true
}]

এখানে:

• Primary Y-Axis এর জন্য গ্রিড লাইন হালকা রঙে এবং প্রস্থ 1 সেট করা হয়েছে।
• Secondary Y-Axis এর জন্য গ্রিড লাইন গা dark ় রঙে এবং প্রস্থ 2 সেট করা হয়েছে।

সারাংশ

Highcharts ব্যবহার করে একাধিক অক্ষ (Multiple Axes) যোগ করা খুবই সহজ এবং শক্তিশালী একটি বৈশিষ্ট্য, যা বিভিন্ন ধরনের ডেটা রেঞ্জ এবং স্কেলকে একসাথে প্রদর্শন করতে সাহায্য করে। GWT এবং Highcharts এর মাধ্যমে আপনি এই Multiple Axes কাস্টমাইজ করতে পারেন এবং একটি উন্নত ও ইন্টারঅ্যাকটিভ চার্ট তৈরি করতে পারেন। GWT-এ JavaScript Overlay বা JsInterop ব্যবহার করে Highcharts এর কাস্টমাইজেশন গুলি একত্রিত করা সম্ভব, যা ডেভেলপারদের জন্য আরও কার্যকর এবং নমনীয় সমাধান প্রদান করে।