Google Charts ব্যবহার করে আপনি আপনার ডেটা ভিজ্যুয়ালাইজেশনে Print এবং Share অপশন যোগ করতে পারেন। এই দুটি ফিচার ব্যবহারকারীদের চার্টগুলি প্রিন্ট করতে বা শেয়ার করতে সহায়ক, যা বিশেষ করে ড্যাশবোর্ড বা রিপোর্টের জন্য অত্যন্ত কার্যকরী হতে পারে।
১. Print Option যোগ করা
Google Charts তে Print অপশন যোগ করা সম্ভব, যা ব্যবহারকারীকে চার্ট বা ডেটা প্রিন্ট করার সুযোগ দেয়। এটি সাধারণত একটি বাটনের মাধ্যমে কার্যকর করা হয়, যা চার্টের পাশে প্রদর্শিত হয় এবং ক্লিক করলে চার্টটি প্রিন্ট করার জন্য প্রম্পট দেখায়।
Print Option যোগ করার উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Charts Print Option</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'}
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
// Print functionality
document.getElementById('print_button').addEventListener('click', function() {
var chartImage = chart.getImageURI(); // Get chart image URL
var printWindow = window.open('', '', 'height=500, width=700');
printWindow.document.write('<img src="' + chartImage + '" />');
printWindow.document.close();
printWindow.print();
});
}
</script>
</head>
<body>
<h2>Google Chart with Print Option</h2>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
<button id="print_button">Print Chart</button>
</body>
</html>
কোড ব্যাখ্যা:
- Chart Rendering: প্রথমে আমরা একটি Bar Chart তৈরি করেছি এবং সেটি ব্যবহারকারীর স্ক্রিনে প্রদর্শন করেছি।
- Print Button:
print_buttonনামে একটি button তৈরি করা হয়েছে। এই বাটনে ক্লিক করলে chart এর একটি image URI (চিত্র URL) তৈরি হয় এবং একটি নতুন প্রিন্ট উইন্ডোতে সেই চিত্রটি প্রদর্শিত হয়। - window.print(): প্রিন্ট অপশনের মাধ্যমে ব্যবহারকারী চার্টটি প্রিন্ট করতে পারবেন।
২. Share Option যোগ করা
Share অপশন ব্যবহারকারীদের জন্য একটি চমৎকার ফিচার, যা তাদের Google Charts শেয়ার করতে সহায়ক। আপনি গুগল ড্রাইভ বা অন্য কোনো শেয়ারিং সিস্টেমের মাধ্যমে চার্টটি শেয়ার করতে পারেন। এই ফিচারটি বিশেষ করে আপনার রিপোর্ট বা ড্যাশবোর্ডের জন্য খুবই কার্যকরী।
Share Option যোগ করার উদাহরণ
Google Charts সরাসরি একটি শেয়ারিং ফিচার প্রদান না করলেও, আপনি Google Drive বা অন্যান্য প্ল্যাটফর্মের মাধ্যমে শেয়ার করার জন্য সহজে একটি URL শেয়ার করতে পারেন।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Charts Share Option</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'}
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
// Share functionality
document.getElementById('share_button').addEventListener('click', function() {
var chartImage = chart.getImageURI(); // Get chart image URL
var shareUrl = 'https://www.example.com/share?image=' + encodeURIComponent(chartImage);
window.open(shareUrl, '_blank'); // Open share link in new tab
});
}
</script>
</head>
<body>
<h2>Google Chart with Share Option</h2>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
<button id="share_button">Share Chart</button>
</body>
</html>
কোড ব্যাখ্যা:
- Share Button: এখানে একটি Share button তৈরি করা হয়েছে যা ব্যবহারকারীদের শেয়ার অপশন প্রদান করে।
- Share URL:
chart.getImageURI()ফাংশনের মাধ্যমে আমরা চিত্রের একটি URL তৈরি করেছি এবং সেই URL শেয়ার করার জন্য একটি লিংক তৈরি করেছি (এখানে 'https://www.example.com/share' ব্যবহার করা হয়েছে, যা আপনি আপনার শেয়ার সিস্টেমের জন্য কাস্টমাইজ করতে পারেন)। - Open Share Link:
window.open(shareUrl, '_blank')ব্যবহার করে শেয়ার লিংক একটি নতুন ট্যাবে খুলে দেওয়া হচ্ছে।
৩. Print এবং Share Options এর কাস্টমাইজেশন
- Print Button Styling: আপনি CSS ব্যবহার করে প্রিন্ট এবং শেয়ার বাটনের ডিজাইন কাস্টমাইজ করতে পারেন। উদাহরণস্বরূপ:
button {
background-color: #4CAF50;
color: white;
font-size: 16px;
padding: 10px 20px;
border: none;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
- Advanced Share Options: আপনি Google Drive বা Dropbox এর API ব্যবহার করে Share ফিচারটি আরও উন্নত করতে পারেন, যেমন সরাসরি ডেটা আপলোড বা লিঙ্ক শেয়ারিং।
উপসংহার
Print এবং Share অপশনগুলি Google Charts এ একটি চমৎকার ফিচার হিসেবে কাজ করে, যা ব্যবহারকারীদের তাদের চার্ট বা ডেটা সহজে শেয়ার এবং প্রিন্ট করার সুযোগ দেয়। আপনি আপনার চার্টের কার্যকারিতা বাড়ানোর জন্য এই অপশনগুলিকে কাস্টমাইজ করতে পারেন এবং এগুলোর মাধ্যমে ডেটার প্রবাহ বা বিশ্লেষণ অন্যদের কাছে খুব সহজে পৌঁছে দিতে পারেন।
Read more
