Zoom এবং Scroll Interaction

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

এই টিউটোরিয়ালে, আমরা দেখব কিভাবে GWT এবং Google Charts ব্যবহার করে Zoom এবং Scroll Interaction অ্যাড করা যায়।

Zoom Interaction

Zoom Interaction এর মাধ্যমে ব্যবহারকারী চার্টে স্কেল করে আরও বিস্তারিত তথ্য দেখতে পারে। Google Charts API এর মধ্যে Chart Zooming জন্য Explorer অপশন রয়েছে, যা ব্যবহারের মাধ্যমে আপনি চার্টে Zoom In এবং Zoom Out করতে পারেন।

১. Google Charts API লোড করা

প্রথমে Google Charts API লোড করতে হবে, যেখানে explorer প্যাকেজটি অন্তর্ভুক্ত থাকবে, যা Zoom এবং Pan (scrolling) অপশন সমর্থন করে।

public class ZoomInteractionExample {
    public native void loadGoogleCharts() /*-{
        google.charts.load('current', {
            packages: ['corechart', 'line']
        });
    }-*/;
}

এখানে, corechart এবং line প্যাকেজ লোড করা হয়েছে, কারণ আমরা একটি Line Chart তৈরি করব যেখানে Zoom এবং Scroll Interaction থাকবে।

২. Zoom Interaction যোগ করা

এখন, Google Charts এর explorer অপশন ব্যবহার করে Zoom Interaction যোগ করা যাবে।

কোড উদাহরণ:

public class ZoomInteractionExample {
    public native void drawZoomableChart() /*-{
        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',
            explorer: {
                axis: 'horizontal',    // Horizontal zooming
                actions: ['dragToZoom', 'rightClickToReset']
            },
            hAxis: {title: 'Year'},
            vAxis: {title: 'Sales'},
        };

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

এখানে, explorer অপশনের মধ্যে axis, actions, ইত্যাদি কাস্টমাইজ করা হয়েছে। axis: 'horizontal' এর মাধ্যমে আপনি কেবল অনুভূমিক অক্ষে zoom করতে পারবেন। dragToZoom অপশনের মাধ্যমে ব্যবহারকারী চার্টের উপর ড্র্যাগ করে zoom করতে পারবেন এবং rightClickToReset অপশনের মাধ্যমে রাইট ক্লিক করলে zoom রিসেট হবে।

Scroll Interaction

Scroll Interaction ব্যবহারকারীকে চার্টে স্ক্রল করতে সহায়তা করে। এটি ডেটার একটি নির্দিষ্ট অংশের মধ্যে প্রবাহিত হতে এবং দ্রুত বিশ্লেষণ করতে সহায়ক। Google Charts API তে Scroll Interaction এর জন্য Explorer ফিচারটি আবার ব্যবহৃত হয়, যেখানে zoom এবং scroll ইন্টারঅ্যাকশন একত্রে কাজ করতে পারে।

১. Scroll Interaction যোগ করা

Scroll Interaction এর জন্য explorer অপশনটি আবার ব্যবহার করা হবে। এখানে zoomStart এবং zoomEnd অপশন ব্যবহার করা হবে, যা স্ক্রল ইন্টারঅ্যাকশন নিয়ে কাজ করবে।

কোড উদাহরণ:

public class ScrollInteractionExample {
    public native void drawScrollChart() /*-{
        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',
            explorer: {
                actions: ['dragToZoom', 'rightClickToReset'],
                zoomDelta: 1.2,  // Scroll zoom sensitivity
                keepInBounds: true
            },
            hAxis: {title: 'Year'},
            vAxis: {title: 'Sales'},
        };

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

এখানে, zoomDelta ব্যবহার করে zoom করার জন্য স্ক্রল সেন্সিটিভিটি কাস্টমাইজ করা হয়েছে। এর মান বাড়ানোর মাধ্যমে স্ক্রল ইনক্রিমেন্টের পরিমাণ বাড়ানো যায়।

২. Scrollable Chart তৈরি করা

এছাড়া, আপনি scroll প্যানেলও তৈরি করতে পারেন যেখানে chart এর প্যান (scrolling) বৈশিষ্ট্য যোগ করা হবে।

উদাহরণ:

public class ScrollableChartExample {
    public native void drawScrollableChart() /*-{
        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',
            chartArea: {width: '80%', height: '80%'},
            hAxis: {title: 'Year'},
            vAxis: {title: 'Sales'},
            explorer: {
                actions: ['dragToZoom', 'rightClickToReset'],
                axis: 'horizontal',
                keepInBounds: true
            }
        };

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

এখানে, explorer অপশনের মধ্যে horizontal scrolling (অর্থাৎ স্ক্রলিং করতে সক্ষম হওয়া) সক্রিয় করা হয়েছে এবং keepInBounds: true এর মাধ্যমে স্ক্রলিংয়ের জন্য চার্টের সীমা নির্ধারণ করা হয়েছে।

সারাংশ

Zoom এবং Scroll Interaction চার্টে ইন্টারেক্টিভ বৈশিষ্ট্য যোগ করতে সাহায্য করে, যা ব্যবহারকারীদের ডেটার একটি নির্দিষ্ট অংশে ফোকাস করতে সক্ষম করে। GWT Google Charts এর মাধ্যমে আপনি সহজে এই ফিচারগুলিকে ইন্টিগ্রেট করতে পারেন। explorer অপশনটি ব্যবহারের মাধ্যমে আপনি Zoom এবং Scroll ইন্টারঅ্যাকশনকে কাস্টমাইজ করতে পারেন এবং ইন্টারেক্টিভ চার্ট তৈরি করতে পারেন, যা ব্যবহারকারীর জন্য ডেটা বিশ্লেষণকে আরও সহজ ও দ্রুততর করে তোলে।