Google Charts একটি শক্তিশালী টুল যা ডাটা ভিজ্যুয়ালাইজেশন করার জন্য ব্যবহৃত হয়। GWT (Google Web Toolkit) ব্যবহার করে Google Charts ইন্টিগ্রেট করার মাধ্যমে আপনি চার্টের refresh এবং animation এর মতো শক্তিশালী ফিচারগুলি সহজে কাস্টমাইজ করতে পারেন। এই টিউটোরিয়ালে আমরা আলোচনা করব কিভাবে GWT এবং Google Charts ব্যবহার করে চার্ট রিফ্রেশ এবং অ্যানিমেশন যুক্ত করা যায়।
Chart Refresh (চার্ট রিফ্রেশ)
চার্ট রিফ্রেশের মাধ্যমে ডেটার পরিবর্তন বা নতুন ডেটা যোগ করার পর চার্টটি স্বয়ংক্রিয়ভাবে পুনরায় রেন্ডার হয়। এটি একেবারে নতুন ডেটা লোড করার জন্য বা ডেটার আপডেটেড অবস্থায় চার্টটি রিফ্রেশ করতে ব্যবহৃত হয়।
১. DataTable আপডেট এবং Chart Refresh
GWT ব্যবহার করে Google Charts এর Chart Refresh করতে হলে প্রথমে ডেটাকে DataTable তে আপডেট করতে হবে এবং পরে chart.draw() ফাংশন কল করে চার্টটি রিফ্রেশ করা যাবে।
উদাহরণ:
public class ChartRefreshExample {
public native void refreshChart() /*-{
var data = new $wnd.google.visualization.arrayToDataTable([
['Year', 'Sales'],
['2013', 1000],
['2014', 1170],
['2015', 660],
['2016', 1030]
]);
var options = {
title: 'Company Sales Performance',
hAxis: { title: 'Year' },
vAxis: { title: 'Sales' }
};
var chart = new $wnd.google.visualization.ColumnChart($doc.getElementById('chart_div'));
chart.draw(data, options);
// আপডেট করা ডেটা
var updatedData = new $wnd.google.visualization.arrayToDataTable([
['Year', 'Sales'],
['2013', 1500],
['2014', 1300],
['2015', 1700],
['2016', 1900]
]);
// চার্ট রিফ্রেশ করা
chart.draw(updatedData, options);
}-*/;
}
এখানে, প্রথমে একটি ডেটা তৈরি করা হয় এবং সেটি চার্টে রেন্ডার করা হয়। তারপর নতুন ডেটা দিয়ে DataTable আপডেট করা হয় এবং chart.draw() ফাংশন কল করে চার্ট রিফ্রেশ করা হয়।
২. ডেটা আপডেটের পরে নির্দিষ্ট সময় পর রিফ্রেশ করা
আপনি চাইলে একটি নির্দিষ্ট সময় পর চার্ট রিফ্রেশ করতে পারেন। উদাহরণস্বরূপ, প্রতি ৫ সেকেন্ড পর চার্ট রিফ্রেশ করতে:
public native void autoRefreshChart() /*-{
var data = new $wnd.google.visualization.arrayToDataTable([
['Year', 'Sales'],
['2013', 1000],
['2014', 1170],
['2015', 660],
['2016', 1030]
]);
var options = {
title: 'Company Sales Performance',
hAxis: { title: 'Year' },
vAxis: { title: 'Sales' }
};
var chart = new $wnd.google.visualization.ColumnChart($doc.getElementById('chart_div'));
chart.draw(data, options);
setInterval(function() {
var updatedData = new $wnd.google.visualization.arrayToDataTable([
['Year', 'Sales'],
['2013', 1500],
['2014', 1300],
['2015', 1700],
['2016', 1900]
]);
chart.draw(updatedData, options);
}, 5000); // 5 সেকেন্ড পর রিফ্রেশ হবে
}-*/;
এখানে, setInterval ফাংশন ব্যবহার করে ৫ সেকেন্ড পর chart.draw() কল করা হচ্ছে, যা চার্ট রিফ্রেশ করবে।
Animation (অ্যানিমেশন)
Animation ব্যবহারকারীর অভিজ্ঞতা উন্নত করার জন্য খুবই গুরুত্বপূর্ণ। Google Charts আপনাকে চার্টে অ্যানিমেশন যোগ করার সুযোগ দেয়, যা ডেটা পরিবর্তনের সময় চার্টের অ্যানিমেটেড ট্রানজিশন তৈরি করে। GWT এর মাধ্যমে Google Charts এর অ্যানিমেশন কাস্টমাইজ করা সহজ।
১. অ্যানিমেশন কনফিগারেশন
Google Charts এ অ্যানিমেশন কনফিগার করার জন্য animation অপশন ব্যবহার করা হয়। এই অপশনটি ব্যবহার করে আপনি অ্যানিমেশনের ধরন, সময়কাল (duration), ইased (transitions) ইত্যাদি কাস্টমাইজ করতে পারেন।
উদাহরণ:
public native void animatedChart() /*-{
var data = new $wnd.google.visualization.arrayToDataTable([
['Year', 'Sales'],
['2013', 1000],
['2014', 1170],
['2015', 660],
['2016', 1030]
]);
var options = {
title: 'Company Sales Performance',
hAxis: { title: 'Year' },
vAxis: { title: 'Sales' },
animation: {
startup: true, // অ্যানিমেশন শুরু হবে
duration: 1000, // ১ সেকেন্ড
easing: 'out' // অ্যানিমেশন ইজিং (transition effect)
}
};
var chart = new $wnd.google.visualization.ColumnChart($doc.getElementById('chart_div'));
chart.draw(data, options);
}-*/;
এখানে, animation অপশন ব্যবহার করে অ্যানিমেশন কনফিগার করা হয়েছে:
startup: true: চার্ট লোড হওয়ার সাথে সাথে অ্যানিমেশন শুরু হবে।duration: অ্যানিমেশন চলার সময়কাল (ms)।easing: অ্যানিমেশন ট্রানজিশনের ইজিং (transition effect), এখানেoutদেওয়া হয়েছে।
২. অ্যানিমেশন ধরণের কাস্টমাইজেশন
Google Charts এ বিভিন্ন ধরনের অ্যানিমেশন ধরণ উপলব্ধ, যেমন:
- in: অ্যানিমেশন ইনফ্লো (chart appears gradually).
- out: অ্যানিমেশন আউটফ্লো (chart disappears gradually).
- inAndOut: অ্যানিমেশন ইন এবং আউট, চার্টটি ধীরে ধীরে আসে এবং পরে চলে যায়।
animation: {
startup: true,
duration: 1000,
easing: 'inAndOut'
}
এখানে inAndOut ব্যবহার করে চার্টের অ্যানিমেশন ইন এবং আউট করা হয়েছে।
৩. অ্যানিমেশনের জন্য ডাটা পরিবর্তন
অ্যানিমেশন শুধু চার্ট লোড হওয়ার সময়ই না, ডেটা পরিবর্তনের পরও হতে পারে। আপনি ডেটার মান পরিবর্তন করার পর অ্যানিমেশন করতে পারেন।
উদাহরণ:
public native void updateChartWithAnimation() /*-{
var data = new $wnd.google.visualization.arrayToDataTable([
['Year', 'Sales'],
['2013', 1000],
['2014', 1170],
['2015', 660],
['2016', 1030]
]);
var options = {
title: 'Company Sales Performance',
hAxis: { title: 'Year' },
vAxis: { title: 'Sales' },
animation: {
startup: true,
duration: 1000,
easing: 'inAndOut'
}
};
var chart = new $wnd.google.visualization.ColumnChart($doc.getElementById('chart_div'));
chart.draw(data, options);
// ডেটা আপডেট করা
var updatedData = new $wnd.google.visualization.arrayToDataTable([
['Year', 'Sales'],
['2013', 1500],
['2014', 1300],
['2015', 1700],
['2016', 1900]
]);
chart.draw(updatedData, options); // অ্যানিমেশন সহ আপডেট করা
}-*/;
এখানে ডেটার পরিবর্তন ঘটানোর পর অ্যানিমেশন চলবে।
সারাংশ
Chart Refresh এবং Animation দুটি গুরুত্বপূর্ণ ফিচার যা GWT এবং Google Charts এর মাধ্যমে সহজে কাস্টমাইজ করা যায়। Chart Refresh ডেটার পরিবর্তন বা আপডেটের পর চার্টকে রিফ্রেশ করতে ব্যবহৃত হয়, এবং Animation চার্টে ডেটা পরিবর্তন বা চার্ট লোড হওয়ার সময় অ্যানিমেশন ট্রানজিশন যোগ করতে সাহায্য করে। এই ফিচারগুলো ব্যবহারকারীর অভিজ্ঞতা উন্নত করে এবং ডেটা ভিজ্যুয়ালাইজেশনকে আরও আকর্ষণীয় ও ইন্টারেকটিভ করে তোলে। GWT এর মাধ্যমে Google Charts ব্যবহার করে আপনি সহজেই এই ফিচারগুলো ইন্টিগ্রেট করতে পারেন।
Read more
