Google Charts একটি শক্তিশালী ভিজ্যুয়ালাইজেশন টুল যা ওয়েব ডেভেলপারদের বিভিন্ন ধরনের চার্ট তৈরি এবং কাস্টমাইজ করার সুবিধা প্রদান করে। তবে, অনেক সময় চার্টের ডেটা export বা integrate করার প্রয়োজন পড়ে। এখানে আমরা আলোচনা করব Chart Data Export এবং Integration Techniques নিয়ে, যাতে আপনি আপনার চার্টের ডেটা সহজে এক্সপোর্ট করতে পারেন এবং অন্যান্য প্ল্যাটফর্মের সাথে ইন্টিগ্রেট করতে পারেন।
১. Chart Data Export Techniques
Google Charts এর মাধ্যমে তৈরি করা ডেটা অনেক সময় এক্সপোর্ট করার প্রয়োজন হতে পারে, যেমন এক্সেল (Excel), CSV ফাইল, অথবা ইমেজ আউটপুট। Google Charts সরাসরি ডেটা এক্সপোর্ট করার কোনো অপশন না দিলেও, JavaScript এবং HTML ব্যবহার করে আপনি এই কাজটি করতে পারেন।
১.১. Data Export to CSV
চার্টের ডেটা CSV (Comma Separated Values) ফাইলে এক্সপোর্ট করার জন্য JavaScript ব্যবহার করা যেতে পারে।
উদাহরণ: Google Chart Data Export to CSV
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Export Chart Data to CSV</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([
['City', 'Population'],
['New York', 8175000],
['Los Angeles', 3792000],
['Chicago', 2695000],
['Houston', 2121000],
['Phoenix', 1445000]
]);
var options = {
title: 'Population of Major Cities',
hAxis: {title: 'Population', minValue: 0},
vAxis: {title: 'City'},
legend: { position: 'none' }
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
// Export data to CSV
document.getElementById('exportButton').onclick = function() {
var csv = 'City,Population\n'; // CSV header
for (var i = 0; i < data.getNumberOfRows(); i++) {
csv += data.getValue(i, 0) + ',' + data.getValue(i, 1) + '\n';
}
var hiddenElement = document.createElement('a');
hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csv);
hiddenElement.target = '_blank';
hiddenElement.download = 'chart_data.csv';
hiddenElement.click();
};
}
</script>
</head>
<body>
<h2>Google Chart with Export to CSV</h2>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
<button id="exportButton">Export Data to CSV</button>
</body>
</html>
কোড ব্যাখ্যা:
- Data to CSV: চার্টের ডেটা
data.getValue(i, 0)এবংdata.getValue(i, 1)এর মাধ্যমে CSV ফরম্যাটে রূপান্তর করা হয়। - Download CSV: Download অপশন তৈরি করতে
aট্যাগ এবংdata:text/csvইউআরএল ব্যবহার করা হয়েছে, যা ব্যবহারকারীদের CSV ফাইল ডাউনলোড করতে সাহায্য করে।
২. Chart Data Export to Image
চার্টের ইমেজ আউটপুট তৈরির জন্য Google Charts সরাসরি কোনো API সরবরাহ করে না, তবে আপনি JavaScript এবং HTML এর সাহায্যে এক্সপোর্ট করা চিত্রটি Base64 encoding হিসেবে সেভ করতে পারেন।
উদাহরণ: Chart Export to PNG (Image)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Export Chart to Image</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([
['City', 'Population'],
['New York', 8175000],
['Los Angeles', 3792000],
['Chicago', 2695000],
['Houston', 2121000],
['Phoenix', 1445000]
]);
var options = {
title: 'Population of Major Cities',
hAxis: {title: 'Population', minValue: 0},
vAxis: {title: 'City'},
legend: { position: 'none' }
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
// Export chart to PNG image
document.getElementById('exportImageButton').onclick = function() {
var imgUri = chart.getImageURI();
var hiddenElement = document.createElement('a');
hiddenElement.href = imgUri;
hiddenElement.target = '_blank';
hiddenElement.download = 'chart_image.png';
hiddenElement.click();
};
}
</script>
</head>
<body>
<h2>Google Chart with Export to Image</h2>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
<button id="exportImageButton">Export Chart to PNG</button>
</body>
</html>
কোড ব্যাখ্যা:
- getImageURI(): এই ফাংশনটি ব্যবহার করে, আমরা চার্টের Base64 encoded PNG image URI তৈরি করি।
- Download PNG:
aট্যাগ ব্যবহার করে চিত্রটি ডাউনলোড করা হয়।
৩. Chart Data Integration Techniques
Google Charts এর মাধ্যমে আপনি অন্য ডেটা সোর্স থেকে ডেটা গ্রহণ করে Chart Data Integration করতে পারেন। এটি ডেটা API, Google Sheets, MySQL Database, বা JSON ফাইল থেকে ডেটা লোড করে চার্টে প্রদর্শন করতে সহায়ক।
৩.১. Google Sheets Integration
Google Sheets থেকে ডেটা এনে আপনি চার্ট তৈরি করতে পারেন। Google Sheets API ব্যবহার করে এটি করা যায়। নিচে একটি উদাহরণ দেওয়া হলো যেখানে 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 Sheets Integration</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart', 'table']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var queryString = encodeURIComponent('SELECT A, B, C');
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.BarChart(document.getElementById('chart_div'));
chart.draw(data, {title: 'Google Sheets Data'});
}
</script>
</head>
<body>
<h2>Google Charts with Google Sheets Data</h2>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
কোড ব্যাখ্যা:
- Google Sheets API: Google Sheets থেকে ডেটা কোয়েরি করার জন্য
google.visualization.Queryব্যবহার করা হয়েছে। - Query Parameters: ডেটার জন্য SQL-এর মত কোয়েরি ব্যবহার করা হয়েছে (যেমন
SELECT A, B, C), যেখানে আপনি আপনার স্প্রেডশিটের কলাম থেকে ডেটা নিয়ে আসতে পারেন।
উপসংহার
Chart Data Export এবং Integration প্রযুক্তি Google Charts ব্যবহার করে শক্তিশালী ডেটা ভিজ্যুয়ালাইজেশন টুল তৈরি করতে সহায়ক। আপনি CSV, PNG, বা Excel ফাইলের মাধ্যমে ডেটা এক্সপোর্ট করতে পারেন, এবং Google Sheets, JSON, বা Database থেকে ডেটা ইন্টিগ্রেট করতে পারেন। এই কৌশলগুলি ব্যবহার করে আপনি আপনার ডেটার বিশ্লেষণ এবং উপস্থাপন আরও সহজ এবং কার্যকরী করতে পারেন।
Read more
