DataTable এবং DataView

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

DataTable এবং DataView এর ভূমিকা

DataTable এবং DataView Google Charts API এর দুটি শক্তিশালী টুল, যা ডাটা হ্যান্ডলিং এবং কাস্টম ভিউ তৈরির ক্ষেত্রে ব্যবহৃত হয়। DataTable মূল ডাটার জন্য এবং DataView সেই ডাটার কাস্টম ভিউ বা উপস্থাপনা তৈরির জন্য ব্যবহৃত হয়।

DataTable

DataTable হলো Google Charts API এর একটি ডাটা স্ট্রাকচার যা ডাটাকে সঠিকভাবে রপ্তানি এবং পরিচালনা করতে ব্যবহৃত হয়। এটি একটি টেবিলের মতো যেখানে রো (row) এবং কলাম (column) থাকে, এবং প্রতিটি সেল একটি ডাটা পয়েন্ট ধারণ করে।

DataTable এর বৈশিষ্ট্য

• স্ট্যাটিক ডাটা: DataTable ডাটাকে সোজা সোজা টেবিল আকারে ধারণ করে। এটি এমন ডাটা সেট তৈরি করতে ব্যবহৃত হয় যা পরিবর্তনশীল নয় বা খুব কম পরিবর্তিত হয়।
• ডাটা প্রক্রিয়া: DataTable ডাটার জন্য বিভিন্ন ধরনের অপারেশন বা ফিল্টারিং করতে সাহায্য করে, যেমন ডাটা সংযোজন, ডাটা মুছা ইত্যাদি।
• ডাটা ট্যাবুলেশন: DataTable একটি টেবিলের মতো ডাটাকে সাজিয়ে রাখে, যেখানে প্রতিটি কলাম একটি নির্দিষ্ট ডাটা টাইপের (যেমন: স্ট্রিং, সংখ্যা) হয়ে থাকে।

DataTable তৈরি করার উদাহরণ

public class DataTableExample {
    public native void createDataTable() /*-{
        var data = new $wnd.google.visualization.DataTable();
        
        // Add columns
        data.addColumn('string', 'Year');
        data.addColumn('number', 'Sales');
        
        // Add rows
        data.addRow(['2013', 1000]);
        data.addRow(['2014', 1170]);
        data.addRow(['2015', 1250]);
        
        // Log the DataTable
        console.log(data);
    }-*/;
}

এখানে, একটি DataTable তৈরি করা হয়েছে যা দুটি কলাম ধারণ করে, একটি স্ট্রিং টাইপ "Year" এবং একটি নাম্বার টাইপ "Sales"।

DataView

DataView হলো DataTable এর একটি ভিউ (view) যা ডাটা সেটের একটি অংশ বা কাস্টম উপস্থাপনা প্রদর্শন করতে ব্যবহৃত হয়। এটি DataTable এর ডাটাকে ভিন্নভাবে কাস্টমাইজ করে দেখানোর জন্য সাহায্য করে। DataView এর মাধ্যমে ডেটা ফিল্টার বা সাজানো যায়, যা একটি ভিন্ন ভিউ তৈরি করে।

DataView এর বৈশিষ্ট্য

• ডাটা ফিল্টারিং: DataView ডাটাকে ফিল্টার করার জন্য ব্যবহৃত হয়। এর মাধ্যমে নির্দিষ্ট ডাটা পয়েন্টগুলিকে নির্বাচিত করে কাস্টম ডাটা ভিউ তৈরি করা যায়।
• ডাটা সাজানো: DataView এর মাধ্যমে DataTable এর ডাটা সাজানো সম্ভব। আপনি নির্দিষ্ট কলামের ভিত্তিতে ডাটা অ্যারে সাজাতে পারেন।
• ডাটা ভিউ কাস্টমাইজেশন: DataView এর মাধ্যমে DataTable এর বিভিন্ন কলাম বা রো সিলেক্ট করে সেই ডাটার কাস্টম ভিউ তৈরি করা যায়।

DataView তৈরি করার উদাহরণ

public class DataViewExample {
    public native void createDataView() /*-{
        var data = new $wnd.google.visualization.DataTable();
        
        // Add columns
        data.addColumn('string', 'Year');
        data.addColumn('number', 'Sales');
        
        // Add rows
        data.addRow(['2013', 1000]);
        data.addRow(['2014', 1170]);
        data.addRow(['2015', 1250]);
        
        // Create a DataView with a filter
        var view = new $wnd.google.visualization.DataView(data);
        view.setRows([0, 2]); // Selecting the first and third rows
        
        // Log the DataView
        console.log(view);
    }-*/;
}

এখানে DataView তৈরি করা হয়েছে যা DataTable এর প্রথম এবং তৃতীয় রো নির্বাচিত করে একটি কাস্টম ভিউ তৈরি করছে।

DataTable এবং DataView এর মধ্যে পার্থক্য

DataTable এবং DataView ব্যবহার করার সুবিধা

১. ডাটা কাস্টমাইজেশন

DataTable ডাটাকে টেবিল আকারে সহজে সংরক্ষণ এবং পরিচালনা করতে সাহায্য করে, যখন DataView এর মাধ্যমে ডাটা ভিউ কাস্টমাইজ করা যায়, যা বিশেষ পরিস্থিতিতে প্রয়োজনীয়।

২. ডাটা ফিল্টারিং এবং সাজানো

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

৩. সহজে চার্টে ডাটা ব্যবহার

DataTable এবং DataView এর মাধ্যমে সহজেই Google Charts এ ডাটা ইন্টিগ্রেট করা সম্ভব। এগুলি Google Charts API এর জন্য ডাটা এবং কাস্টম ভিউ তৈরি করতে সহায়ক হয়, যাতে ভিজ্যুয়ালাইজেশন আরও শক্তিশালী এবং তথ্যপূর্ণ হয়।

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

GWT Google Charts-এ ডেটা উপস্থাপনা এবং বিশ্লেষণ করার জন্য DataTable এবং DataView দুটি গুরুত্বপূর্ণ উপাদান রয়েছে। এই দুটি উপাদান ডাটা ভিজ্যুয়ালাইজেশনে ব্যবহৃত হয় এবং ডেটা ম্যানিপুলেশন ও প্রদর্শনে কার্যকরী ভূমিকা পালন করে।

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

DataTable এবং DataView এর ভূমিকা

১. DataTable: ডেটা সংরক্ষণ এবং প্রক্রিয়াকরণ

DataTable হল Google Charts API-তে ডেটা সংরক্ষণের জন্য ব্যবহৃত একটি টেবিল স্ট্রাকচার। এটি ডেটাকে সজ্জিত এবং সংগঠিত রাখে, যাতে তা পরে চার্টে প্রদর্শন বা বিশ্লেষণ করা যেতে পারে। DataTable একটি কলাম-ভিত্তিক ডাটা স্টোরেজ সিস্টেম, যেখানে প্রতিটি কলাম বিভিন্ন ধরনের ডেটা ধারণ করে (যেমন সংখ্যা, স্ট্রিং ইত্যাদি) এবং প্রতিটি রো একটি ডাটা পয়েন্টের প্রতিনিধিত্ব করে।

DataTable তৈরি এবং ডেটা যোগ করা:

public native void createDataTable() /*-{
    var data = new $wnd.google.visualization.DataTable();
    data.addColumn('string', 'Month');
    data.addColumn('number', 'Sales');
    data.addRow(['January', 1000]);
    data.addRow(['February', 1200]);
    data.addRow(['March', 1500]);

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

এখানে, DataTable তৈরি করা হয়েছে এবং এতে মাসিক বিক্রয় (Sales) সম্পর্কিত ডেটা যোগ করা হয়েছে। addColumn দিয়ে কলাম সংজ্ঞায়িত করা হয় এবং addRow দিয়ে রো যোগ করা হয়।

DataTable এর বৈশিষ্ট্য:

• কাস্টম কলাম সংজ্ঞা: DataTable-এ কলামগুলোকে যেকোনো ধরনের ডেটা (স্ট্রিং, নাম্বার, ডেট টাইপ) হিসেবে কাস্টমাইজ করা যায়।
• ডেটা রো যোগ করা: addRow ব্যবহার করে ডেটা রো যুক্ত করা যায়।
• কলাম হেডার: DataTable-এ কলাম হেডারও রাখা যায়, যা ডেটার শ্রেণীবদ্ধকরণের জন্য ব্যবহার হয়।

২. DataView: ডেটার ভিউ কাস্টমাইজেশন

DataView হলো DataTable এর উপর একটি লেয়ার, যা ডেটার কাস্টম ভিউ বা প্রেজেন্টেশন তৈরি করতে ব্যবহৃত হয়। DataView ডেটার কিছু অংশ বা বিশেষ কলাম প্রক্রিয়া এবং উপস্থাপন করতে সাহায্য করে, যেমন ফিল্টার করা, কাস্টম সাজানো বা ডেটার ভিউ পরিবর্তন করা।

DataView এর মাধ্যমে আপনি DataTable-এ থাকা ডেটার একটি সাবসেট তৈরি করতে পারেন এবং সেই সাবসেটটি চার্টে প্রদর্শন করতে পারেন। এটি মূল DataTable-কে পরিবর্তন না করে কেবল প্রদর্শিত ডেটাকে কাস্টমাইজ করে।

DataView তৈরি এবং ডেটা ফিল্টার করা:

public native void createDataView() /*-{
    var data = new $wnd.google.visualization.DataTable();
    data.addColumn('string', 'Month');
    data.addColumn('number', 'Sales');
    data.addRow(['January', 1000]);
    data.addRow(['February', 1200]);
    data.addRow(['March', 1500]);
    
    var view = new $wnd.google.visualization.DataView(data);
    view.setColumns([0, 1]); // Select columns to display

    var chart = new $wnd.google.visualization.LineChart($doc.getElementById('chart_div'));
    chart.draw(view, {title: 'Monthly Sales'});
}-*/;

এখানে, DataView ব্যবহার করে DataTable থেকে Month এবং Sales কলামগুলো নির্বাচন করা হয়েছে। setColumns দ্বারা কোন কলামগুলো প্রদর্শন হবে তা নির্ধারণ করা হয়।

DataView এর বৈশিষ্ট্য:

• ফিল্টারিং: DataView এর মাধ্যমে আপনি DataTable এর ডেটা ফিল্টার করতে পারেন। এটি বিশেষভাবে উপকারী যখন আপনার ডেটা বড় এবং কিছু নির্দিষ্ট ডেটার উপর ভিত্তি করে বিশ্লেষণ করতে হয়।
• সাজানো: DataView ব্যবহার করে আপনি ডেটাকে নির্দিষ্ট অর্ডারে সাজাতে পারেন (যেমন, আস্থিকভাবে বা নেম্বারিকভাবে)।
• কাস্টম কলাম নির্বাচন: আপনি DataView এ নির্দিষ্ট কলাম নির্বাচন করতে পারেন যা শুধু প্রদর্শন হবে, বাকি কলামগুলো সরানো যেতে পারে।

DataTable এবং DataView এর মধ্যে পার্থক্য

সারাংশ

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

Google Charts API তে ডেটা উপস্থাপন করার জন্য DataTable একটি গুরুত্বপূর্ণ উপাদান। DataTable হলো একটি ডাটা স্ট্রাকচার যা সারি (row) এবং কলাম (column) দিয়ে ডেটাকে সংগঠিত করে। GWT (Google Web Toolkit) ব্যবহার করে Google Charts এর মধ্যে ডেটা লোড এবং DataTable তৈরি করা সহজ এবং কার্যকরী। এই টিউটোরিয়ালে আমরা দেখব কীভাবে DataTable তৈরি করতে হয় এবং ডেটা লোড করা হয় GWT এর মাধ্যমে।

DataTable তৈরি এবং ডেটা লোড করার প্রক্রিয়া

১. Google Charts API লোড করা

প্রথমে Google Charts API লোড করতে হবে, যাতে আমরা DataTable এবং অন্যান্য Google Charts ফিচার ব্যবহার করতে পারি। GWT এর মাধ্যমে JSNI (JavaScript Native Interface) ব্যবহার করে এই API লোড করা হয়।

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

এখানে packages: ['corechart', 'table'] দ্বারা CoreChart এবং Table প্যাকেজ লোড করা হচ্ছে, যাতে DataTable তৈরি করা এবং টেবিল প্রদর্শন করা সম্ভব হয়।

২. DataTable তৈরি করা

DataTable তৈরি করার জন্য আমরা google.visualization.DataTable ক্লাস ব্যবহার করি। এই ক্লাসটি ডেটাকে সঠিকভাবে অর্গানাইজ করে এবং তা Google Chart এ প্রদর্শন করতে ব্যবহৃত হয়।

উদাহরণ:

public class GoogleChartsIntegration {
    public native void createDataTable() /*-{
        var data = new $wnd.google.visualization.DataTable();
        
        // কলাম যোগ করা
        data.addColumn('string', 'Name'); // প্রথম কলাম: string টাইপ
        data.addColumn('number', 'Age');  // দ্বিতীয় কলাম: number টাইপ
        data.addColumn('string', 'Country'); // তৃতীয় কলাম: string টাইপ

        // সারি যোগ করা
        data.addRow(['John', 30, 'USA']);
        data.addRow(['Mary', 25, 'UK']);
        data.addRow(['Mike', 32, 'Canada']);

        // চার্ট বা টেবিল প্রদর্শন করার জন্য
        var options = {
            title: 'Personal Information'
        };

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

এখানে DataTable তৈরি করা হয়েছে তিনটি কলাম সহ:

• Name (string),
• Age (number),
• Country (string)

তিনটি সারি (addRow) ডেটা যোগ করা হয়েছে যেখানে প্রতিটি সারির মধ্যে নাম, বয়স এবং দেশ সম্পর্কিত তথ্য দেওয়া হয়েছে।

৩. DataTable এ ডেটা লোড করা

ডেটা লোড করার জন্য addRow() বা setCell() ফাংশন ব্যবহার করা যায়। addRow() একাধিক ডেটা একত্রে যোগ করতে সাহায্য করে, আর setCell() নির্দিষ্ট কোষে ডেটা আপডেট করতে ব্যবহৃত হয়।

উদাহরণ:

public class GoogleChartsIntegration {
    public native void loadDataIntoTable() /*-{
        var data = new $wnd.google.visualization.DataTable();
        data.addColumn('string', 'Product');
        data.addColumn('number', 'Sales');

        // সারি যোগ করা
        data.addRow(['Product A', 1000]);
        data.addRow(['Product B', 1500]);
        data.addRow(['Product C', 2000]);

        // চার্ট বা টেবিল প্রদর্শন করা
        var options = {
            title: 'Product Sales'
        };

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

এখানে addRow() ব্যবহার করে একাধিক সারি যোগ করা হয়েছে, যেখানে বিভিন্ন পণ্য এবং তাদের বিক্রয়ের তথ্য দেওয়া হয়েছে।

৪. DataTable কাস্টমাইজেশন

DataTable এর কিছু কাস্টমাইজেশন অপশন রয়েছে, যার মাধ্যমে আপনি টেবিলের শিরোনাম, সেল রঙ, ফন্ট, বা অন্যান্য বৈশিষ্ট্য কাস্টমাইজ করতে পারেন।

উদাহরণ:

public class GoogleChartsIntegration {
    public native void customizeDataTable() /*-{
        var data = new $wnd.google.visualization.DataTable();
        data.addColumn('string', 'City');
        data.addColumn('number', 'Population');
        
        // সারি যোগ করা
        data.addRow(['New York', 8175000]);
        data.addRow(['Los Angeles', 3792000]);
        data.addRow(['Chicago', 2695000]);

        // টেবিল কাস্টমাইজেশন
        var options = {
            showRowNumber: true,
            width: '100%',
            height: '100%'
        };

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

এখানে showRowNumber: true দিয়ে টেবিলের প্রতিটি সারির জন্য রো নম্বর দেখানো হয়েছে এবং টেবিলের প্রস্থ ও উচ্চতা 100% নির্ধারণ করা হয়েছে।

DataTable এর সুবিধা

১. ডেটার সঠিক গঠন

DataTable ডেটাকে সঠিকভাবে সজ্জিত এবং গঠন করার জন্য সহায়ক। এটি সহজে ডাটা লোড এবং প্রদর্শনের প্রক্রিয়া সরল করে।

২. ইন্টারেকটিভ টেবিল

Google DataTable একটি ইন্টারেকটিভ টেবিল তৈরি করতে পারে যা ব্যবহারকারীকে ডাটা দেখার, সাজানোর এবং অনুসন্ধান করার সুযোগ দেয়।

৩. কাস্টমাইজেশন অপশন

DataTable এর মাধ্যমে ডেটার প্রেজেন্টেশন কাস্টমাইজ করা যায়, যেমন: ফন্ট সাইজ, রঙ, কলাম বিশ্লেষণ, ইত্যাদি।

৪. সহজ ইন্টিগ্রেশন

GWT এর মাধ্যমে Google Charts এবং DataTable খুব সহজে ইন্টিগ্রেট করা যায় এবং দ্রুত ডাটা প্রদর্শন করা যায়।

সারাংশ

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

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 ব্যবহার করে আপনি আপনার চার্ট এবং টেবিলের ডেটাকে আরও মানানসই এবং উপযোগীভাবে উপস্থাপন করতে পারেন।

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 ব্যবহার করে ডেভেলপাররা সহজেই কাস্টমাইজড এবং ইন্টারেকটিভ চার্ট তৈরি করতে পারেন, যা ব্যবহারকারীদের জন্য আরও উপকারী এবং তথ্যবহুল অভিজ্ঞতা প্রদান করে।