গুগল চার্ট (Google Charts) হল একটি ফ্রি এবং ওপেন সোর্স লাইব্রেরি যা ডেটা ভিজ্যুয়ালাইজেশন তৈরি করার জন্য ব্যবহৃত হয়। এটি JavaScript API ব্যবহার করে ইন্টারঅ্যাকটিভ এবং সুন্দর চার্ট তৈরি করতে সাহায্য করে। গুগল চার্টের মাধ্যমে ডেভেলপাররা সহজেই গ্রাফিক্যাল ডেটা উপস্থাপনা তৈরি করতে পারে, যেমন বার চার্ট, পাই চার্ট, লাইন চার্ট ইত্যাদি।
এই টুলটি বিভিন্ন ধরনের ডেটাকে আকর্ষণীয় এবং সহজে বোধগম্যভাবে প্রদর্শন করতে সহায়ক। এটি HTML এবং JavaScript এর মাধ্যমে ডেটা বিশ্লেষণ এবং উপস্থাপনাকে আরও কার্যকর করে তোলে।
Chart API এর মাধ্যমে Google Charts ব্যবহার
Google Charts ব্যবহার করার জন্য Chart API (Application Programming Interface) ব্যবহার করা হয়। এই API দ্বারা ডেভেলপাররা ডেটা লোড, প্রক্রিয়াকরণ এবং চার্টে রেন্ডার করতে পারেন। Google Charts API JavaScript ভিত্তিক, যা ব্রাউজারে রান করে এবং ডেটা ভিজ্যুয়ালাইজেশনকে আরও ইন্টারঅ্যাকটিভ ও কাস্টমাইজেবল করে।
Google Charts এর Chart API এর মৌলিক বৈশিষ্ট্য
- ডেটা ফরম্যাটিং: API ডেটাকে বিভিন্ন ফরম্যাট যেমন JSON, টেবিল, বা গ্রিড আকারে গ্রহণ করতে পারে।
- কাস্টমাইজেশন: চার্টের ডিজাইন, রং, ফন্ট, লেজেন্ড, অক্ষের লেবেল এবং অন্যান্য অংশ কাস্টমাইজ করা যায়।
- ইন্টারঅ্যাকটিভিটি: চার্টের উপরে হোভার, ক্লিক বা জুম ইন/আউট করার মাধ্যমে আরও বিশদ তথ্য দেখা যায়।
- রেসপন্সিভ ডিজাইন: এটি মোবাইল এবং ডেস্কটপ ব্রাউজার উভয়েই সমানভাবে কাজ করে।
- লাইভ ডেটা আপডেট: রিয়েল-টাইম ডেটা আপডেট এবং ডেটার স্রোত দেখানো সম্ভব।
Google Charts API এর মাধ্যমে Chart তৈরি করার ধাপ
ধাপ ১: লাইব্রেরি লোড করা
প্রথমে Google Charts লাইব্রেরি আপনার HTML ফাইলে লোড করতে হবে। এটি করা হয় নিম্নলিখিত কোডের মাধ্যমে:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
ধাপ ২: প্যাকেজ লোড করা
Chart API ব্যবহার করতে হলে আপনি যে ধরনের চার্ট তৈরি করতে চান, তার প্যাকেজটি লোড করতে হবে। উদাহরণস্বরূপ, বার চার্ট বা লাইন চার্টের জন্য আপনাকে corechart প্যাকেজ লোড করতে হবে।
google.charts.load('current', {packages: ['corechart', 'bar']});
ধাপ ৩: ডেটা প্রস্তুত করা
ডেটাকে প্রস্তুত করতে google.visualization.arrayToDataTable ফাংশন ব্যবহার করা হয়, যা ডেটাকে সঠিক ফরম্যাটে রূপান্তরিত করে।
var data = google.visualization.arrayToDataTable([
['Year', 'Sales'],
['2020', 1000],
['2021', 1200],
['2022', 1500]
]);
ধাপ ৪: চার্ট অপশন সেট করা
চার্টের বিভিন্ন অপশন কাস্টমাইজ করা যায় যেমন শিরোনাম, অক্ষের লেবেল, এবং অন্যান্য ভিজ্যুয়াল উপাদান। এগুলি options অবজেক্টের মাধ্যমে সেট করা হয়।
var options = {
title: 'Sales Growth Over Years',
hAxis: {title: 'Year'},
vAxis: {title: 'Sales (in USD)'}
};
ধাপ ৫: চার্ট ড্র করা
নির্বাচিত কন্টেইনারে চার্টটি ড্র করার জন্য google.visualization.BarChart বা অন্য চার্ট কনস্ট্রাক্টর ব্যবহার করা হয়।
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
ধাপ ৬: HTML ডকুমেন্টে কন্টেইনার তৈরি করা
শেষে, HTML ডকুমেন্টে চার্ট প্রদর্শনের জন্য একটি div কন্টেইনার তৈরি করতে হয়।
<div id="chart_div" style="width: 900px; height: 500px;"></div>
উদাহরণ: একটি বার চার্ট তৈরি করা
এখানে একটি সহজ বার চার্ট তৈরি করা হয়েছে যা বিভিন্ন বছরের সেলস প্রদর্শন করবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Charts Example</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales'],
['2020', 1000],
['2021', 1200],
['2022', 1500]
]);
var options = {
title: 'Sales Growth Over Years',
hAxis: {title: 'Year'},
vAxis: {title: 'Sales (in USD)'}
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Google Charts Example</h2>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
এই কোডটি একটি Bar Chart তৈরি করবে যা ২০২০, ২০২১, এবং ২০২২ সালের সেলস দেখাবে।
উপসংহার
Google Charts এর Chart API একটি অত্যন্ত শক্তিশালী টুল যা ডেটা ভিজ্যুয়ালাইজেশনকে সহজ, ইন্টারঅ্যাকটিভ এবং কাস্টমাইজেবল করে তোলে। এটি বিভিন্ন ধরনের চার্ট তৈরি করতে সক্ষম এবং ডেটাকে আরও বোধগম্য, কার্যকর এবং আকর্ষণীয়ভাবে উপস্থাপন করতে সহায়ক। API এর মাধ্যমে আপনি আপনার ডেটাকে যে কোনো ওয়েব পেজে সহজে ইন্টিগ্রেট করতে পারবেন এবং প্রয়োজনীয় কাস্টমাইজেশন করতে পারবেন।
Read more
