Custom Chart Templates তৈরি করা Google Charts ব্যবহারকারীদের জন্য একটি অত্যন্ত শক্তিশালী টুল, যা আপনি বিভিন্ন ধরনের ডেটা ভিজ্যুয়ালাইজেশন চাহিদা পূরণের জন্য কাস্টমাইজড চার্ট তৈরি করতে পারেন। আপনি চাইলে বিশেষ রঙ, ফন্ট, আকার, এবং স্টাইল ব্যবহার করে চার্টগুলোর লুক এবং অনুভূতি কাস্টমাইজ করতে পারবেন।
এখানে, আমরা দেখাবো কীভাবে Custom Chart Templates তৈরি করা যায় এবং কীভাবে বিভিন্ন ধরনের চার্ট কাস্টমাইজেশন করা যায়।
১. Custom Chart Templates এর উদ্দেশ্য
Custom Chart Templates তৈরি করার উদ্দেশ্য হলো নির্দিষ্ট ধরণের চার্টের জন্য সাধারণ কাঠামো তৈরি করা যা বার বার ব্যবহার করা যাবে। এর মাধ্যমে আপনি একাধিক প্রকল্পের জন্য একসাথে ডেটা ভিজ্যুয়ালাইজেশন এবং কাস্টম সেটিংস তৈরি করতে পারবেন, এবং পরবর্তী সময়ে শুধু ডেটা আপডেট করেই ব্যবহার করতে পারবেন।
এই প্রক্রিয়া আপনাকে কাজের গতি বৃদ্ধি করতে সাহায্য করবে এবং একই ধরনের চার্টগুলির জন্য পুনরায় কাস্টম সেটিংস ব্যবহার করতে পারবেন।
২. Custom Chart Templates তৈরি করার উদাহরণ
ধরা যাক, আমরা একটি Bar Chart এবং একটি Pie Chart তৈরি করতে চাই, যা নির্দিষ্ট রঙ এবং ফন্ট কাস্টমাইজেশন, টুলটিপস এবং লেবেল প্রদর্শন করবে। এই চার্টগুলির কাস্টমাইজেশন একবার তৈরি করার পর, পরবর্তী সময়ে আপনি সহজেই ডেটা পরিবর্তন করে একই টেমপ্লেট ব্যবহার করতে পারবেন।
কোড উদাহরণ: Custom Bar Chart Template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Bar Chart Template</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', 'bar']});
// কলব্যাক ফাংশন
google.charts.setOnLoadCallback(drawCustomBarChart);
// Custom Bar Chart Template তৈরি করার ফাংশন
function drawCustomBarChart() {
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,
textStyle: {color: 'blue', fontSize: 16}
},
vAxis: {
title: 'City',
textStyle: {color: 'green', fontSize: 14}
},
backgroundColor: '#f1f1f1', // চার্টের ব্যাকগ্রাউন্ড রঙ
colors: ['#4caf50', '#ff5722', '#2196f3'], // বার গুলোর রঙ কাস্টমাইজ করা
tooltip: {textStyle: {color: 'red'}}, // টুলটিপের টেক্সট রঙ
chartArea: {width: '80%', height: '70%'}
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Custom Bar Chart Template</h2>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
কোড ব্যাখ্যা:
- Custom Chart Settings:
hAxis.textStyle: অনুভূমিক অক্ষের টেক্সটের ফন্ট সাইজ এবং রঙ কাস্টমাইজ করা হয়েছে।vAxis.textStyle: উল্লম্ব অক্ষের টেক্সটের ফন্ট সাইজ এবং রঙ কাস্টমাইজ করা হয়েছে।backgroundColor: চার্টের ব্যাকগ্রাউন্ডের রঙ সেট করা হয়েছে।colors: বারগুলির জন্য বিভিন্ন রঙ সেট করা হয়েছে।
- Tooltip Customization:
tooltip.textStyle.color: টুলটিপের টেক্সট রঙ কাস্টমাইজ করা হয়েছে।
- Chart Area:
chartAreaঅপশনে চার্টের আকার নির্ধারণ করা হয়েছে।
৩. Custom Pie Chart Template
এখন, আমরা একটি Pie Chart তৈরি করব এবং এর জন্য টেমপ্লেট তৈরি করব, যাতে একই ধরনের কাস্টম সেটিংস একাধিক প্রকল্পে ব্যবহার করা যায়।
কোড উদাহরণ: Custom Pie Chart Template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Pie Chart Template</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', 'pie']});
// কলব্যাক ফাংশন
google.charts.setOnLoadCallback(drawCustomPieChart);
// Custom Pie Chart Template তৈরি করার ফাংশন
function drawCustomPieChart() {
var data = google.visualization.arrayToDataTable([
['Category', 'Amount'],
['Food', 45],
['Rent', 25],
['Utilities', 15],
['Entertainment', 10],
['Others', 5]
]);
var options = {
title: 'Monthly Expenses Distribution',
slices: {
0: {offset: 0.1, color: '#FF0000'}, // Food স্লাইসের জন্য রঙ এবং প্রস্থ কাস্টমাইজ করা
1: {offset: 0.1, color: '#00FF00'}, // Rent স্লাইসের জন্য রঙ এবং প্রস্থ কাস্টমাইজ করা
2: {offset: 0.1, color: '#0000FF'} // Utilities স্লাইসের জন্য রঙ এবং প্রস্থ কাস্টমাইজ করা
},
chartArea: {width: '80%', height: '80%'},
tooltip: {textStyle: {color: 'blue'}}, // টুলটিপ টেক্সট রঙ কাস্টমাইজ করা
is3D: true // 3D ইফেক্ট
};
var chart = new google.visualization.PieChart(document.getElementById('pie_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Custom Pie Chart Template</h2>
<div id="pie_chart" style="width: 900px; height: 500px;"></div>
</body>
</html>
কোড ব্যাখ্যা:
- Custom Pie Chart Settings:
- Slices Customization:
slicesঅপশন দিয়ে প্রতিটি স্লাইসের রঙ এবং প্রস্থ কাস্টমাইজ করা হয়েছে। - 3D Effect:
is3D: trueদিয়ে চার্টকে 3D হিসেবে প্রদর্শন করা হয়েছে। - Tooltip Customization: টুলটিপের টেক্সট রঙ নীল করা হয়েছে।
- Slices Customization:
- Chart Area:
chartAreaদিয়ে চার্টের সীমানা কাস্টমাইজ করা হয়েছে, যাতে চার্টের সীমানা এবং স্পেস ভালোভাবে দেখানো যায়।
৪. Custom Chart Templates তৈরি করার আরও কিছু কৌশল
গুগল চার্টে Custom Templates তৈরি করা অনেক সুবিধাজনক এবং এর মাধ্যমে আপনি একই ধরনের চার্ট পুনরায় ব্যবহার করতে পারবেন। এখানে কিছু অতিরিক্ত কাস্টমাইজেশন কৌশল দেয়া হচ্ছে:
১. কাস্টম টুলটিপ কন্টেন্ট (Custom Tooltip Content)
কাস্টম টুলটিপের মাধ্যমে আপনি চার্টের উপর মাউস হোভার করার সময় ব্যবহারকারীকে অতিরিক্ত কাস্টম তথ্য প্রদর্শন করতে পারেন, যা ডেটার সাথে সম্পর্কিত।
tooltip: {
trigger: 'selection', // সিলেক্ট করলে টুলটিপ প্রদর্শন হবে
isHtml: true, // কাস্টম HTML টুলটিপ ব্যবহার
textStyle: {
color: 'purple',
fontSize: 14
}
}
এই কোডের মাধ্যমে আপনি টুলটিপে HTML ব্যবহার করতে পারবেন এবং এতে টেক্সট স্টাইল কাস্টমাইজ করতে পারবেন।
২. স্টাইলড ডেটা লেবেল (Styled Data Labels)
ডেটা লেবেলগুলোকে আরও পরিষ্কার এবং সুন্দর করে উপস্থাপন করতে আপনি এগুলোর জন্য ফন্ট সাইজ, ফন্ট কালার, এবং ব্যাকগ্রাউন্ড কাস্টমাইজ করতে পারেন।
annotations: {
alwaysOutside: true, // লেবেল বাহিরে প্রদর্শিত হবে
textStyle: {
fontSize: 18, // ফন্ট সাইজ
color: '#4CAF50', // ফন্ট রঙ
bold: true // বোল্ড টেক্সট
}
}
৩. চার্টের রঙ কাস্টমাইজ করা (Custom Chart Colors)
চার্টের বিভিন্ন উপাদানের জন্য রঙ কাস্টমাইজ করতে আপনি colors অপশন ব্যবহার করতে পারেন। যেমন, বারের রঙ পরিবর্তন করা।
colors: ['#e60000', '#ff9900', '#66cc66', '#3366cc'], // বারের জন্য রঙ নির্ধারণ
৪. এনিমেশন কাস্টমাইজেশন (Animation Customization)
আপনি chart.draw() ফাংশন ব্যবহার করার সময় চার্টের এনিমেশন কাস্টমাইজ করতে পারেন। উদাহরণস্বরূপ, চার্টের রিফ্রেশ টাইম সেট করা।
animation: {
startup: true, // প্রথমবার চার্ট অ্যানিমেশন হবে
duration: 1000, // এক সেকেন্ডে অ্যানিমেশন সম্পন্ন হবে
easing: 'out' // অ্যানিমেশনটির শেষের দিকে ধীরে ধীরে হবে
}
৫. চার্টের আকার এবং স্টাইল (Chart Size and Style)
চার্টের আকার কাস্টমাইজ করার জন্য width এবং height নির্ধারণ করা হয়, পাশাপাশি গ্রিড লাইন এবং অক্ষের স্টাইলিংও কাস্টমাইজ করা যায়।
width: 800, // চার্টের প্রস্থ
height: 600, // চার্টের উচ্চতা
chartArea: {width: '80%', height: '70%'}, // চার্টের সীমানা নির্ধারণ
৫. Custom Chart Templates দিয়ে ফাংশনালিটি সম্প্রসারণ
আপনার কাস্টম টেমপ্লেটগুলি নির্দিষ্ট প্রয়োজনে তৈরি করতে হলে, আপনি JavaScript functions ব্যবহার করতে পারেন যা ব্যবহারকারীর ইন্টারঅ্যাকশনের ভিত্তিতে ডেটা পরিবর্তন বা চার্ট আপডেট করবে।
১. ডেটা পরিবর্তন এবং রিফ্রেশ (Dynamic Data Update)
আপনি setInterval() বা setTimeout() ব্যবহার করে ডেটা রিফ্রেশ বা আপডেট করতে পারেন। এটি রিয়েল-টাইম ডেটা প্রদর্শনের জন্য খুবই কার্যকর।
function updateChartData() {
// ডেটার নতুন মান পাওয়ার পর চার্ট রিফ্রেশ
var updatedData = google.visualization.arrayToDataTable([
['City', 'Population'],
['New York', Math.random() * 10000],
['Los Angeles', Math.random() * 10000]
]);
chart.draw(updatedData, options); // নতুন ডেটা দিয়ে চার্ট আঁকুন
}
// প্রতি ৫ সেকেন্ড পর পর ডেটা আপডেট করুন
setInterval(updateChartData, 5000);
২. ইভেন্টস এবং ইন্টারঅ্যাকশন (Events and Interactions)
আপনি Click, Hover, বা Selection ইভেন্টগুলো ব্যবহার করে চার্টে ব্যবহারকারী ইন্টারঅ্যাকশনের জন্য কাস্টম ফাংশন তৈরি করতে পারেন।
google.visualization.events.addListener(chart, 'select', function() {
var selection = chart.getSelection();
var selectedItem = selection[0];
alert('You clicked on ' + data.getValue(selectedItem.row, 0));
});
উপসংহার
Custom Chart Templates তৈরি করে আপনি দ্রুত এবং কার্যকরভাবে বিভিন্ন ধরনের ডেটা ভিজ্যুয়ালাইজেশন তৈরি করতে পারেন। Google Charts এর মাধ্যমে আপনি প্রতিটি চার্টের জন্য customized settings যেমন রঙ, ফন্ট, টুলটিপ, ডেটা লেবেল, এবং ইভেন্টগুলি কাস্টমাইজ করতে পারেন। এই কাস্টমাইজেশনগুলো আপনার চার্টগুলিকে আরও কার্যকরী এবং ব্যবহারকারী বান্ধব করে তুলবে।
Read more
