DataView ব্যবহার করে ফিল্টারিং এবং ফরম্যাটিং

GWT (Google Web Toolkit) এবং Google Charts ব্যবহার করে ডেটা ভিজ্যুয়ালাইজেশন তৈরি করতে হলে, আপনি DataView ব্যবহার করে ডেটা ফিল্টারিং এবং ফরম্যাটিং করতে পারেন। DataView একটি শক্তিশালী টুল যা ডেটাকে ফিল্টার, কাস্টমাইজ, এবং ফরম্যাট করার জন্য ব্যবহৃত হয়, যা আপনাকে চার্ট বা টেবিলের ডেটাকে আরও ইন্টারেক্টিভ এবং ডাইনামিকভাবে উপস্থাপন করতে সহায়তা করে।

DataView গুগল চার্টস API এর একটি অংশ, যা আপনাকে ডেটা সোর্সের উপর অপারেশন চালিয়ে ডেটা উপস্থাপন কাস্টমাইজ করতে সক্ষম করে।

DataView এর মাধ্যমে ডেটা ফিল্টারিং এবং ফরম্যাটিং

১. DataView কী?

DataView হলো একটি উপাদান যা Google Charts এর DataTable থেকে ডেটা একটি নির্দিষ্ট উপায়ে দেখানোর সুযোগ দেয়। এটি ডেটার একটি ভিউ তৈরি করে, যেখানে আপনি ডেটার কলাম এবং রো ফিল্টার, সিলেক্ট, সোর্ট বা ফরম্যাট করতে পারেন। DataView মূল ডেটাটেবিলের পরিবর্তন ছাড়াই একটি নতুন ভিউ তৈরি করে।

২. GWT এ DataView ব্যবহার

GWT এবং Google Charts এর মাধ্যমে DataView ব্যবহার করার জন্য প্রথমে একটি DataTable তৈরি করতে হয়, তারপর সেই DataTable এর উপর DataView অ্যাপ্লিকেশন প্রয়োগ করা হয়। GWT-এ DataView ব্যবহার করার জন্য আপনাকে JavaScript Native Interface (JSNI) ব্যবহার করতে হবে।

৩. ডেটা ফিল্টারিং

DataView ব্যবহার করে ডেটার উপর ফিল্টার প্রয়োগ করা যায়, যার মাধ্যমে নির্দিষ্ট ডেটা প্রদর্শন করা হয়। উদাহরণস্বরূপ, কোনো একটি কলামে নির্দিষ্ট মান থাকা রো-গুলোকে দেখানো যায়।

উদাহরণ:

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

    var view = new $wnd.google.visualization.DataView(data);
    // ফিল্টার প্রয়োগ করা হচ্ছে, যেখানে Sales 1000 এর বেশি হবে
    view.setRows(view.getFilteredRows([{column: 1, minValue: 1000}]));

    var options = {
        title: 'Company Performance',
        chartArea: {width: '50%'},
        hAxis: {
            title: 'Total Revenue',
            minValue: 0
        },
        vAxis: {
            title: 'Year'
        }
    };

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

এখানে getFilteredRows() ফাংশনটি ব্যবহার করা হয়েছে, যা ডেটা থেকে নির্দিষ্ট শর্ত পূরণ করা রো-গুলো নির্বাচন করে।

৪. ডেটা ফরম্যাটিং

DataView ব্যবহার করে ডেটার ফরম্যাটও পরিবর্তন করা যায়। যেমন, আপনি কোনো নির্দিষ্ট কলামে ডেটার সংখ্যা ফরম্যাট করতে পারেন বা তার কলামের মান কাস্টমাইজ করতে পারেন।

উদাহরণ:

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

    var view = new $wnd.google.visualization.DataView(data);
    // সেলস কলামকে কাস্টম ফরম্যাট দেওয়া হচ্ছে
    view.setColumns([0, 1, {calc: 'stringify', sourceColumn: 1, type: 'string', role: 'annotation'}]);

    var options = {
        title: 'Company Performance',
        chartArea: {width: '50%'},
        hAxis: {
            title: 'Total Revenue',
            minValue: 0
        },
        vAxis: {
            title: 'Year'
        }
    };

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

এখানে setColumns() ফাংশন ব্যবহার করা হয়েছে, যেখানে কলাম 1 এর ডেটা কাস্টম ফরম্যাটে দেখানো হচ্ছে।

৫. কলাম সাজানো (Column Sorting)

DataView ব্যবহার করে আপনি আপনার ডেটার কলামগুলো সাজাতে পারেন। এটি ডেটার মানের ওপর ভিত্তি করে সেগুলিকে অ্যাসেন্ডিং বা ডেসেন্ডিং অর্ডারে সাজানোর সুবিধা দেয়।

উদাহরণ:

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

    var view = new $wnd.google.visualization.DataView(data);
    // Sales কলামের উপর সাজানো হচ্ছে (অ্যাসেন্ডিং অর্ডার)
    view.setColumns([0, 1, 2]);
    view.setSortAscending(true);

    var options = {
        title: 'Company Performance',
        chartArea: {width: '50%'},
        hAxis: {
            title: 'Total Revenue',
            minValue: 0
        },
        vAxis: {
            title: 'Year'
        }
    };

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

এখানে setSortAscending(true) ব্যবহার করে Sales কলামটি অ্যাসেন্ডিং অর্ডারে সাজানো হয়েছে।

DataView এর উপকারিতা

১. ডেটা ফিল্টারিং

DataView ব্যবহার করে ডেটার ফিল্টার প্রয়োগ করা সম্ভব, যা নির্দিষ্ট শর্তে ডেটা প্রদর্শন করতে সহায়তা করে।

২. ডেটা ফরম্যাটিং

DataView ডেটার ফরম্যাট পরিবর্তন করা, যেমন টেক্সট বা সংখ্যার ফরম্যাটিং করতে পারে।

৩. ডেটা সাজানো

ডেটা সাজানোর মাধ্যমে আপনি আপনার ডেটাকে নির্দিষ্ট অর্ডারে, যেমন অ্যাসেন্ডিং বা ডেসেন্ডিং সাজাতে পারেন।

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