চার্টে ডাটা পয়েন্ট হাইলাইট করা

Highcharts আপনাকে বিভিন্ন উপায়ে চার্টের ডেটা পয়েন্ট হাইলাইট করার সুযোগ দেয়। আপনি যদি বিশেষ কোনো ডেটা পয়েন্ট বা সিরিজের কিছু মান হাইলাইট করতে চান, তবে Highcharts-এ সহজেই এটি করা সম্ভব। GWT (Google Web Toolkit) ব্যবহার করে আপনি Java কোডে Highcharts লাইব্রেরি ইন্টিগ্রেট করে ডেটা পয়েন্ট হাইলাইট করতে পারবেন।

নিচে কিছু পদ্ধতি আলোচনা করা হলো, যার মাধ্যমে আপনি Highcharts-এ ডেটা পয়েন্ট হাইলাইট করতে পারেন।

১. Mouseover Event দিয়ে ডেটা পয়েন্ট হাইলাইট করা

Highcharts এর mouseover ইভেন্ট ব্যবহার করে আপনি ডেটা পয়েন্ট হাইলাইট করতে পারেন। এর মাধ্যমে মাউস হোভার করলে নির্দিষ্ট ডেটা পয়েন্ট হাইলাইট হবে। নিচে একটি উদাহরণ দেওয়া হলো:

Highcharts.chart('container', {
    chart: {
        type: 'line'
    },
    title: {
        text: 'Data Point Highlight Example'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
    },
    yAxis: {
        title: {
            text: 'Values'
        }
    },
    series: [{
        name: 'Sales',
        data: [10, 20, 30, 40, 50],
        point: {
            events: {
                mouseOver: function () {
                    this.graphic.attr({
                        fill: '#FF5733'  // হাইলাইট করার জন্য পয়েন্টের রঙ পরিবর্তন
                    });
                },
                mouseOut: function () {
                    this.graphic.attr({
                        fill: '#7cb5ec'  // মাউস আউট হলে পয়েন্টের রঙ পূর্বাবস্থায় ফিরে যাবে
                    });
                }
            }
        }
    }]
});

এখানে:

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

২. Data Point Highlighting with Markers

Highcharts এ আপনি marker প্রোপার্টি ব্যবহার করে ডেটা পয়েন্টগুলোকে হাইলাইট করতে পারেন। এই পদ্ধতিতে, আপনি একটি নির্দিষ্ট ডেটা পয়েন্টের মার্কার (চিহ্ন) কাস্টমাইজ করে সেটিকে হাইলাইট করতে পারবেন।

Highcharts.chart('container', {
    chart: {
        type: 'line'
    },
    title: {
        text: 'Data Point Marker Highlight'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
    },
    yAxis: {
        title: {
            text: 'Sales'
        }
    },
    series: [{
        name: 'Sales Data',
        data: [5, 10, 15, 20, 25],
        marker: {
            enabled: true,  // মার্কার সক্রিয় করা
            symbol: 'circle',  // মার্কারের ধরন (circle, square, triangle)
            radius: 6,  // মার্কারের আকার
            states: {
                hover: {
                    enabled: true,  // হোভার করলে মার্কার প্রদর্শন হবে
                    radius: 8,  // হোভার করলে মার্কারের আকার বৃদ্ধি পাবে
                    fillColor: '#FF5733'  // হোভার করলে মার্কারের রঙ পরিবর্তন
                }
            }
        }
    }]
});

এখানে:

• marker প্রোপার্টির মাধ্যমে আপনি প্রতিটি ডেটা পয়েন্টে মার্কার যোগ করেছেন।
• states.hover কনফিগারেশন দিয়ে হোভার করার সময় মার্কারের আকার এবং রঙ পরিবর্তন করা হয়েছে।

৩. Data Point Highlighting Using Specific Conditions

Highcharts এ আপনি নির্দিষ্ট শর্ত অনুযায়ী ডেটা পয়েন্ট হাইলাইট করতে পারেন, যেমন সর্বোচ্চ বা সর্বনিম্ন মান বা অন্য কোনো শর্ত। নিচে একটি উদাহরণ দেয়া হলো যেখানে সর্বোচ্চ মানের ডেটা পয়েন্ট হাইলাইট করা হয়েছে:

Highcharts.chart('container', {
    chart: {
        type: 'line'
    },
    title: {
        text: 'Highlighting Maximum Value'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
    },
    yAxis: {
        title: {
            text: 'Values'
        }
    },
    series: [{
        name: 'Sales Data',
        data: [10, 25, 15, 40, 30],
        dataLabels: {
            enabled: true,  // ডেটা লেবেল সক্রিয় করা
            style: {
                color: '#FF5733',  // সর্বোচ্চ মানের জন্য রঙ পরিবর্তন
                fontWeight: 'bold'
            }
        },
        marker: {
            symbol: 'circle',
            radius: 6
        },
        states: {
            hover: {
                enabled: true
            }
        },
        point: {
            events: {
                mouseOver: function () {
                    if (this.y === Math.max.apply(Math, this.series.data.map(function (point) { return point.y; }))) {
                        this.graphic.attr({
                            fill: '#FF5733'  // সর্বোচ্চ মানের পয়েন্ট হাইলাইট করা
                        });
                    }
                }
            }
        }
    }]
});

এখানে:

• Math.max.apply ব্যবহার করে সর্বোচ্চ মান খুঁজে বের করা হয়েছে এবং সেই মানের পয়েন্টটি হাইলাইট করা হয়েছে।

৪. GWT-এ Highcharts ইন্টিগ্রেশন এবং ডেটা পয়েন্ট হাইলাইট করা

GWT (Google Web Toolkit) ব্যবহার করে আপনি Highcharts কোডের মাধ্যমে ডেটা পয়েন্ট হাইলাইট করতে পারেন। GWT-এ Java কোড থেকে JavaScript কোড কল করার জন্য JSNI (JavaScript Native Interface) ব্যবহার করতে হবে। এখানে একটি উদাহরণ দেওয়া হলো:

public static native void createChartWithHighlightedData(String containerId, JsArrayString categories, JsArrayNumber data) /*-{
    $wnd.Highcharts.chart(containerId, {
        chart: {
            type: 'line'
        },
        title: {
            text: 'Highlight Data Points Example'
        },
        xAxis: {
            categories: categories
        },
        yAxis: {
            title: {
                text: 'Values'
            }
        },
        series: [{
            name: 'Sales Data',
            data: data,
            marker: {
                enabled: true,
                symbol: 'circle',
                radius: 6
            },
            point: {
                events: {
                    mouseOver: function () {
                        this.graphic.attr({
                            fill: '#FF5733'
                        });
                    },
                    mouseOut: function () {
                        this.graphic.attr({
                            fill: '#7cb5ec'
                        });
                    }
                }
            }
        }]
    });
}-*/;

এখানে:

• GWT-এ Java কোড ব্যবহার করে JavaScript কোডকে কল করা হচ্ছে, যেখানে mouseover ইভেন্ট ব্যবহার করে ডেটা পয়েন্ট হাইলাইট করা হয়েছে।

সারাংশ

Highcharts-এ ডেটা পয়েন্ট হাইলাইট করার জন্য আপনি বিভিন্ন কৌশল ব্যবহার করতে পারেন, যেমন mouseover ইভেন্ট, marker কাস্টমাইজেশন এবং শর্তসাপেক্ষ হাইলাইটিং। GWT ব্যবহার করে Java কোডের মাধ্যমে Highcharts লাইব্রেরির এই বৈশিষ্ট্যগুলো ব্যবহার করা সম্ভব, যা আপনাকে একটি শক্তিশালী এবং ইন্টারঅ্যাকটিভ ডেটা ভিজুয়ালাইজেশন তৈরি করতে সহায়তা করে।