Gauge Chart একটি শক্তিশালী ভিজ্যুয়াল টুল যা একটি নির্দিষ্ট মান বা পরিসরের মধ্যে ডেটা রিডিং বা অগ্রগতির সঙ্গতি দেখাতে ব্যবহৃত হয়। এটি সাধারণত একটি ড্যাশবোর্ড বা প্রগতি ট্র্যাকার হিসেবে ব্যবহৃত হয়, যেখানে একটি গেজ বা মিটার দেখানো হয়, যেমন তাপমাত্রা, স্পিড, অগ্রগতি ট্র্যাকিং ইত্যাদি।
গুগল চার্টে Gauge Chart তৈরি করতে, আপনি বিভিন্ন data ranges এবং customization অপশন ব্যবহার করতে পারেন, যেমন রঙের স্কেল, রেঞ্জ ডিফাইন করা, লাইনের স্টাইল ইত্যাদি।
১. Gauge Chart তৈরি করা
নিচে একটি Gauge Chart তৈরি করার উদাহরণ দেওয়া হলো, যেখানে একটি প্রগতি সূচক (progress indicator) দেখানো হয়েছে:
কোড উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Gauge Chart Example</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['gauge']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Memory', 80],
]);
var options = {
width: 400, height: 120,
redFrom: 90, redTo: 100,
yellowFrom: 75, yellowTo: 90,
greenFrom: 0, greenTo: 75,
minorTicks: 5
};
var chart = new google.visualization.Gauge(document.getElementById('gauge_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Google Gauge Chart Example</h2>
<div id="gauge_chart" style="width: 400px; height: 120px;"></div>
</body>
</html>
কোড ব্যাখ্যা:
- Gauge Chart লোড করা:
google.charts.load('current', {packages: ['gauge']});দ্বারা gauge প্যাকেজ লোড করা হচ্ছে, যা গেজ চার্ট তৈরি করতে ব্যবহৃত হয়।
- ডেটা তৈরি করা:
google.visualization.arrayToDataTable()ফাংশনের মাধ্যমে Memory রিডিং মান ৮০ দিয়ে ডেটা তৈরি করা হয়েছে।
- কাস্টমাইজেশন (Customization):
redFrom,redTo,yellowFrom,yellowTo,greenFrom, এবংgreenTo: এখানে আমরা গেজ চার্টের রেঞ্জ কাস্টমাইজ করেছি। যেমন:- Red রেঞ্জ: 90 থেকে 100 পর্যন্ত (উচ্চ মানের জন্য)
- Yellow রেঞ্জ: 75 থেকে 90 পর্যন্ত
- Green রেঞ্জ: 0 থেকে 75 পর্যন্ত (নিরাপদ রেঞ্জ)
minorTicks: এটি গেজের মধ্যে ছোট টিক মার্কস তৈরি করে, যার মাধ্যমে ভ্যালু আরও স্পষ্টভাবে বুঝা যায়।
- গেজ চার্ট তৈরি করা:
google.visualization.Gauge()ফাংশন ব্যবহার করে গেজ চার্ট তৈরি করা হয়েছে এবং এটি HTML ডকুমেন্টে প্রদর্শিত হচ্ছে।
২. Gauge Chart এর জন্য Data Ranges এবং Customization
Gauge Chart এর জন্য ডেটার রেঞ্জ কাস্টমাইজ করা এবং ভিজ্যুয়াল স্টাইলিং খুবই গুরুত্বপূর্ণ, কারণ এটি পরিসরের পরিবর্তন এবং অগ্রগতির ট্র্যাকিং দেখাতে সাহায্য করে। এখানে বিভিন্ন কাস্টমাইজেশন অপশন রয়েছে যা আপনি ব্যবহার করতে পারেন।
২.১ Data Ranges
- Red, Yellow, Green Ranges: গেজে বিভিন্ন রঙের জন্য রেঞ্জ নির্ধারণ করা হয়, যা একটি বিশ্লেষণাত্মক দৃষ্টিকোণ দেয়।
redFromandredTo: উচ্চ মানের জন্য (দ্বিগুণ রেড রেঞ্জ)yellowFromandyellowTo: সতর্কতা বা সাবধানতার জন্য (কম yellow রেঞ্জ)greenFromandgreenTo: নিরাপদ মান (green রেঞ্জ)
২.২ Major and Minor Ticks
majorTicks: এই অপশনটি ব্যবহার করে আপনি গেজের মধ্যে বড় টিক মার্কসের সংখ্যা কাস্টমাইজ করতে পারেন। উদাহরণস্বরূপ, 0 থেকে 100 পর্যন্ত গেজ হলে বড় বড় টিক মার্কসের সংখ্যা 5 হতে পারে।minorTicks: ছোট ছোট টিক মার্কসের জন্য এই অপশনটি ব্যবহার করা হয়। এটি গেজে টিক মার্কসের ঘনত্ব বা স্পষ্টতা বাড়ায়।
২.৩ Chart Size and Shape
widthandheight: গেজ চার্টের আকার কাস্টমাইজ করার জন্য এই অপশনগুলি ব্যবহার করা হয়।
২.৪ Font Color and Size
গেজ চার্টে টেক্সট বা ভ্যালুর ফন্ট সাইজ এবং ফন্ট কালার কাস্টমাইজ করা যায়, যাতে আরো স্পষ্টভাবে ভ্যালু প্রদর্শিত হয়।
৩. আরও কিছু কাস্টমাইজেশন
৩.১ গেজের টেক্সট এবং লেবেল কাস্টমাইজ করা:
var options = {
width: 400,
height: 120,
redFrom: 90,
redTo: 100,
yellowFrom: 75,
yellowTo: 90,
greenFrom: 0,
greenTo: 75,
minorTicks: 5,
majorTicks: ['0', '25', '50', '75', '100'], // Major ticks for gauge values
max: 100, // Maximum value of the gauge
min: 0 // Minimum value of the gauge
};
৩.২ Dynamic Data Update:
গেজের মান ডাইনামিকভাবে আপডেট করতে আপনি JavaScript দিয়ে ফাংশন লিখতে পারেন। উদাহরণস্বরূপ:
function updateGauge(newValue) {
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Memory', newValue],
]);
chart.draw(data, options);
}
উপসংহার
Gauge Chart একটি অত্যন্ত শক্তিশালী টুল যা বিভিন্ন ধরণের ডেটা পরিসরের ভিত্তিতে প্রগতি বা মান প্রদর্শন করতে সহায়ক। এটি বিশেষত ড্যাশবোর্ড, প্রজেক্ট ম্যানেজমেন্ট, বা রিয়েল-টাইম ট্র্যাকিং সিস্টেমে ব্যবহৃত হয়। Google Charts এ Gauge Chart এর জন্য ডেটা রেঞ্জ এবং কাস্টমাইজেশন অপশনগুলি সহজে আপনার চাহিদা অনুযায়ী কাস্টমাইজ করা সম্ভব।
Read more
