Big Data and Analytics Custom Tooltip Template এবং Formatters ব্যবহার গাইড ও নোট

Tooltip হলো এমন একটি ইন্টারঅ্যাকটিভ বৈশিষ্ট্য, যা গ্রাফের উপর মাউস নিয়ে গেলে সংশ্লিষ্ট তথ্য দেখায়। Highcharts এ Custom Tooltip Template এবং Formatters ব্যবহার করে আপনি টুলটিপের কনটেন্ট এবং প্রদর্শন প্রক্রিয়া কাস্টমাইজ করতে পারেন। এতে ব্যবহারকারীরা ডেটার বিস্তারিত আরও সহজে বুঝতে পারে।

Custom Tooltip Template

Highcharts এ টুলটিপ কাস্টমাইজ করার জন্য আপনি tooltip.formatter ফাংশন ব্যবহার করতে পারেন, যা আপনাকে টুলটিপের কনটেন্টের জন্য কাস্টম টেমপ্লেট তৈরি করতে দেয়। আপনি টুলটিপে কোন তথ্য দেখাবেন, তা আপনার প্রয়োজন অনুযায়ী নির্ধারণ করতে পারেন।

Custom Tooltip Example

Highcharts.chart('container', {
    chart: {
        type: 'line'
    },
    title: {
        text: 'মাল্টিপল সিরিজের চার্ট'
    },
    tooltip: {
        useHTML: true, // HTML ব্যবহার করার জন্য
        formatter: function() {
            return '<b>' + this.series.name + '</b><br>' +
                   'মাস: ' + this.x + '<br>' + 
                   'মূল্য: ' + this.y;
        }
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
    },
    series: [{
        name: 'বিক্রয়',
        data: [29, 71, 106, 129, 144]
    }, {
        name: 'বজার মূল্য',
        data: [10, 20, 30, 40, 50]
    }]
});

এখানে, tooltip.formatter ফাংশনটি ব্যবহার করে কাস্টম টুলটিপ তৈরি করা হয়েছে, যা series.name, x (মাস), এবং y (মূল্য) প্রদর্শন করে। useHTML: true এর মাধ্যমে HTML ট্যাগ ব্যবহার করা হয়েছে, যাতে আপনি কাস্টম স্টাইলও অ্যাপ্লাই করতে পারেন।

Tooltip Formatters

Formatter একটি ফাংশন যা ডেটার একটি নির্দিষ্ট পয়েন্টের জন্য টুলটিপের কনটেন্ট কাস্টমাইজ করার জন্য ব্যবহার করা হয়। Highcharts এ, tooltip.formatter একটি খুব শক্তিশালী টুল, যা আপনাকে ডেটা এবং অন্যান্য কনটেক্সটের উপর ভিত্তি করে টুলটিপ কনটেন্ট সম্পূর্ণভাবে কাস্টমাইজ করতে দেয়।

Tooltip Formatter Syntax

tooltip: {
    formatter: function() {
        // এখানে `this` ব্যবহার করতে পারেন টুলটিপের ডেটার অ্যাক্সেসের জন্য
        return '<b>' + this.series.name + '</b><br>' +
               'মাস: ' + this.x + '<br>' + 
               'মূল্য: ' + this.y;
    }
}

this শব্দটি একটি টুলটিপ ইভেন্টের কনটেক্সট প্রদান করে, যাতে আপনি টুলটিপের সব তথ্য (যেমন series.name, x, y, ইত্যাদি) অ্যাক্সেস করতে পারেন।

অন্যান্য Formatters

1. x এবং y ফরম্যাটিং: আপনি টুলটিপে সংখ্যা বা ডেটা ফরম্যাট করার জন্য JavaScript এর Intl.NumberFormat বা অন্যান্য ফরম্যাটিং ফাংশন ব্যবহার করতে পারেন।

   tooltip: {
       formatter: function() {
           return '<b>' + this.series.name + '</b><br>' +
                  'মাস: ' + this.x + '<br>' + 
                  'মূল্য: ' + new Intl.NumberFormat().format(this.y);
       }
   }
   

2. Date Formatting: যদি আপনার x-axis এ তারিখ থাকে, আপনি তা কাস্টম ফরম্যাটে প্রদর্শন করতে পারেন।

   tooltip: {
       formatter: function() {
           var date = Highcharts.dateFormat('%A, %b %d, %Y', this.x);  // তারিখ ফরম্যাট
           return '<b>' + this.series.name + '</b><br>' +
                  'তারিখ: ' + date + '<br>' + 
                  'মূল্য: ' + this.y;
       }
   }
   

এখানে Highcharts.dateFormat ব্যবহার করে x-অক্ষের মান (তারিখ) একটি কাস্টম ফরম্যাটে প্রদর্শিত হচ্ছে।

Tooltip Styles

Highcharts এ টুলটিপের স্টাইল কাস্টমাইজ করার জন্য আপনি CSS বা tooltip.style ব্যবহার করতে পারেন। উদাহরণস্বরূপ:

Tooltip Style Example

tooltip: {
    style: {
        color: '#fff',        // টুলটিপের টেক্সটের রঙ
        backgroundColor: '#333', // টুলটিপের পটভূমির রঙ
        fontSize: '14px',      // ফন্ট সাইজ
        padding: '10px'        // প্যাডিং
    },
    formatter: function() {
        return '<b>' + this.series.name + '</b><br>' +
               'মাস: ' + this.x + '<br>' + 
               'মূল্য: ' + this.y;
    }
}

এখানে, tooltip.style প্রপার্টি ব্যবহার করে টুলটিপের টেক্সটের রঙ, পটভূমির রঙ, ফন্ট সাইজ এবং প্যাডিং কাস্টমাইজ করা হয়েছে।

উপসংহার

Highcharts এ Custom Tooltip Template এবং Formatters ব্যবহার করে আপনি টুলটিপের কনটেন্ট এবং উপস্থাপনাকে সম্পূর্ণ কাস্টমাইজ করতে পারেন। এটি ডেটার বিশদ বিশ্লেষণ এবং প্রদর্শন করতে সহায়ক, যেমন বিভিন্ন সিরিজ, তারিখ, অথবা বিশেষ সংখ্যার ফরম্যাটের কাস্টম উপস্থাপন। টুলটিপের মাধ্যমে ডেটা আরও ব্যবহারযোগ্য এবং পারস্পরিক সম্পর্ক বুঝতে সহায়ক হয়, যা চার্টের শক্তি আরও বাড়ায়।