Gauge Chart একটি বিশেষ ধরনের চার্ট যা কোনো একক পরিমাপের মান বা পারফরম্যান্স প্রদর্শন করতে ব্যবহৃত হয়। এটি সাধারণত কোনো সিস্টেমের কর্মক্ষমতা, ডিভাইসের স্ট্যাটাস, প্রোগ্রামটির অগ্রগতি বা অন্যান্য সিংল ভ্যালু মেট্রিক্স দেখানোর জন্য উপযুক্ত। Google Charts এর মাধ্যমে Gauge Chart তৈরি করা সহজ এবং এটি বিভিন্ন ধরনের ডেটা উপস্থাপনে সাহায্য করে।
১. Google Charts দিয়ে Gauge Chart তৈরি করা
Google Charts লাইব্রেরি ব্যবহার করে Gauge Chart তৈরি করতে, আপনাকে corechart প্যাকেজ লোড করতে হবে এবং তারপরে Gauge 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 Gauge Chart Example</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', 'gauge']});
// কলব্যাক ফাংশন
google.charts.setOnLoadCallback(drawChart);
// Gauge Chart তৈরি করার ফাংশন
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Performance', 70] // এখানে 70% পারফরম্যান্স সেট করা হয়েছে
]);
var options = {
width: 400, height: 120,
redFrom: 0, redTo: 30, // Red zone between 0-30
yellowFrom: 30, yellowTo: 60, // Yellow zone between 30-60
greenFrom: 60, greenTo: 100, // Green zone between 60-100
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>
কোড ব্যাখ্যা
- Google Charts লাইব্রেরি লোড করা:
google.charts.load('current', {packages: ['corechart', 'gauge']});লাইনে corechart এবং gauge প্যাকেজ লোড করা হয়েছে, যেটি Gauge Chart তৈরি করতে সহায়ক। ডেটা প্রস্তুত করা:
google.visualization.arrayToDataTable()ফাংশন দিয়ে আমরা Gauge Chart এর জন্য ডেটা প্রস্তুত করেছি, যেখানে Performance নামক একটি মেট্রিকের মান 70% দেয়া হয়েছে।var data = google.visualization.arrayToDataTable([ ['Label', 'Value'], ['Performance', 70] ]);- অপশন সেট করা:
- Width এবং Height: চার্টের আকার সেট করা হয়েছে।
- Red, Yellow, Green Zones:
redFrom,yellowFrom,greenFromঅপশন দিয়ে পারফরম্যান্সের রেঞ্জ সীমানা নির্ধারণ করা হয়েছে:- Red Zone: 0 থেকে 30% (নিম্ন পারফরম্যান্স)
- Yellow Zone: 30 থেকে 60% (মাঝারি পারফরম্যান্স)
- Green Zone: 60 থেকে 100% (উচ্চ পারফরম্যান্স)
- minorTicks: ছোট টিকমার্কের সংখ্যা নির্ধারণ করা হয়েছে (এখানে 5টি টিকমার্ক প্রদর্শিত হবে)।
- চার্ট তৈরি এবং প্রদর্শন:
google.visualization.Gauge()ফাংশন ব্যবহার করে Gauge Chart তৈরি করা হয় এবং এটি HTML ডকুমেন্টের একটি<div>এ প্রদর্শিত হয়।
২. Gauge Chart কাস্টমাইজেশন
Gauge Chart এ আপনি বিভিন্ন ধরনের কাস্টমাইজেশন করতে পারেন, যেমন:
১. রঙ পরিবর্তন:
আপনি red, yellow, এবং green জোনের রঙ পরিবর্তন করতে পারেন, যাতে এগুলো আপনার ডিজাইন বা থিমের সাথে মানানসই হয়। উদাহরণ:
greenColor: '#00FF00',
yellowColor: '#FFFF00',
redColor: '#FF0000',
২. ডেটার মান কাস্টমাইজেশন:
Gauge Chart-এ আপনি ডেটার মান আরও স্পষ্টভাবে প্রদর্শন করতে পারেন, যেমন সংখ্যার পরিবর্তে টেক্সট প্রদর্শন।
ticks: ['0%', '25%', '50%', '75%', '100%']
৩. অ্যাডিশনাল অপশন:
আপনি আরও নানা ধরনের অপশন ব্যবহার করতে পারেন যেমন:
- minorTicks: ছোট টিকের সংখ্যা বাড়ানো বা কমানো।
- label: লেবেল পরিবর্তন করা, যেমন 'Performance' পরিবর্তে অন্য কোনো টেক্সট।
৩. Gauge Chart এর ব্যবহারিক প্রয়োগ
- সিস্টেম পারফরম্যান্স ট্র্যাকিং: Gauge Chart ব্যবহার করে আপনি কোনো সিস্টেমের পারফরম্যান্স যেমন CPU বা RAM ব্যবহার ট্র্যাক করতে পারেন।
- বিক্রয় বা রাজস্ব ট্র্যাকিং: মাসিক বিক্রয়ের লক্ষ্যমাত্রা, উৎপাদন বা লাভের অগ্রগতি ট্র্যাক করতে গেজ চার্ট ব্যবহার করা যেতে পারে।
- অন্যান্য মেট্রিক্স ট্র্যাকিং: বিভিন্ন প্যারামিটার বা KPI (Key Performance Indicator) গেজ চার্টের মাধ্যমে প্রদর্শন করা যেতে পারে, যেমন গ্রাহক সেবা পরিসংখ্যান, প্রোজেক্টের অগ্রগতি ইত্যাদি।
উপসংহার
Google Gauge Chart একটি চমৎকার টুল যা কোনো সিস্টেম বা প্রক্রিয়ার পারফরম্যান্সের অবস্থা সহজে এবং দ্রুত দেখাতে সাহায্য করে। এটি ব্যবহার করা সহজ এবং কাস্টমাইজেশন অপশনের মাধ্যমে এটি আরও আকর্ষণীয় এবং কার্যকরী করা যেতে পারে। আপনি Google Gauge Chart ব্যবহার করে আপনার ওয়েবসাইট বা অ্যাপ্লিকেশনে পারফরম্যান্স বা অন্যান্য মেট্রিক্স প্রদর্শন করতে পারবেন।
Read more
