Tooltip কাস্টমাইজেশন এবং ডেটা প্রদর্শন

Tooltip হলো Google Charts এর একটি গুরুত্বপূর্ণ ফিচার যা ব্যবহারকারীদের জন্য চার্টের বিভিন্ন ডাটা পয়েন্টের অতিরিক্ত তথ্য প্রদর্শন করে। যখন ব্যবহারকারী চার্টের উপর হোভার বা ক্লিক করে, তখন Tooltip প্রদর্শিত হয়, যা সেই ডাটা পয়েন্ট সম্পর্কে বিস্তারিত তথ্য প্রদান করে। GWT (Google Web Toolkit) এবং Google Charts API ব্যবহার করে Tooltip কাস্টমাইজ এবং ডেটা প্রদর্শন করা সহজ।

এই টিউটোরিয়ালে আমরা দেখব কীভাবে GWT ব্যবহার করে Google Charts এর Tooltip কাস্টমাইজ করা যায় এবং কীভাবে ডেটা প্রদর্শন করা যায়।

Tooltip কাস্টমাইজেশন

১. Tooltip সক্রিয় করা

প্রথমে Google Charts এ Tooltip সক্রিয় করতে হয়। Google Charts স্বয়ংক্রিয়ভাবে Tooltip প্রদর্শন করে, তবে আপনি এর কাস্টমাইজেশন করতে পারেন। Tooltip সাধারণত ডাটা পয়েন্টের উপর হোভার করার পর প্রদর্শিত হয়।

উদাহরণ:

public native void drawChartWithTooltip() /*-{
    var data = new $wnd.google.visualization.arrayToDataTable([
        ['Year', 'Sales', 'Expenses'],
        ['2013', 1000, 400],
        ['2014', 1170, 460],
        ['2015', 660, 1120],
        ['2016', 1030, 540]
    ]);

    var options = {
        title: 'Company Performance',
        tooltip: { trigger: 'both' } // Tooltip হোভার এবং ক্লিকের মাধ্যমে প্রদর্শিত হবে
    };

    var chart = new $wnd.google.visualization.BarChart($doc.getElementById('chart_div'));
    chart.draw(data, options);
}-*/;

এখানে:

• tooltip.trigger: এর মান 'both' দিলে Tooltip হোভার এবং ক্লিক দুটোর মাধ্যমেই প্রদর্শিত হবে।

২. Tooltip কাস্টমাইজ করা

Google Charts এর Tooltip আরও কাস্টমাইজ করা যেতে পারে, যেমন ফন্ট সাইজ, রঙ, এবং স্টাইল পরিবর্তন করা।

উদাহরণ:

var options = {
    title: 'Company Performance',
    tooltip: {
        isHtml: true, // HTML ট্যাগ ব্যবহার করতে সক্ষম
        textStyle: {
            color: 'black',
            fontSize: 14,
            fontName: 'Arial',
            bold: true
        },
        trigger: 'hover'
    }
};

এখানে isHtml সেট করা হয়েছে true, যাতে আপনি HTML ট্যাগ ব্যবহার করে Tooltip এর কন্টেন্ট কাস্টমাইজ করতে পারেন। এছাড়া textStyle এর মাধ্যমে ফন্ট সাইজ, রঙ, এবং বোল্ড স্টাইল কাস্টমাইজ করা হয়েছে।

৩. Tooltip এর কনটেন্ট কাস্টমাইজ করা

Tooltip এর কনটেন্ট কাস্টমাইজ করতে tooltip.text বা tooltip.isHtml ব্যবহার করা যায়। isHtml সেট করলে আপনি HTML কন্টেন্ট সহ Tooltip প্রদর্শন করতে পারবেন।

উদাহরণ:

tooltip: {
    isHtml: true,
    text: '<div style="color:red; font-size:14px;">Sales: <b>1000</b></div>'
}

এখানে, Tooltip কাস্টমাইজড HTML কন্টেন্ট সহ প্রদর্শিত হবে, যেমন লাল রঙে "Sales: 1000" লেখা হবে।

ডেটা প্রদর্শন

১. Google Charts এ ডেটা প্রদর্শন

Google Charts API এর মাধ্যমে ডেটা প্রদর্শন করা অনেক সহজ। আপনি DataTable ব্যবহার করে ডেটা লোড করতে পারেন এবং তারপর তা চার্টে প্রদর্শন করতে পারেন। GWT তে DataTable তৈরি এবং ডেটা লোড করার জন্য arrayToDataTable ফাংশন ব্যবহার করা হয়।

উদাহরণ:

public native void drawChartWithData() /*-{
    var data = new $wnd.google.visualization.arrayToDataTable([
        ['Product', 'Sales'],
        ['Product A', 1000],
        ['Product B', 1500],
        ['Product C', 2000]
    ]);

    var options = {
        title: 'Product Sales',
        tooltip: { trigger: 'focus' } // Tooltip প্রদর্শিত হবে focus করার মাধ্যমে
    };

    var chart = new $wnd.google.visualization.PieChart($doc.getElementById('chart_div'));
    chart.draw(data, options);
}-*/;

এখানে:

• data.addColumn() ফাংশন দিয়ে কলাম যোগ করা হয়েছে এবং addRow() ফাংশন দিয়ে ডেটা লোড করা হয়েছে।
• options.tooltip.trigger দিয়ে Tooltip কাস্টমাইজ করা হয়েছে যাতে focus এর মাধ্যমে Tooltip প্রদর্শিত হয়।

২. ডেটার উপর Tooltip প্রদর্শন

ডেটার উপর Tooltip কাস্টমাইজ করতে DataTable এর সাথে tooltip অপশন যুক্ত করা যেতে পারে। Tooltip এর মাধ্যমে আপনি প্রতিটি ডেটা পয়েন্টের উপর বিস্তারিত তথ্য দেখাতে পারেন।

উদাহরণ:

public native void drawChartWithTooltips() /*-{
    var data = new $wnd.google.visualization.arrayToDataTable([
        ['Product', 'Sales', { type: 'string', role: 'tooltip' }],
        ['Product A', 1000, 'Sales: 1000'],
        ['Product B', 1500, 'Sales: 1500'],
        ['Product C', 2000, 'Sales: 2000']
    ]);

    var options = {
        title: 'Product Sales',
        tooltip: { trigger: 'selection' }
    };

    var chart = new $wnd.google.visualization.BarChart($doc.getElementById('chart_div'));
    chart.draw(data, options);
}-*/;

এখানে:

• tooltip অপশনকে trigger: 'selection' দিয়ে সেট করা হয়েছে, যাতে ব্যবহারকারী একটি ডেটা পয়েন্টে ক্লিক করার পর Tooltip প্রদর্শিত হয়।
• ডেটা লোড করার সময় tooltip কন্টেন্টও যোগ করা হয়েছে, যেমন Sales: 1000।

Tooltip এবং ডেটা প্রদর্শনের সুবিধা

১. ব্যবহারকারীর জন্য আরও বিস্তারিত তথ্য প্রদান

Tooltip ব্যবহার করে ব্যবহারকারীরা সহজেই চার্টের বিভিন্ন ডেটা পয়েন্টের সাথে সম্পর্কিত অতিরিক্ত তথ্য দেখতে পারেন, যেমন সেলস, আয়, খরচ ইত্যাদি।

২. ইন্টারেকটিভ এবং আকর্ষণীয় ভিজ্যুয়ালাইজেশন

Tooltip এর কাস্টমাইজেশন চার্টের ইন্টারেকটিভিটি বৃদ্ধি করে, এবং ডেটার আরও স্পষ্ট এবং ব্যবহারকারী-বান্ধব উপস্থাপনা নিশ্চিত করে।

৩. ডেটার মধ্যে সম্পর্ক দেখানো

Tooltip এর মাধ্যমে আপনি চার্টের প্রতিটি ডেটা পয়েন্টের সাথে সম্পর্কিত বিস্তারিত তথ্য প্রদর্শন করতে পারেন, যা ডেটার বিশ্লেষণকে সহজ করে।

সারাংশ

Google Charts এবং GWT এর মাধ্যমে Tooltip কাস্টমাইজ এবং ডেটা প্রদর্শন করা একটি শক্তিশালী টুল। Tooltip ব্যবহার করে আপনি ডেটা পয়েন্টের উপর অতিরিক্ত তথ্য প্রদর্শন করতে পারেন, এবং DataTable ব্যবহার করে ডেটা লোড এবং প্রদর্শন করা সহজ। Google Charts API তে Tooltip এর কাস্টমাইজেশন, ডেটা প্রদর্শন এবং ইন্টারেকটিভ চার্ট তৈরির জন্য অত্যন্ত কার্যকরী। GWT এবং Google Charts ব্যবহার করে আপনি আপনার ওয়েব অ্যাপ্লিকেশনে ডেটা ভিজ্যুয়ালাইজেশন আরও আকর্ষণীয় ও ইন্টারেকটিভ করে তুলতে পারবেন।