Google Charts API-তে ControlWrapper একটি শক্তিশালী উপাদান যা ব্যবহারকারীদের ইন্টারঅ্যাকটিভ কন্ট্রোল (যেমন ড্রপডাউন, স্লাইডার ইত্যাদি) যোগ করার মাধ্যমে ডেটা ফিল্টার করতে সহায়ক। ControlWrapper ব্যবহার করে, আপনি ব্যবহারকারীর ইনপুটের ভিত্তিতে একটি চার্টের ডেটা ফিল্টার বা কাস্টমাইজ করতে পারেন, যা ডেটা ভিজ্যুয়ালাইজেশনকে আরও ইন্টারেকটিভ এবং ডায়নামিক করে তোলে।
এই টিউটোরিয়ালে, আমরা দেখব কিভাবে ControlWrapper ব্যবহার করে GWT (Google Web Toolkit) অ্যাপ্লিকেশনে ডেটা ফিল্টার করা যায়।
ControlWrapper দিয়ে ডেটা ফিল্টার করার প্রক্রিয়া
১. Google Charts API লোড করা
প্রথমে Google Charts API লোড করতে হবে এবং ControlWrapper এবং চার্টের জন্য প্রয়োজনীয় প্যাকেজগুলি অন্তর্ভুক্ত করতে হবে। GWT-এর মাধ্যমে JSNI (JavaScript Native Interface) ব্যবহার করে Google Charts API লোড করা হয়।
public class ControlWrapperExample {
public native void loadGoogleCharts() /*-{
$wnd.google.charts.load('current', {
packages: ['corechart', 'controls']
});
}-*/;
}
এখানে controls প্যাকেজটি ব্যবহার করা হয়েছে, যা ControlWrapper ফিচারের জন্য প্রয়োজন।
২. ControlWrapper তৈরি এবং ডেটা ফিল্টার করা
ControlWrapper এর মাধ্যমে ডেটা ফিল্টার করা যেতে পারে। উদাহরণস্বরূপ, আমরা একটি ColumnChart তৈরি করব এবং ব্যবহারকারীর ইনপুটের মাধ্যমে ডেটা ফিল্টার করব।
উদাহরণ:
public class ControlWrapperExample {
public native void createChartWithControl() /*-{
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 ($)' }
};
// Create a ColumnChart
var chart = new $wnd.google.visualization.ColumnChart($doc.getElementById('chart_div'));
chart.draw(data, options);
// Create a ControlWrapper for filtering data by Year
var control = new $wnd.google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'control_div',
options: {
filterColumnIndex: 0, // Column index for 'Year'
ui: {
label: 'Select Year'
}
}
});
// Link the ControlWrapper to the chart
control.setControlType('CategoryFilter');
control.setContainerId('control_div');
control.setDataTable(data);
// Set up an event listener to apply the filter
$wnd.google.visualization.events.addListener(control, 'statechange', function () {
chart.draw(data, options);
});
// Draw the control (filter)
control.draw();
}-*/;
}
ব্যাখ্যা:
- ControlWrapper ব্যবহার করে একটি CategoryFilter তৈরি করা হয়েছে, যা Year কলামকে ফিল্টার করার জন্য ব্যবহৃত হচ্ছে।
- filterColumnIndex: 0 দ্বারা Year কলামের উপর ফিল্টারটি প্রয়োগ করা হচ্ছে।
- setControlType('CategoryFilter') এর মাধ্যমে ফিল্টারটি CategoryFilter হিসেবে নির্ধারণ করা হয়েছে।
- $wnd.google.visualization.events.addListener ব্যবহার করে, যখন ব্যবহারকারী কন্ট্রোল (ফিল্টার) পরিবর্তন করবে, তখন chart.draw(data, options) ফাংশন কল হবে এবং নতুন ফিল্টার অনুযায়ী চার্ট রেন্ডার হবে।
৩. UI তে ControlWrapper এবং Chart রেন্ডার করা
এখন, UI তে ControlWrapper এবং Chart রেন্ডার করতে হবে। GWT এর FlowPanel বা HTML widget ব্যবহার করা যায়।
public class ChartWithControlUI extends Composite {
private FlowPanel panel;
public ChartWithControlUI() {
panel = new FlowPanel();
panel.add(new HTML("<div id='control_div' style='width: 400px; height: 100px;'></div>"));
panel.add(new HTML("<div id='chart_div' style='width: 900px; height: 500px;'></div>"));
initWidget(panel);
// Google Chart এবং ControlWrapper ড্র করার ফাংশন কল
createChartWithControl();
}
public native void createChartWithControl() /*-{
// ControlWrapper কোড এখানে ব্যবহার করুন
}-*/;
}
এখানে, control_div এবং chart_div দুটি div এলিমেন্ট তৈরি করা হয়েছে। ControlWrapper এর মাধ্যমে ফিল্টার করা এবং ColumnChart রেন্ডার করা হচ্ছে।
ControlWrapper এর অন্যান্য ফিচার
১. স্লাইডার (Slider) কন্ট্রোল
Slider কন্ট্রোল ব্যবহার করে আপনি ডেটার একটি নির্দিষ্ট রেঞ্জ নির্বাচন করতে পারেন। উদাহরণস্বরূপ, আপনি চাইলে ব্যবহারকারীদের ডেটার পরিমাণ বা অন্য কোনো মেট্রিক ফিল্টার করতে দিতে পারেন।
উদাহরণ:
var control = new $wnd.google.visualization.ControlWrapper({
controlType: 'NumberRangeFilter',
containerId: 'control_div',
options: {
filterColumnIndex: 1, // Sales column (index 1)
minValue: 0,
maxValue: 5000,
ui: {
label: 'Filter by Sales'
}
}
});
২. রেঞ্জ ফিল্টার (Range Filter)
Range Filter ব্যবহার করে আপনি ডেটার একটি নির্দিষ্ট রেঞ্জ ফিল্টার করতে পারেন। এটি ডেটার স্লাইডিং রেঞ্জ প্রদান করে, যাতে ব্যবহারকারীরা সহজে ডেটার মধ্যে নির্বাচন করতে পারেন।
উদাহরণ:
var control = new $wnd.google.visualization.ControlWrapper({
controlType: 'NumberRangeFilter',
containerId: 'control_div',
options: {
filterColumnIndex: 1, // Sales column (index 1)
ui: { label: 'Filter Sales by Range' }
}
});
ControlWrapper এর সুবিধা
১. ইন্টারঅ্যাকটিভ কন্ট্রোল
ControlWrapper ব্যবহার করে চার্টে ইন্টারঅ্যাকটিভ কন্ট্রোল (যেমন: ড্রপডাউন, স্লাইডার) যুক্ত করা যায়, যা ব্যবহারকারীদের জন্য ডেটা ফিল্টার এবং কাস্টমাইজ করা সহজ করে তোলে।
২. ব্যবহারকারীর অভিজ্ঞতা উন্নত করা
ডেটা ফিল্টারিং এর মাধ্যমে, ব্যবহারকারীরা প্রয়োজনীয় তথ্য দ্রুত এবং সহজভাবে দেখতে পারেন, যা তাদের অভিজ্ঞতা উন্নত করে।
৩. ডাইনামিক ডেটা ভিজ্যুয়ালাইজেশন
ControlWrapper ফিচারটি ব্যবহার করে ডাইনামিকভাবে ডেটা পরিবর্তন করে চার্ট আপডেট করা সম্ভব, যা ডেটা ভিজ্যুয়ালাইজেশনকে আরও কার্যকরী ও ইন্টারেকটিভ করে তোলে।
সারাংশ
ControlWrapper Google Charts এর একটি শক্তিশালী ফিচার যা GWT অ্যাপ্লিকেশনে ডেটা ফিল্টার এবং কাস্টমাইজেশন করার জন্য ব্যবহৃত হয়। এটি ব্যবহারকারীদের ইন্টারঅ্যাক্টিভ কন্ট্রোল (যেমন: ড্রপডাউন, স্লাইডার, রেঞ্জ ফিল্টার) ব্যবহার করে ডেটা ফিল্টার করতে এবং তা চার্টে প্রদর্শন করতে সহায়তা করে। GWT এবং Google Charts এর মাধ্যমে ডেটার ইন্টারঅ্যাকটিভ ভিজ্যুয়ালাইজেশন তৈরি করা সম্ভব, যা ব্যবহারকারীদের ডেটা বিশ্লেষণ সহজ এবং কার্যকরী করে তোলে।
Read more
