চার্টের ইন্টারঅ্যাকটিভিটি যুক্ত করা

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

এই টিউটোরিয়ালে, আমরা দেখব কিভাবে Google Charts API-তে ইন্টারঅ্যাকটিভিটি যোগ করা যায় GWT অ্যাপ্লিকেশনগুলিতে।

Google Charts এ ইন্টারঅ্যাকটিভিটি যুক্ত করার উপায়

১. ইভেন্ট হ্যান্ডলিং (Event Handling)

Google Charts API-তে বিভিন্ন ধরনের ইভেন্ট হ্যান্ডলিং ফিচার রয়েছে, যেমন click, onmouseover, onmouseout ইত্যাদি, যা ব্যবহারকারী যখন চার্টের কোনো অংশে ক্লিক বা হোভার করেন তখন কার্যকর হয়। এগুলি ব্যবহারকারীর সাথে ইন্টারঅ্যাকশন করতে সহায়ক।

ইভেন্ট হ্যান্ডলিং উদাহরণ:

public class InteractiveChart {
    public native void drawChart() /*-{
        var data = new $wnd.google.visualization.arrayToDataTable([
            ['Year', 'Sales', 'Expenses'],
            ['2013', 1000, 400],
            ['2014', 1170, 460],
            ['2015', 1250, 600],
            ['2016', 1530, 700]
        ]);

        var options = {
            title: 'Company Performance',
            hAxis: { title: 'Year' },
            vAxis: { title: 'Amount ($)' }
        };

        var chart = new $wnd.google.visualization.ColumnChart($doc.getElementById('chart_div'));
        chart.draw(data, options);

        // Click event to display detailed data
        $wnd.google.visualization.events.addListener(chart, 'click', function(e) {
            var selection = chart.getSelection();
            if (selection.length > 0) {
                var row = selection[0].row;
                var item = data.getValue(row, 0);
                alert('You clicked on: ' + item);
            }
        });
    }-*/;
}

এখানে, একটি ColumnChart তৈরি করা হয়েছে এবং google.visualization.events.addListener ব্যবহার করে click ইভেন্ট হ্যান্ডলিং যোগ করা হয়েছে। যখন ব্যবহারকারী কোনো রোতে ক্লিক করবেন, তখন সেই রো এর ডাটা একটি alert পপ-আপ হিসেবে প্রদর্শিত হবে।

২. হোভার ইভেন্ট (Hover Event)

Hover ইভেন্ট ব্যবহারকারীকে চার্টের ডাটা পয়েন্টের উপর মাউস নিয়ে গেলে তথ্য প্রদর্শন করতে সহায়তা করে। এই ইভেন্টটি সাধারণত ডাটা পয়েন্টের উপর হোভার করলে সংশ্লিষ্ট তথ্য প্রদর্শন করার জন্য ব্যবহৃত হয়।

হোভার ইভেন্ট উদাহরণ:

public class HoverChart {
    public native void drawChart() /*-{
        var data = new $wnd.google.visualization.arrayToDataTable([
            ['Year', 'Sales', 'Expenses'],
            ['2013', 1000, 400],
            ['2014', 1170, 460],
            ['2015', 1250, 600],
            ['2016', 1530, 700]
        ]);

        var options = {
            title: 'Company Performance',
            hAxis: { title: 'Year' },
            vAxis: { title: 'Amount ($)' },
            tooltip: { isHtml: true } // Tooltip to show custom data
        };

        var chart = new $wnd.google.visualization.ColumnChart($doc.getElementById('chart_div'));
        chart.draw(data, options);

        // Mouseover event to show detailed tooltip
        $wnd.google.visualization.events.addListener(chart, 'onmouseover', function(e) {
            var row = e.row;
            var item = data.getValue(row, 0);
            alert('You hovered over: ' + item);
        });
    }-*/;
}

এখানে, onmouseover ইভেন্ট ব্যবহার করে ডাটা পয়েন্টে হোভার করলে একটি alert পপ-আপ প্রদর্শিত হবে। tooltip এর মাধ্যমে কাস্টম তথ্য প্রদর্শন করার সুযোগ রয়েছে।

৩. ডাটা ফিল্টারিং (Data Filtering)

ডাটা ফিল্টারিং ব্যবহারের মাধ্যমে চার্টের ডেটাকে ফিল্টার করে নির্দিষ্ট কন্ডিশন অনুযায়ী দেখানো যায়। এর মাধ্যমে ব্যবহারকারীরা চাইলে চার্টের একটি নির্দিষ্ট অংশ দেখতে পারেন।

ডাটা ফিল্টারিং উদাহরণ:

public class FilterChart {
    public native void drawChart() /*-{
        var data = new $wnd.google.visualization.arrayToDataTable([
            ['Year', 'Sales', 'Expenses'],
            ['2013', 1000, 400],
            ['2014', 1170, 460],
            ['2015', 1250, 600],
            ['2016', 1530, 700]
        ]);

        var options = {
            title: 'Company Performance',
            hAxis: { title: 'Year' },
            vAxis: { title: 'Amount ($)' },
            legend: { position: 'top' }
        };

        var chart = new $wnd.google.visualization.LineChart($doc.getElementById('chart_div'));
        chart.draw(data, options);

        // Filter the data based on a condition
        var filter = new $wnd.google.visualization.DataView(data);
        filter.setRows([0, 1]); // Display only the first two rows
        chart.draw(filter, options);
    }-*/;
}

এখানে, DataView ব্যবহার করে setRows ফাংশন ব্যবহার করে নির্দিষ্ট রো ফিল্টার করা হয়েছে, যা কেবল প্রথম দুটি রো দেখাবে। এর মাধ্যমে ডেটাকে কাস্টমাইজ করে প্রদর্শন করা সম্ভব হয়।

৪. কাস্টম টুলটিপ (Custom Tooltip)

Tooltip ব্যবহারকারীদের জন্য ইনফরমেশন প্রদর্শন করার একটি উপায়। এটি বিশেষভাবে চার্টের উপর মাউস হোভার করার সময় ডাটা সম্পর্কে বিস্তারিত প্রদর্শন করতে ব্যবহৃত হয়।

কাস্টম টুলটিপ উদাহরণ:

public class CustomTooltipChart {
    public native void drawChart() /*-{
        var data = new $wnd.google.visualization.arrayToDataTable([
            ['Year', 'Sales', 'Expenses'],
            ['2013', 1000, 400],
            ['2014', 1170, 460],
            ['2015', 1250, 600],
            ['2016', 1530, 700]
        ]);

        var options = {
            title: 'Company Performance',
            tooltip: { 
                trigger: 'selection',
                isHtml: true,
                textStyle: { color: '#ff0000' }
            },
            hAxis: { title: 'Year' },
            vAxis: { title: 'Amount ($)' }
        };

        var chart = new $wnd.google.visualization.LineChart($doc.getElementById('chart_div'));
        chart.draw(data, options);

        // Adding a custom tooltip
        $wnd.google.visualization.events.addListener(chart, 'onmouseover', function(e) {
            var row = e.row;
            var item = data.getValue(row, 0);
            alert('Custom Tooltip: You hovered over: ' + item);
        });
    }-*/;
}

এখানে, tooltip.trigger ব্যবহার করে নির্বাচিত রো-এর উপর হোভার করার সময় কাস্টম টুলটিপ প্রদর্শন করা হয়েছে।

সারাংশ

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