TreeMap Chart একটি চমৎকার ডেটা ভিজ্যুয়ালাইজেশন টুল যা হায়ারার্কিকাল ডেটাকে প্রদর্শন করতে ব্যবহৃত হয়। এটি বিশেষভাবে ক্যাটেগরি এবং সাব-ক্যাটেগরির মধ্যে সম্পর্ক বোঝানোর জন্য আদর্শ, যেখানে প্রতিটি রেকর্ড বা ডেটা পয়েন্ট একটি রঙ এবং আকার দ্বারা প্রতিনিধিত্ব করা হয়। Google Charts এর মাধ্যমে TreeMap তৈরি করা সহজ এবং এতে আপনি বিভিন্ন কাস্টমাইজেশন এবং রঙের পরিবর্তন করতে পারেন।
এখানে, আমরা TreeMap Chart এর কাস্টমাইজেশন এবং Color Ranges পরিবর্তন করার প্রক্রিয়া দেখাবো।
১. Google TreeMap Chart তৈরি করা
Google Charts এর TreeMap চার্ট তৈরি করতে, প্রথমে আপনাকে corechart এবং treemap প্যাকেজ লোড করতে হবে। এরপর, ডেটা তৈরি করে এবং কাস্টম অপশন ব্যবহার করে চার্ট তৈরি করা যায়।
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 TreeMap 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', 'treemap']});
// কলব্যাক ফাংশন
google.charts.setOnLoadCallback(drawChart);
// TreeMap Chart তৈরি করার ফাংশন
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Category');
data.addColumn('string', 'Parent');
data.addColumn('number', 'Market Share');
// ডেটা যোগ করা
data.addRows([
['A', null, 1000],
['B', 'A', 300],
['C', 'A', 500],
['D', 'A', 200],
['E', 'B', 100],
['F', 'B', 200],
['G', 'C', 300],
['H', 'C', 200]
]);
var options = {
minColor: '#f00', // লাল রঙ
midColor: '#ff9900', // কমলা রঙ
maxColor: '#0d0', // সবুজ রঙ
headerHeight: 15,
showScale: true, // রঙের স্কেল দেখানো
fontColor: 'black', // ফন্টের রঙ
fontSize: 12, // ফন্টের আকার
};
var chart = new google.visualization.TreeMap(document.getElementById('tree_map'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Google TreeMap Chart Example</h2>
<div id="tree_map" style="width: 900px; height: 500px;"></div>
</body>
</html>
কোড ব্যাখ্যা
Google Charts লাইব্রেরি লোড করা: প্রথমে আমরা corechart এবং treemap প্যাকেজ লোড করেছি, যা TreeMap Chart তৈরি করতে সাহায্য করবে।
google.charts.load('current', {packages: ['corechart', 'treemap']});ডেটা প্রস্তুত করা: আমরা DataTable ব্যবহার করে ডেটা তৈরি করেছি, যেখানে:
- Category: ক্যাটেগরি বা সাব-ক্যাটেগরি
- Parent: কোন ক্যাটেগরির মধ্যে এটি পড়ে
- Market Share: মার্কেট শেয়ার বা টাস্কের ভ্যালু
data.addColumn('string', 'Category'); data.addColumn('string', 'Parent'); data.addColumn('number', 'Market Share');- ডেটা যোগ করা:
data.addRows()দিয়ে আমরা ডেটা যোগ করেছি, যেখানে প্রতিটি রেকর্ড বা ডেটা পয়েন্ট একটি ক্যাটেগরি এবং তার প্যারেন্ট ক্যাটেগরির সাথে যুক্ত থাকে। - কাস্টম অপশন সেট করা:
minColor,midColor,maxColor: এটি TreeMap Chart এর রঙের পরিসীমা (color range) নির্ধারণ করে।headerHeight: হেডারের উচ্চতা সেট করা।showScale: রঙের স্কেল দেখানোর জন্যtrueসেট করা।fontColorএবংfontSize: ফন্টের রঙ এবং আকার কাস্টমাইজ করা।
২. TreeMap Chart এর Color Ranges কাস্টমাইজেশন
TreeMap Chart এ রঙের পরিসীমা কাস্টমাইজ করা যায় যাতে ডেটার পার্থক্য আরও স্পষ্টভাবে বোঝানো যায়। নিচে কয়েকটি Color Ranges কাস্টমাইজেশনের উদাহরণ দেওয়া হলো:
উদাহরণ ১: Ranges with Red, Yellow, and Green
var options = {
minColor: '#FF0000', // লাল রঙ (কম মান)
midColor: '#FFFF00', // হলুদ রঙ (মাঝারি মান)
maxColor: '#00FF00', // সবুজ রঙ (বেশি মান)
headerHeight: 15,
showScale: true
};
এখানে, কম মানের জন্য লাল, মাঝারি মানের জন্য হলুদ, এবং বেশি মানের জন্য সবুজ রঙ ব্যবহার করা হয়েছে।
উদাহরণ ২: Gradual Color Range from Light to Dark Blue
var options = {
minColor: '#a0c8f0', // হালকা নীল রঙ
midColor: '#4786c6', // মাঝারি নীল রঙ
maxColor: '#00529b', // গা dark ় নীল রঙ
headerHeight: 15,
showScale: true
};
এখানে light blue থেকে dark blue এর মধ্যে রঙের গ্র্যাডিয়েন্ট তৈরি করা হয়েছে, যা ডেটার মান অনুযায়ী পরিবর্তিত হবে।
৩. TreeMap Chart কাস্টমাইজেশন এবং রঙের স্কেল
TreeMap Chart এর কাস্টমাইজেশন এবং রঙের স্কেল ব্যবহার করে আপনি ডেটার সম্পর্ক এবং মানের ভিত্তিতে চার্টের ভিজ্যুয়াল উপস্থাপনাকে আরও শক্তিশালী এবং স্পষ্ট করতে পারেন। Google Charts এ অনেক ধরণের কাস্টমাইজেশন অপশন রয়েছে, যেমন:
- Font Style:
fontName,fontSize,fontColor - Borders: বিভিন্ন স্লাইসের জন্য বর্ডার সেট করা
- Tooltip: কাস্টম টুলটিপ প্রদর্শন করা, যাতে নির্দিষ্ট তথ্য দেখানো যায় যখন ব্যবহারকারী একটি স্লাইসে hover করবে।
উপসংহার
Google TreeMap Chart ডেটার হায়ারার্কিকাল সম্পর্ক দেখানোর জন্য একটি শক্তিশালী এবং কার্যকরী টুল। এটি প্রকল্প, ফাইন্যান্স, সেলস ডেটা বা অন্যান্য বিভাগের বিশ্লেষণে ব্যবহার করা যেতে পারে। কাস্টম রঙের পরিসীমা এবং অন্যান্য কাস্টমাইজেশন অপশন দিয়ে আপনি TreeMap Chart কে আরও সঠিক এবং আকর্ষণীয়ভাবে উপস্থাপন করতে পারবেন। Google Charts এর TreeMap দিয়ে আপনি সহজেই ডেটা ক্যাটেগরি এবং সাব-ক্যাটেগরির পার্থক্য দেখাতে পারবেন এবং ডেটার অগ্রগতি বা পারফরম্যান্স ট্র্যাক করতে পারবেন।
Read more
