Google Charts একটি শক্তিশালী টুল যা ডেটা ভিজ্যুয়ালাইজেশন করতে ব্যবহৃত হয়, কিন্তু আপনি যদি আপনার ডেটা ইন্টারনেটের বাইরে, অর্থাৎ অন্য কোনো external data source থেকে পেতে চান, তাহলে Google Charts এ সেই ডেটা ইন্টিগ্রেট করতে পারবেন। Google Charts এর মাধ্যমে আপনি সহজেই বিভিন্ন ধরনের external data sources যেমন Google Sheets, JSON ফাইল, CSV ফাইল, এবং API থেকে ডেটা নিয়ে আপনার চার্ট তৈরি করতে পারেন।
এই টিউটোরিয়ালে আমরা আলোচনা করব কীভাবে Google Charts এর সাথে external data sources (যেমন Google Sheets, JSON) সংযুক্ত করা যায়।
১. Google Charts এবং Google Sheets Integration
Google Sheets একটি জনপ্রিয় এবং সহজ উপায়, যেখানে আপনি ডেটা সংরক্ষণ করতে পারেন এবং তা Google Charts-এ ইন্টিগ্রেট করতে পারেন। Google Sheets-এ থাকা ডেটা Google Visualization API এর মাধ্যমে Google Charts এ লোড করা যেতে পারে।
কোড উদাহরণ: Google Sheets এর ডেটা নিয়ে Chart তৈরি
- Google Sheets এ ডেটা তৈরি করা: আপনার Google Sheets এ ডেটা তৈরি করুন, যেমন:
| Year | Sales |
|---|---|
| 2020 | 1000 |
| 2021 | 1500 |
| 2022 | 1200 |
| 2023 | 1800 |
- Google Sheets থেকে ডেটা লোড করা:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Charts with Google Sheets</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart', 'line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var queryString = encodeURIComponent('SELECT A, B LIMIT 5');
var query = new google.visualization.Query(
'https://docs.google.com/spreadsheets/d/YOUR_SHEET_ID/gviz/tq?sheet=Sheet1&headers=1&tq=' + queryString);
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
var options = {
title: 'Sales Data Over the Years',
hAxis: {title: 'Year'},
vAxis: {title: 'Sales'},
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Google Charts with Google Sheets</h2>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
কোড ব্যাখ্যা:
- Google Sheets এর Query API:
google.visualization.Query()ফাংশন ব্যবহার করে, আমরা Google Sheets এর ডেটা query করে লোড করছি। আপনি Google Sheets ID এবং Sheet name দিয়ে এটি কনফিগার করতে পারেন।
- Query String:
encodeURIComponent('SELECT A, B LIMIT 5')এই কোডের মাধ্যমে আমরা "Year" এবং "Sales" কলামটি নির্বাচন করছি। আপনি SQL-like query ব্যবহার করে আপনার ডেটা ফিল্টার করতে পারেন।
- Data Handling:
handleQueryResponse()ফাংশনে Google Sheets থেকে পাওয়া ডেটা dataTable তে রূপান্তরিত হচ্ছে এবং সেই ডেটা দিয়ে LineChart তৈরি হচ্ছে।
২. Google Charts এবং JSON Data Integration
JSON (JavaScript Object Notation) ফাইল হচ্ছে একটি স্ট্রাকচারড ডেটা ফরম্যাট যা ওয়েব অ্যাপ্লিকেশনগুলিতে ডেটা ট্রান্সফার করার জন্য ব্যবহৃত হয়। Google Charts JSON ডেটার মাধ্যমে চার্ট তৈরি করতে সক্ষম।
কোড উদাহরণ: JSON Data নিয়ে Chart তৈরি
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Charts with JSON Data</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart', 'line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var jsonData = $.ajax({
url: 'data.json', // JSON ডেটার লোকেশন
dataType: 'json',
async: false
}).responseText;
var data = new google.visualization.DataTable(jsonData);
var options = {
title: 'Sales Data Over the Years',
hAxis: {title: 'Year'},
vAxis: {title: 'Sales'},
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Google Charts with JSON Data</h2>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
JSON Data ফাইল (data.json):
{
"cols": [
{"id":"","label":"Year","type":"string"},
{"id":"","label":"Sales","type":"number"}
],
"rows": [
{"c":[{"v":"2020"},{"v":1000}]},
{"c":[{"v":"2021"},{"v":1500}]},
{"c":[{"v":"2022"},{"v":1200}]},
{"c":[{"v":"2023"},{"v":1800}]}
]
}
কোড ব্যাখ্যা:
- JSON ডেটা লোড করা:
$.ajax()ফাংশন ব্যবহার করে JSON ডেটা লোড করা হচ্ছে। এখানেasync: falseব্যবহার করা হয়েছে, যা ডেটা সিঙ্ক্রোনাসলি লোড করতে সাহায্য করবে।
- DataTable তৈরি:
- JSON ডেটা থেকে
google.visualization.DataTable()ফাংশন দিয়ে ডেটা তৈরি করা হচ্ছে। ডেটা columns (cols) এবং rows এর মাধ্যমে গঠন করা হয়েছে।
- JSON ডেটা থেকে
- Chart Rendering:
- JSON ডেটা দিয়ে LineChart তৈরি করা হয়েছে এবং সেটি প্রদর্শন করা হচ্ছে।
৩. Google Charts এবং External API Integration
Google Charts এর মাধ্যমে আপনি external API থেকেও ডেটা লোড করে চার্ট তৈরি করতে পারেন। উদাহরণস্বরূপ, আপনি একটি রিয়েল-টাইম API থেকে ডেটা নিয়ে তা আপনার চার্টে রেন্ডার করতে পারেন।
কোড উদাহরণ: External API Data নিয়ে Chart তৈরি
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Charts with API Data</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart', 'line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
// Example API URL returning JSON data
var apiUrl = 'https://api.example.com/data';
fetch(apiUrl)
.then(response => response.json())
.then(data => {
var chartData = new google.visualization.DataTable();
chartData.addColumn('string', 'Year');
chartData.addColumn('number', 'Sales');
data.forEach(item => {
chartData.addRow([item.year, item.sales]);
});
var options = {
title: 'Sales Data',
hAxis: {title: 'Year'},
vAxis: {title: 'Sales'},
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(chartData, options);
});
}
</script>
</head>
<body>
<h2>Google Charts with API Data</h2>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
কোড ব্যাখ্যা:
- API থেকে ডেটা লোড করা:
fetch()ফাংশন ব্যবহার করে API থেকে JSON ডেটা সংগ্রহ করা হয়েছে।then()ফাংশন ব্যবহার করে ডেটা প্রাপ্তির পর চার্টে রেন্ডার করা হয়েছে।
- DataTable তৈরি করা:
- API থেকে আসা ডেটা দিয়ে DataTable তৈরি করা হয়েছে এবং তার মধ্যে Year এবং Sales ডেটা যোগ করা হয়েছে।
উপসংহার
Google Charts এবং External Data Sources এর ইন্টিগ্রেশন একটি শক্তিশালী উপায় ডেটা ভিজ্যুয়ালাইজেশন তৈরি করার জন্য। আপনি Google Sheets, JSON, বা External API থেকে ডেটা লোড করে সহজেই আপনার চার্ট তৈরি করতে পারেন। এই ইন্টিগ্রেশন আপনাকে রিয়েল-টাইম ডেটা এবং ডাইনামিক ভিজ্যুয়ালাইজেশন প্রদান করতে সহায়ক।
Google Sheets থেকে ডেটা Google Charts এ ইমপোর্ট করা একটি খুবই জনপ্রিয় এবং কার্যকরী উপায় ডেটা ভিজ্যুয়ালাইজেশন তৈরির জন্য। এটি আপনাকে সহজে স্প্রেডশিটে থাকা ডেটা দিয়ে ডাইনামিক চার্ট তৈরি করতে সহায়তা করে, যা রিয়েল-টাইমে আপডেটও হতে পারে।
এই গাইডে, আমরা Google Sheets থেকে ডেটা ইমপোর্ট করে Google Charts ব্যবহার করে একটি চার্ট তৈরি করার পদ্ধতি শিখবো।
১. Google Sheets থেকে Data Import করার উপায়
Google Sheets থেকে ডেটা ইমপোর্ট করার জন্য Google Visualization API ব্যবহার করা হয়। এর মাধ্যমে আপনি স্প্রেডশিটের ডেটা সরাসরি Google Charts এ ইমপোর্ট করতে পারেন।
প্রাথমিক সেটআপ
প্রথমত, আপনাকে Google Sheets এর public শেয়ার সেটিংস করতে হবে, যাতে চার্টটি আপনার ওয়েব পেজে অ্যাক্সেস করতে পারে।
২. Google Sheets থেকে ডেটা লোড করার উদাহরণ
এই উদাহরণে আমরা একটি Google Sheets ডেটাবেস থেকে ডেটা ইমপোর্ট করে Line Chart তৈরি করব।
HTML এবং JavaScript কোড উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Charts with Google Sheets</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Google Charts লাইব্রেরি লোড করা
google.charts.load('current', {'packages':['corechart', 'line']});
// কলব্যাক ফাংশন
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
// Google Sheets থেকে ডেটা লোড করা
var queryString = encodeURIComponent('SELECT A, B, C WHERE A IS NOT NULL');
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1A1ySDeh4tRpmGoqSg6kYhNREiWzxvLE9YrfHkA9t2A0/edit?usp=sharing');
query.setQuery(queryString);
query.send(handleQueryResponse);
}
// ডেটা প্রাপ্তি এবং চার্ট আঁকা
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
var options = {
title: 'Sales Data Over Time',
hAxis: {title: 'Year'},
vAxis: {title: 'Sales'},
series: {
0: { curveType: 'function' }
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Google Charts with Google Sheets Data</h2>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
৩. কোড ব্যাখ্যা
- Google Visualization API লোড করা:
google.charts.load('current', {'packages':['corechart', 'line']});লাইনে আমরা corechart এবং line প্যাকেজ লোড করেছি, যা আমাদের Line Chart তৈরি করতে সাহায্য করবে।
- Google Sheets Query:
google.visualization.Query()ফাংশনের মাধ্যমে Google Sheets থেকে ডেটা ইমপোর্ট করা হচ্ছে।- এখানে spreadsheet URL ব্যবহার করা হয়েছে:
'https://docs.google.com/spreadsheets/d/1A1ySDeh4tRpmGoqSg6kYhNREiWzxvLE9YrfHkA9t2A0/edit?usp=sharing'। আপনি আপনার শীটের URL দিয়ে এটি প্রতিস্থাপন করতে পারেন। SELECT A, B, C WHERE A IS NOT NULL: এই কোডটি নির্দিষ্ট columns (A, B, C) থেকে ডেটা নির্বাচন করে, যেখানে column A খালি নয়।
- ডেটা প্রসেসিং:
query.send(handleQueryResponse);এই ফাংশনটি ডেটা সঠিকভাবে লোড হওয়ার পর handleQueryResponse ফাংশন কল করবে।
- চার্ট আঁকা:
handleQueryResponseফাংশনে Line Chart তৈরি হচ্ছে এবং এর পরামর্শিত ডেটাresponse.getDataTable()এর মাধ্যমে সন্নিবেশিত হচ্ছে।- options ব্যবহার করে আমরা চার্টের বিভিন্ন অপশন যেমন শিরোনাম, অক্ষের নাম ইত্যাদি কাস্টমাইজ করেছি।
৪. Google Sheets এর ডেটা প্রস্তুত
Google Sheets থেকে ডেটা ইমপোর্ট করার আগে নিশ্চিত করুন যে আপনার শীট public শেয়ার করা হয়েছে এবং প্রয়োজনীয় columns সঠিকভাবে প্রস্তুত আছে। উদাহরণস্বরূপ:
| Year | Product A | Product B |
|---|---|---|
| 2020 | 1000 | 1500 |
| 2021 | 1100 | 1600 |
| 2022 | 1200 | 1700 |
এখানে, Year, Product A, এবং Product B এই তিনটি কলাম ব্যবহার করা হয়েছে।
৫. Google Sheets থেকে Data Import এ অন্যান্য বিষয়
- Query Language: আপনি SQL-like queries ব্যবহার করে স্প্রেডশিট থেকে ডেটা নির্বাচন করতে পারেন, যেমন
SELECT,WHERE,ORDER BYইত্যাদি। - Real-time Updates: Google Sheets পরিবর্তন হলে সেই পরিবর্তনগুলি Google Charts-এও রিয়েল-টাইমে আপডেট হবে, কারণ Google Visualization API সরাসরি Google Sheets-এর ডেটার সাথে সংযুক্ত থাকে।
- Private Sheets: যদি শীটটি private হয়, তবে আপনাকে OAuth বা অন্যান্য অনুমতি ব্যবস্থাপনা ব্যবহার করতে হতে পারে।
উপসংহার
Google Sheets থেকে ডেটা ইমপোর্ট করে Google Charts এ ভিজ্যুয়ালাইজেশন তৈরি করা একটি অত্যন্ত সহজ এবং কার্যকরী পদ্ধতি, যা ডেটা অ্যানালাইসিস এবং রিপোটিং করতে সহায়ক। আপনি সহজেই Google Visualization API ব্যবহার করে স্প্রেডশিট থেকে ডেটা লোড করে বিভিন্ন ধরনের চার্ট তৈরি করতে পারেন এবং তা রিয়েল-টাইমে আপডেট করতে পারেন।
Google Charts ব্যবহার করে আপনি JSON এবং CSV ফরম্যাটে ডেটা ফেচ করে চার্টে প্রদর্শন করতে পারেন। JSON এবং CSV দুটি সাধারণ ডেটা ফরম্যাট যা বিভিন্ন অ্যাপ্লিকেশন এবং সিস্টেমে ডেটা আদান-প্রদান করতে ব্যবহৃত হয়। এই টিউটোরিয়ালে আমরা দেখব কিভাবে JSON এবং CSV ডেটা ফেচ করে Google Charts এ প্রদর্শন করা যায়।
১. JSON Data Fetching and Display in Google Charts
JSON (JavaScript Object Notation) ডেটা ফরম্যাট একটি লাইটওয়েট এবং পাঠযোগ্য ডেটা ফরম্যাট যা সহজেই ডেটা শেয়ার এবং প্রসেস করতে ব্যবহার করা যায়। Google Charts JSON ডেটা থেকে চার্ট তৈরি করতে সহায়ক।
উদাহরণ: JSON ডেটা ফেচ করে Google Charts এ প্রদর্শন করা
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Charts with JSON Data</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() {
// JSON ডেটা ফেচ করা
var jsonData = {
"cols": [
{"id": "year", "label": "Year", "type": "string"},
{"id": "sales", "label": "Sales", "type": "number"}
],
"rows": [
{"c":[{"v":"2020"},{"v":1000}]},
{"c":[{"v":"2021"},{"v":1200}]},
{"c":[{"v":"2022"},{"v":1500}]},
{"c":[{"v":"2023"},{"v":1700}]}
]
};
// ডেটা টেবিল তৈরি
var data = new google.visualization.DataTable(jsonData);
var options = {
title: 'Company Sales',
hAxis: {title: 'Year'},
vAxis: {title: 'Sales'},
legend: {position: 'bottom'}
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Google Chart with JSON Data</h2>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
কোড ব্যাখ্যা:
- JSON Data:
jsonDataভেরিয়েবলে JSON ফরম্যাটে ডেটা রাখা হয়েছে। এখানে cols হল কলামের সংজ্ঞা এবং rows হল ডেটার সারি। - DataTable:
google.visualization.DataTable(jsonData)ব্যবহার করে JSON ডেটাকে Google Charts এর DataTable এ রূপান্তর করা হয়। - Chart Creation:
google.visualization.BarChart()ফাংশন দিয়ে বার চার্ট তৈরি করা হয় এবং ডেটা প্রদর্শিত হয়।
২. CSV Data Fetching and Display in Google Charts
CSV (Comma-Separated Values) ডেটা ফরম্যাট একটি সাধারণ এবং জনপ্রিয় ফরম্যাট যা ডেটাকে সহজে টেবিল আকারে উপস্থাপন করতে সাহায্য করে। Google Charts এ CSV ডেটা ফেচ করে তা চার্টে প্রদর্শন করা সহজ।
উদাহরণ: CSV ডেটা ফেচ করে Google Charts এ প্রদর্শন করা
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Charts with CSV Data</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() {
// CSV ডেটা ফেচ করা
var csvData = 'Year,Sales\n2020,1000\n2021,1200\n2022,1500\n2023,1700';
// CSV ডেটাকে DataTable এ রূপান্তর করা
var data = google.visualization.arrayToDataTable(csvToArray(csvData));
var options = {
title: 'Company Sales',
hAxis: {title: 'Year'},
vAxis: {title: 'Sales'},
legend: {position: 'bottom'}
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
// CSV কে Array এ রূপান্তর করার ফাংশন
function csvToArray(csv) {
var rows = csv.split('\n');
var data = [];
for (var i = 0; i < rows.length; i++) {
data.push(rows[i].split(','));
}
return data;
}
</script>
</head>
<body>
<h2>Google Chart with CSV Data</h2>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
কোড ব্যাখ্যা:
- CSV Data:
csvDataভেরিয়েবলে CSV ফরম্যাটে ডেটা রাখা হয়েছে। - CSV to Array:
csvToArray()ফাংশনটি CSV ডেটাকে array তে রূপান্তর করে যা পরেgoogle.visualization.arrayToDataTable()ফাংশন দ্বারা DataTable এ রূপান্তরিত হয়। - Chart Creation:
google.visualization.BarChart()ফাংশন ব্যবহার করে CSV ডেটা থেকে বার চার্ট তৈরি করা হয়।
৩. JSON এবং CSV থেকে ডেটা Fetch করার জন্য AJAX ব্যবহার করা
যদি আপনার ডেটা সার্ভার থেকে ডায়নামিকভাবে আসছে, তাহলে আপনি AJAX ব্যবহার করে JSON বা CSV ফাইল ফেচ করতে পারেন এবং তারপর সেই ডেটাকে Google Charts এ প্রদর্শন করতে পারেন।
উদাহরণ: JSON ডেটা AJAX এর মাধ্যমে ফেচ করা
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX JSON Data Fetching</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(fetchData);
function fetchData() {
// AJAX কল দিয়ে JSON ডেটা ফেচ করা
var xhr = new XMLHttpRequest();
xhr.open('GET', 'data.json', true); // data.json ফাইলের অবস্থান দিন
xhr.onload = function() {
if (xhr.status === 200) {
var jsonData = JSON.parse(xhr.responseText);
drawChart(jsonData);
}
};
xhr.send();
}
function drawChart(jsonData) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Sales');
jsonData.forEach(function(row) {
data.addRow([row.year, row.sales]);
});
var options = {
title: 'Company Sales',
hAxis: {title: 'Year'},
vAxis: {title: 'Sales'},
legend: {position: 'bottom'}
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Google Chart with AJAX JSON Data</h2>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
কোড ব্যাখ্যা:
- AJAX Request:
XMLHttpRequestব্যবহার করে JSON ডেটা ফেচ করা হয়েছে। - JSON Parsing:
JSON.parse()এর মাধ্যমে সার্ভার থেকে আসা JSON ডেটাকে পার্স করা হয়েছে এবং তারপর Google Charts এ পাঠানো হয়েছে। - Draw Chart: JSON ডেটা চার্টে প্রদর্শন করার জন্য
google.visualization.DataTable()এবংgoogle.visualization.BarChart()ব্যবহার করা হয়েছে।
উপসংহার
Google Charts ব্যবহার করে আপনি JSON এবং CSV ডেটা ফেচ করে সহজেই চার্ট তৈরি করতে পারেন। আপনি AJAX ব্যবহার করে ডায়নামিক ডেটা ফেচ করতে পারেন এবং তারপর সেই ডেটা DataTable এ রূপান্তর করে চার্টে প্রদর্শন করতে পারেন। Google Charts এ এই ধরনের ডেটা ফেচ এবং প্রদর্শন পদ্ধতি অত্যন্ত কার্যকরী এবং দ্রুত চার্ট তৈরি করতে সাহায্য করে।
Google Charts এর মাধ্যমে ডেটা ভিজ্যুয়ালাইজেশন করতে গেলে, অনেক সময় ডেটা সরাসরি REST API থেকে সংগ্রহ করে ব্যবহার করা হয়। REST API (Representational State Transfer API) বিভিন্ন সার্ভিস বা ডেটাবেস থেকে ডেটা আনার একটি জনপ্রিয় মাধ্যম। Google Charts REST API থেকে ডেটা এনে ব্যবহার করতে সাহায্য করে এবং সেগুলো চার্ট আকারে রেন্ডার করা যায়।
এই টিউটোরিয়ালে, আমরা দেখবো কিভাবে Google Charts ব্যবহার করে REST API থেকে ডেটা নিয়ে, তা চার্টে integrate করতে হবে।
১. REST API থেকে Data Fetch করা
Google Charts-এ REST API থেকে ডেটা fetch করতে সাধারণত JavaScript এর fetch API বা XMLHttpRequest ব্যবহার করা হয়। REST API থেকে ডেটা আসলে এটি JSON ফরম্যাটে হয়, যা সহজেই Google Charts-এ ডেটা তৈরি করতে ব্যবহার করা যায়।
উদাহরণ: REST API থেকে Data Fetch করে Google Charts এ ব্যবহার
ধরা যাক, আমাদের একটি REST API রয়েছে যেখান থেকে আমরা ডেটা পাবো। API থেকে প্রাপ্ত ডেটা JSON ফরম্যাটে থাকবে এবং আমরা তা Google Charts-এ ব্যবহার করব।
উদাহরণ: Fetching Data from REST API and Displaying it on Google Charts
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Charts with REST API</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']});
// Data Fetching from REST API
function fetchDataAndDrawChart() {
fetch('https://api.example.com/getSalesData') // Replace with your actual API endpoint
.then(response => response.json())
.then(data => {
// Process the fetched data
var processedData = processAPIData(data);
// Draw the chart with the processed data
drawChart(processedData);
})
.catch(error => console.error('Error fetching data:', error));
}
// Process API Data into Google Charts format
function processAPIData(data) {
var chartData = [['Year', 'Sales']]; // Adding headers
// Assuming the API returns an array of objects with 'year' and 'sales'
data.forEach(item => {
chartData.push([item.year, item.sales]); // Push each data row
});
return chartData;
}
// Draw the chart
function drawChart(data) {
var dataTable = google.visualization.arrayToDataTable(data);
var options = {
title: 'Sales Over the Years',
hAxis: {title: 'Year'},
vAxis: {title: 'Sales'},
legend: { position: 'bottom' }
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(dataTable, options);
}
// Load the chart once the API data is available
google.charts.setOnLoadCallback(fetchDataAndDrawChart);
</script>
</head>
<body>
<h2>Google Charts with Data from REST API</h2>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
কোড ব্যাখ্যা:
- Data Fetching:
fetch()API ব্যবহার করা হয়েছে, যা একটি asynchronous অপারেশন। এটি সার্ভার থেকে ডেটা GET পদ্ধতিতে নেয়।'https://api.example.com/getSalesData': এখানে আপনার REST API URL বসাতে হবে।.then(response => response.json()): API থেকে প্রাপ্ত JSON ডেটা পার্স করা হচ্ছে।
- Processing the Data: API থেকে প্রাপ্ত ডেটা একটি নতুন ফরম্যাটে রূপান্তরিত করা হয়েছে, যাতে তা Google Charts দ্বারা সহজে ব্যবহার করা যায়। আমরা একটি 2D array তৈরি করেছি যেখানে প্রথম সারিতে
['Year', 'Sales']হেডার এবং পরবর্তী সারিগুলোতে ডেটা রয়েছে। - Drawing the Chart:
google.visualization.arrayToDataTable()ফাংশন ব্যবহার করে আমরা Google Charts এর জন্য ডেটা তৈরি করছি এবংgoogle.visualization.BarChart()ফাংশন দিয়ে চূড়ান্ত চার্ট তৈরি করা হচ্ছে। - Error Handling:
.catch()ব্লক ব্যবহার করে API থেকে ডেটা ফেচ করার সময় যদি কোনো ত্রুটি ঘটে, তবে তা কনসোলে প্রদর্শিত হবে।
২. REST API থেকে Data Fetch করার ক্ষেত্রে কিছু গুরুত্বপূর্ণ টিপস
২.১. Cross-Origin Resource Sharing (CORS)
- CORS (Cross-Origin Resource Sharing) একটি নিরাপত্তা ফিচার যা নিশ্চিত করে যে ওয়েব পেজ অন্য ডোমেইনের API অ্যাক্সেস করতে পারবে কিনা। যদি আপনি একটি API থেকে ডেটা ফেচ করছেন যা অন্য ডোমেইনে রয়েছে, তবে CORS সমস্যা আসতে পারে।
- আপনি যদি CORS সমস্যা সম্মুখীন হন, তবে API সার্ভারকে CORS হেডারস দিয়ে কনফিগার করতে হবে। অথবা আপনি একটি proxy server ব্যবহার করতে পারেন।
২.২. Asynchronous Data Handling
- যখন আপনি REST API থেকে ডেটা ফেচ করবেন, তখন তা asynchronous হবে, অর্থাৎ ডেটা আসা না পর্যন্ত অন্যান্য কোড চলতে থাকবে। তাই, আপনি ডেটা লোড হওয়া পর্যন্ত চার্ট রেন্ডারিং বন্ধ রাখতে পারেন বা একটি loading indicator প্রদর্শন করতে পারেন।
২.৩. Data Validation
- API থেকে আসা ডেটা সঠিক কিনা তা যাচাই করা খুবই গুরুত্বপূর্ণ। ডেটা ফেচ করার পর, আপনার কোডে অবশ্যই একটি যাচাই পদ্ধতি থাকতে হবে যাতে ভুল ডেটা দিয়ে চার্ট না তৈরি হয়।
if (!data || !Array.isArray(data) || data.length === 0) {
console.error('Invalid or empty data');
return;
}
২.৪. Data Pagination
- যদি আপনার API থেকে বিশাল পরিমাণ ডেটা আসে, তবে pagination ব্যবহার করে ডেটা আনা উচিত, যাতে আপনার অ্যাপ্লিকেশন স্লো না হয়। REST API অনেক সময় pagination সাপোর্ট করে, যাতে আপনি একবারে ডেটার একটি নির্দিষ্ট অংশ নিয়ে কাজ করতে পারেন।
৩. Conclusion
Google Charts ব্যবহার করে REST API থেকে ডেটা fetch করে এবং তা ভিজ্যুয়ালাইজ করা খুবই সহজ। এটি আপনাকে dynamic data visualization তৈরি করতে সাহায্য করে। ডেটার রূপান্তর, API এর সাথে যোগাযোগ এবং ডেটার সঠিক প্রদর্শন নিশ্চিত করার জন্য কিছু বেস্ট প্র্যাকটিস ব্যবহার করলে পারফরম্যান্স উন্নত হবে। এই প্রক্রিয়ার মাধ্যমে আপনি যেকোনো ধরনের ডেটা চমৎকারভাবে ভিজ্যুয়ালাইজ করতে পারবেন।
Google Charts ব্যবহার করে আপনি আপনার ওয়েব অ্যাপ্লিকেশনে বা ড্যাশবোর্ডে ডেটা ভিজ্যুয়ালাইজেশন খুব সহজে করতে পারেন। তবে, কখনও কখনও আপনি চাইবেন যে আপনার চার্ট ডেটা external databases (যেমন, MySQL, PostgreSQL, MongoDB বা Google Sheets) থেকে সিঙ্ক্রোনাইজ হয়ে চলুক, যাতে ডেটা স্বয়ংক্রিয়ভাবে আপডেট হয় এবং ব্যবহারকারীদের রিয়েল-টাইমে সঠিক তথ্য দেওয়া যায়।
এই গাইডে আমরা দেখব কিভাবে Google Charts ব্যবহার করে external database থেকে ডেটা সিঙ্ক্রোনাইজ করতে হয় এবং dynamic charts তৈরি করা যায়।
১. External Database থেকে Data Retrieve করা
Google Charts থেকে ডেটা সংগ্রহ করতে সাধারণত একটি backend সার্ভার বা API দরকার হয়, যেটি database থেকে ডেটা বের করে এবং সেই ডেটা JSON বা CSV ফরম্যাটে ফ্রন্টএন্ডে পাঠায়।
১.১ PHP এবং MySQL Database ব্যবহার করে Data Fetch করা
ধরা যাক আপনি MySQL ডেটাবেসে ডেটা সংরক্ষণ করছেন এবং সেখান থেকে Google Charts এর জন্য ডেটা ফেচ করতে চান।
PHP স্ক্রিপ্ট: (ডেটাবেস থেকে ডেটা ফেচ করা)
<?php
// MySQL connection
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "chart_database";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT year, sales FROM sales_data";
$result = $conn->query($sql);
// Fetch data into an array
$data = [];
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$data[] = [$row["year"], $row["sales"]];
}
} else {
echo "0 results";
}
$conn->close();
// Return data as JSON
echo json_encode($data);
?>
PHP স্ক্রিপ্ট ব্যাখ্যা:
- আমরা MySQL ডেটাবেসের সাথে সংযোগ স্থাপন করছি এবং sales_data টেবিল থেকে year এবং sales ডেটা ফেচ করছি।
- json_encode() ফাংশন ব্যবহার করে ডেটা JSON ফরম্যাটে পাঠানো হচ্ছে।
২. Google Charts এ Data Integrate করা
এখন, আমরা এই ডেটা Google Charts এ প্রদর্শন করব। এখানে আমরা AJAX ব্যবহার করব, যা আমাদের PHP স্ক্রিপ্ট থেকে ডেটা গ্রহণ করবে এবং Google Chart-এ প্রদর্শন করবে।
২.১ AJAX দিয়ে PHP থেকে ডেটা লোড করা
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Charts with External Data</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Sales');
// Fetch data from PHP script via AJAX
fetch('get_data.php')
.then(response => response.json())
.then(jsonData => {
jsonData.forEach(row => {
data.addRow([row[0], row[1]]);
});
// Draw the chart
var options = {
title: 'Company Sales Over the Years',
hAxis: {title: 'Year'},
vAxis: {title: 'Sales'},
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
})
.catch(error => console.error('Error fetching data:', error));
}
</script>
</head>
<body>
<h2>Google Chart with External Database Data</h2>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
কোড ব্যাখ্যা:
- AJAX ফেচিং: আমরা fetch() ফাংশন ব্যবহার করে PHP স্ক্রিপ্ট (
get_data.php) থেকে ডেটা নিয়ে আসছি। ডেটা আসার পর আমরা সেই ডেটা Google Charts এর DataTable এ যোগ করি। - Chart Rendering: ডেটা পাওয়ার পর চার্ট তৈরি করা হচ্ছে এবং সেটি ব্যবহারকারীকে দেখানো হচ্ছে।
৩. Real-time Data Sync: Google Sheets এর সাথে
Google Sheets খুব জনপ্রিয় একটি টুল যা আপনাকে ডেটা রিয়েল-টাইমে আপডেট এবং সিঙ্ক্রোনাইজ করতে সাহায্য করে। আপনি Google Sheets API ব্যবহার করে রিয়েল-টাইম ডেটা গুগল চার্টে প্রদর্শন করতে পারেন।
৩.১ Google Sheets থেকে ডেটা Fetch করা
Google Sheets থেকে ডেটা নিয়ে Google Charts এ সেটি প্রদর্শন করতে, প্রথমে আপনার Google Sheets এর ডেটা 公開 করতে হবে (Public Sharing)। তারপর, Google Visualization API ব্যবহার করে ডেটা ফেচ করা যায়।
google.charts.load('current', {
packages: ['corechart', 'table']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var queryString = encodeURIComponent('SELECT A, B');
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/your_spreadsheet_id/gviz/tq?tq=' + queryString);
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, {
title: 'Sales Over Time',
curveType: 'function',
legend: { position: 'bottom' }
});
}
কোড ব্যাখ্যা:
- Google Sheets API: আমরা Google Sheets ডেটাকে Google Visualization API এর মাধ্যমে প্যারামিটার হিসেবে পাঠাচ্ছি। এটি ডেটা ফেচ করার জন্য কাজ করবে।
- Query: এখানে একটি query string ব্যবহার করা হয়েছে যা Google Sheets থেকে A এবং B কলাম নির্বাচন করবে (আপনার শিটের নামানুসারে এটা পরিবর্তিত হতে পারে)।
৪. WebSocket বা Server Push প্রযুক্তি ব্যবহার করে Real-Time Sync
যদি আপনি রিয়েল-টাইম ডেটা সিঙ্ক্রোনাইজেশন চান, তবে WebSocket অথবা Server Push ব্যবহার করা যেতে পারে। এই প্রযুক্তিগুলি সার্ভার থেকে ক্লায়েন্টে দ্রুত তথ্য প্রেরণ করতে সহায়ক, যা রিয়েল-টাইম চার্ট আপডেট করার জন্য কার্যকর।
const socket = new WebSocket('ws://your-server.com/socket');
socket.onmessage = function(event) {
const data = JSON.parse(event.data);
// Update chart with new data
chart.draw(data, options);
};
এখানে, WebSocket সার্ভার থেকে রিয়েল-টাইম ডেটা পাঠানোর জন্য ব্যবহৃত হচ্ছে এবং সেই ডেটা দিয়ে চার্ট আপডেট করা হচ্ছে।
উপসংহার
Google Charts এবং External Database এর মধ্যে ডেটা সিঙ্ক্রোনাইজেশন আপনাকে dynamic charts তৈরি করতে সহায়তা করে, যা ব্যবহারকারীদের রিয়েল-টাইমে সঠিক তথ্য প্রদর্শন করতে পারে। আপনি PHP, Google Sheets, AJAX, WebSocket, বা Server Push এর মাধ্যমে Google Charts এর সাথে ডেটা সিঙ্ক্রোনাইজ করতে পারেন। এটি আপনার ড্যাশবোর্ড বা ওয়েব অ্যাপ্লিকেশনে ডেটা ভিজ্যুয়ালাইজেশনকে আরও দ্রুত, কার্যকরী এবং ইন্টারঅ্যাকটিভ করে তোলে।
Read more
