Data Manipulation এবং Customization

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

Data Manipulation (ডেটা পরিচালনা)

Google Charts এর মাধ্যমে ডেটা উপস্থাপন করার আগে ডেটা প্রসেস এবং ম্যানিপুলেট করা গুরুত্বপূর্ণ। GWT এ Google Charts এর জন্য ডেটা মানে হলো DataTable। এই DataTable ব্যবহার করে আপনি ডেটা ফিল্টার, শর্তাবলী যোগ, কলাম রূপান্তর, এবং আরো অনেক কিছু করতে পারেন।

১. DataTable তৈরি এবং ডেটা ইনপুট

Google Charts এর DataTable একটি গঠনমূলক টেবিলের মতো কাজ করে। আপনি এই DataTable ব্যবহার করে ডেটা স্টোর করতে পারেন এবং সেটি চার্টে প্রদর্শন করতে পারেন। DataTable তৈরি করার জন্য google.visualization.arrayToDataTable() ব্যবহার করা হয়।

public native void manipulateData() /*-{
    var data = new $wnd.google.visualization.arrayToDataTable([
        ['Category', 'Sales'],
        ['Category 1', 1000],
        ['Category 2', 1170],
        ['Category 3', 660],
        ['Category 4', 1030]
    ]);
}-*/;

২. ডেটা ফিল্টারিং (Filtering)

DataTable-এ ডেটা ফিল্টার করতে google.visualization.Filter ব্যবহার করা যায়। এর মাধ্যমে আপনি নির্দিষ্ট মান অনুসারে ডেটা বাছাই করতে পারেন।

public native void filterData() /*-{
    var data = new $wnd.google.visualization.arrayToDataTable([
        ['Category', 'Sales'],
        ['Category 1', 1000],
        ['Category 2', 1170],
        ['Category 3', 660],
        ['Category 4', 1030]
    ]);

    var filter = new $wnd.google.visualization.Filter(data);
    filter.setVisibleValues([0, 1]); // Filter rows where Category is "Category 1" or "Category 2"
    data.addColumn('string', 'Category');
}-*/;

এখানে setVisibleValues([0, 1]) ব্যবহার করে শুধু "Category 1" এবং "Category 2" এর ডেটা দেখা যাবে।

৩. ডেটা ম্যানিপুলেশন

Google Charts এ ডেটা মানগুলো বিভিন্নভাবে ম্যানিপুলেট করা যায়। উদাহরণস্বরূপ, আপনি ডেটার মান পরিবর্তন করতে পারেন, কলাম যোগ করতে পারেন, বা অ্যাগ্রিগেট করতে পারেন।

public native void manipulateDataValues() /*-{
    var data = new $wnd.google.visualization.arrayToDataTable([
        ['Category', 'Sales'],
        ['Category 1', 1000],
        ['Category 2', 1170],
        ['Category 3', 660],
        ['Category 4', 1030]
    ]);

    // Changing values in the data
    data.setValue(0, 1, 1200); // Changing sales value of Category 1
}-*/;

এখানে data.setValue(0, 1, 1200) ব্যবহার করে "Category 1" এর Sales মান 1200 করা হয়েছে।

Customization (কাস্টমাইজেশন)

Google Charts আপনাকে চার্ট কাস্টমাইজ করার জন্য অনেক অপশন দেয়, যা চার্টটির ভিজ্যুয়াল প্রেজেন্টেশন এবং ইউজার ইন্টারঅ্যাকশনের অভিজ্ঞতা বাড়াতে সাহায্য করে। কাস্টমাইজেশনের মাধ্যমে আপনি চার্টের ডিজাইন, রঙ, ফন্ট, অক্ষের লেবেল, এবং আরও অনেক কিছু পরিবর্তন করতে পারেন।

১. টাইটেল, রঙ এবং আকার কাস্টমাইজ করা

Google Charts এর options অবজেক্ট ব্যবহার করে চার্টের বিভিন্ন উপাদান কাস্টমাইজ করা যায়, যেমন টাইটেল, রঙ, আকার ইত্যাদি।

public native void customizeChart() /*-{
    var data = new $wnd.google.visualization.arrayToDataTable([
        ['Category', 'Sales'],
        ['Category 1', 1000],
        ['Category 2', 1170],
        ['Category 3', 660],
        ['Category 4', 1030]
    ]);

    var options = {
        title: 'Sales Performance',
        backgroundColor: '#f2f2f2',
        colors: ['#FF5733', '#33FF57', '#3357FF', '#F4D03F'],
        pieSliceText: 'percentage', // Show percentage on slices
        is3D: true
    };

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

এখানে title, backgroundColor, colors, এবং pieSliceText এর মাধ্যমে চার্টের ভিজ্যুয়াল উপস্থাপন কাস্টমাইজ করা হয়েছে। is3D: true দিয়ে 3D Pie Chart তৈরি করা হয়েছে।

২. অক্ষের লেবেল কাস্টমাইজ করা

Google Charts এর মাধ্যমে আপনি X ও Y অক্ষের লেবেল কাস্টমাইজ করতে পারেন।

var options = {
    title: 'Sales by Year',
    hAxis: { title: 'Year' },
    vAxis: { title: 'Sales' },
};

এখানে hAxis এবং vAxis এর মাধ্যমে অক্ষের শিরোনাম (title) পরিবর্তন করা হয়েছে।

৩. ইন্টারেকটিভ কাস্টমাইজেশন

Google Charts আপনাকে চার্টের ইন্টারেক্টিভ ফিচার কাস্টমাইজ করার সুযোগ দেয়। ব্যবহারকারী চার্টের উপরে ক্লিক বা হোভার করলে বিস্তারিত তথ্য প্রদর্শিত হতে পারে।

chart.setAction({
    'select': function() {
        var selection = chart.getSelection();
        var row = selection[0].row;
        alert('You selected ' + data.getValue(row, 0));
    }
});

এখানে setAction এর মাধ্যমে ক্লিক ইভেন্ট সেট করা হয়েছে, যা চার্টে ক্লিক করলে ডাটা পয়েন্টের নাম দেখাবে।

সারাংশ

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