রাডার চার্ট (Radar Chart), যা কখনও কখনও স্পাইডার চার্ট বা প্লেট চার্ট হিসাবেও পরিচিত, একটি বিশেষ ধরনের চার্ট যা একাধিক ভেরিয়েবলের তুলনা এবং বিশ্লেষণ করতে সহায়ক। এটি কেন্দ্র থেকে এক্স-অক্ষ এবং ওয়াই-অক্ষের মধ্যে আচ্ছাদিত একটি রেডিয়াল আকারে ডেটা প্রদর্শন করে। রাডার চার্টে ডেটার মধ্যে সম্পর্ক বা পার্থক্য দেখানোর জন্য বিশেষভাবে উপযুক্ত।
রাডার চার্ট সাধারণত ব্যবহৃত হয়:
- বিভিন্ন বিভাগের তুলনা বা পারফরম্যান্স বিশ্লেষণ।
- একাধিক ভেরিয়েবলের উপর ভিত্তি করে গ্রাফ প্রদর্শন।
- স্কোর বা পারফরম্যান্সের তুলনা করা।
রাডার চার্ট তৈরি করার জন্য Chart.js কনফিগারেশন
রাডার চার্ট তৈরি করতে, প্রথমে type: 'radar' ব্যবহার করে Chart.js এর কনফিগারেশন করতে হবে। নিচে একটি রাডার চার্টের বেসিক কনফিগারেশন উদাহরণ দেওয়া হলো।
উদাহরণ: রাডার চার্ট (Radar Chart)
// Get the context of the canvas element
const ctx = document.getElementById('myRadarChart').getContext('2d');
// Create the radar chart
const radarChart = new Chart(ctx, {
type: 'radar', // Chart type: Radar
data: {
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding'], // Axis labels
datasets: [{
label: 'Activity', // Dataset label
data: [20, 30, 40, 50, 60], // Data points for each axis
borderColor: 'rgba(255, 99, 132, 1)', // Border color
borderWidth: 2, // Border width
backgroundColor: 'rgba(255, 99, 132, 0.2)', // Background color
fill: true // Whether to fill the area inside the radar chart
}]
},
options: {
responsive: true, // Make the chart responsive
scales: {
r: {
angleLines: {
display: true, // Display lines for each axis
},
suggestedMin: 0, // Minimum value suggested for the chart
suggestedMax: 100 // Maximum value suggested for the chart
}
}
}
});
রাডার চার্ট কনফিগারেশন ব্যাখ্যা:
type: 'radar': এটি নির্দেশ করে যে, চার্টটি একটি রাডার চার্ট হবে।labels: এই অ্যারে এক্স-অক্ষের লেবেল (যেমন "Eating", "Drinking", ইত্যাদি) নির্ধারণ করে। এগুলি রাডারের বিভিন্ন অক্ষ হিসেবে প্রদর্শিত হবে।datasets: এটি ডেটাসেটের অ্যারে, যেখানে প্রতিটি ডেটাসেটের জন্য ডেটা পয়েন্ট এবং কনফিগারেশন নির্ধারণ করা হয়।data: এই অ্যারে ডেটা পয়েন্টের মান। প্রতিটি মান একটি রাডার অক্ষের জন্য নির্ধারণ করা হবে।borderColor: ডেটাসেটের বর্ডার রং নির্ধারণ করে।backgroundColor: রাডার চার্টের ভিতরের রং নির্ধারণ করে (অর্থাৎ ডেটা পয়েন্টের ভেতরের অংশ)।fill: এটি true হলে, রাডারের মধ্যে পূর্ণতা থাকবে এবং ডেটা পয়েন্টগুলির মধ্যবর্তী অঞ্চলটি পূর্ণ হবে।
options:responsive: এটি চার্টকে রেসপন্সিভ করে তোলে, অর্থাৎ এটি স্ক্রিনের আকার অনুযায়ী স্বয়ংক্রিয়ভাবে মানিয়ে যাবে।scales:r: রাডার চার্টের জন্য স্কেল কনফিগারেশন।angleLines.display: এটি রাডারের প্রতিটি অক্ষের জন্য লাইন প্রদর্শন করবে।suggestedMinওsuggestedMax: রাডারের স্কেল অনুযায়ী সর্বনিম্ন এবং সর্বোচ্চ মান নির্ধারণ করে।
রাডার চার্ট কাস্টমাইজেশন
আপনি রাডার চার্টের বেশ কিছু কাস্টমাইজেশন করতে পারেন, যেমন:
- অ্যাক্সেসের নাম পরিবর্তন (Axis Labels)।
- রঙ পরিবর্তন (Background Color, Border Color)।
- অ্যানিমেশন (Animation)।
উদাহরণস্বরূপ, রাডার চার্টে আপনি বিভিন্ন ডেটাসেট যুক্ত করতে পারেন বা একাধিক সিরিজের তুলনা করতে পারেন।
একাধিক ডেটাসেটের রাডার চার্ট:
const multiRadarChart = new Chart(ctx, {
type: 'radar',
data: {
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding'],
datasets: [
{
label: 'Dataset 1',
data: [20, 30, 40, 50, 60],
borderColor: 'rgba(255, 99, 132, 1)',
backgroundColor: 'rgba(255, 99, 132, 0.2)',
fill: true
},
{
label: 'Dataset 2',
data: [30, 40, 50, 60, 70],
borderColor: 'rgba(54, 162, 235, 1)',
backgroundColor: 'rgba(54, 162, 235, 0.2)',
fill: true
}
]
},
options: {
responsive: true,
scales: {
r: {
angleLines: {
display: true
},
suggestedMin: 0,
suggestedMax: 100
}
}
}
});
এখানে দুটি আলাদা ডেটাসেট ব্যবহার করা হয়েছে, যেগুলোর প্রতিটির জন্য ভিন্ন রং এবং ডেটা পয়েন্ট রয়েছে।
সারাংশ
রাডার চার্ট (Radar Chart) ডেটার বিভিন্ন ভেরিয়েবলের মধ্যে সম্পর্ক এবং পার্থক্য দেখতে ব্যবহার করা হয়। এটি চার্টের বিভিন্ন অক্ষ (Axis) থেকে রেডিয়াল আকারে ডেটা পয়েন্ট গুলি প্রদর্শন করে। Chart.js এ রাডার চার্ট তৈরি করা সহজ এবং কাস্টমাইজযোগ্য, যা ডেটা ভিজ্যুয়ালাইজেশনে অত্যন্ত কার্যকরী।
Chart.js Polar Coordinate System ব্যবহার করে এমন চার্ট তৈরি করতে সহায়ক, যা সাধারণত একাধিক ভেরিয়েবল বা বিভাগের মধ্যে সম্পর্ক এবং পরিমাণ প্রদর্শনের জন্য ব্যবহৃত হয়। Polar Coordinate System চার্টগুলোর মধ্যে Polar Area Chart এবং Radar Chart দুটি প্রধান চার্ট টাইপ। এই ধরনের চার্টগুলো বিশেষত ত্রিমাত্রিক ডেটা বিশ্লেষণ এবং তুলনা করার জন্য উপযুক্ত।
Polar Coordinate System কি?
Polar Coordinate System একটি ভিন্ন ধরণের কোঅর্ডিনেট সিস্টেম যা ডেটাকে একটি কেন্দ্রীয় পয়েন্ট থেকে রেডিয়াল ভাবে রেন্ডার করে। এটি সাধারণত রেডিয়াস (বুদবুদ বা সেগমেন্টের আকার নির্ধারণকারী মান) এবং অ্যাঙ্গেল (একটি বৃত্তের মধ্যে এক্স-অক্ষ বা ওয়াই-অক্ষের সাথে কোণ) দ্বারা পরিচালিত হয়।
Chart.js এ Polar Area Chart এবং Radar Chart Polar Coordinate System ব্যবহার করে ডেটা প্রদর্শন করা হয়।
Polar Area Chart
Polar Area Chart Polar Coordinate System ব্যবহার করে ডেটাকে আকার এবং পরিমাণ অনুযায়ী সেগমেন্টে ভাগ করে প্রদর্শন করে। এটি সাধারণত এমন ডেটা দেখানোর জন্য ব্যবহৃত হয় যেখানে একাধিক বিভাগ বা ভিন্ন ভিন্ন সিরিজের মধ্যে তুলনা করতে হয়।
উদাহরণ: Polar Area Chart
const ctx = document.getElementById('myPolarChart').getContext('2d');
const myPolarChart = new Chart(ctx, {
type: 'polarArea', // Polar Area Chart type
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple'], // Labels for each section
datasets: [{
label: 'Vote Distribution',
data: [12, 19, 3, 5, 2], // Data for each section
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)'
],
borderWidth: 1
}]
},
options: {
responsive: true, // Make the chart responsive
scales: {
r: {
beginAtZero: true, // Start the radius from zero
}
}
}
});
type: 'polarArea': এখানে Polar Area Chart টাইপ ব্যবহার করা হয়েছে।labels: এক্স-অক্ষের লেবেলগুলোর জন্য ডেটা (যেমন 'Red', 'Blue', 'Yellow', ইত্যাদি)।datasets: এখানে ডেটা পয়েন্ট এবং সেগমেন্টের জন্য রঙ নির্ধারণ করা হয়েছে।backgroundColor: প্রতিটি সেগমেন্টের জন্য রঙ নির্ধারণ করা হয়।borderColor: সেগমেন্টের বর্ডার রঙ।r(Radius): স্কেল যেটি রেডিয়াস বা সেগমেন্টের আকার নির্ধারণ করে। এটিbeginAtZero: trueদিয়ে নিশ্চিত করা হয়েছে যে, রেডিয়াস শূন্য থেকে শুরু হবে।
Radar Chart
Radar Chart (বা Web Chart) একটি চতুর্ভুজ রিডিয়াল চার্ট, যেখানে একাধিক ডেটাসেটকে প্রতিটি সেগমেন্টে প্লট করা হয়। এটি সাধারণত একাধিক ভেরিয়েবলের তুলনা করতে ব্যবহৃত হয়।
উদাহরণ: Radar Chart
const radarCtx = document.getElementById('myRadarChart').getContext('2d');
const myRadarChart = new Chart(radarCtx, {
type: 'radar', // Radar Chart type
data: {
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding'], // Labels for each axis
datasets: [{
label: 'Activity Distribution',
data: [10, 20, 30, 40, 50], // Data for each category
fill: true, // Fill the area inside the chart
backgroundColor: 'rgba(255, 99, 132, 0.2)', // Background color of the area
borderColor: 'rgba(255, 99, 132, 1)', // Border color
borderWidth: 1 // Border width
}]
},
options: {
responsive: true, // Make the chart responsive
scales: {
r: {
beginAtZero: true, // Start the radial scale from zero
}
}
}
});
type: 'radar': এখানে Radar Chart টাইপ ব্যবহার করা হয়েছে।labels: এক্স-অক্ষের লেবেল (এটি সেগমেন্টের শিরোনাম হিসেবে কাজ করে)।datasets: একাধিক ডেটা সিরিজের জন্য ডেটা এবং স্টাইল কনফিগারেশন।backgroundColor: গ্রাফের ভিতরের রঙ।fill: true: এটি চার্টের ভিতরের এলাকা পূর্ণ করবে।borderColor: সেগমেন্টের সীমানার রঙ।r(Radius): রেডিয়াল স্কেল কনফিগারেশন।
Polar Coordinate System এর উপকারিতা
- বিভিন্ন ক্যাটাগরি বা সেগমেন্টের মধ্যে তুলনা: Polar Area Chart এবং Radar Chart ডেটার বিভিন্ন ভেরিয়েবল বা ক্যাটাগরির মধ্যে সম্পর্ক দেখাতে কার্যকরী।
- ডেটার আকার ও পরিমাণ প্রদর্শন: Polar Coordinate System ডেটার আকার এবং পরিমাণের একটি তুলনামূলক দৃশ্য প্রদান করে, যা সাধারণত চক্রাকার বা বৃত্তাকারভাবে প্রদর্শিত হয়।
- সহজ ভিজ্যুয়ালাইজেশন: এটি ডেটাকে খুব সহজ এবং কার্যকরভাবে উপস্থাপন করতে সহায়তা করে, বিশেষত যখন একাধিক ডেটাসেট বা ক্যাটাগরি থাকে।
সারাংশ
Chart.js এর Polar Coordinate System দুটি প্রধান চার্ট টাইপ—Polar Area Chart এবং Radar Chart—প্রদান করে, যা ডেটার ভিজ্যুয়ালাইজেশনকে আকর্ষণীয় এবং সহজ করে তোলে। Polar Area Chart একাধিক সেগমেন্টে ডেটা প্রদর্শন করে, যেখানে Radar Chart একাধিক ভেরিয়েবলের মধ্যে তুলনা করার জন্য ব্যবহৃত হয়। Polar Coordinate System-এর এই চার্টগুলি সাধারণত বিভিন্ন বিভাগ বা ভেরিয়েবলের মধ্যে সম্পর্ক এবং পরিমাণ প্রদর্শন করতে ব্যবহৃত হয়।
Radar Chart একটি বিশেষ ধরনের চার্ট যা বিভিন্ন ভেরিয়েবলের মধ্যে তুলনা করতে সাহায্য করে। এটি একটি কেন্দ্রীয় পয়েন্ট থেকে রেডিয়াল আকারে ডেটা প্রদর্শন করে। Chart.js এর মাধ্যমে Radar Chart কাস্টমাইজ করার জন্য আপনি স্টাইল এবং লেবেলস (Labels) কাস্টমাইজ করতে পারবেন। নিচে Radar Chart এর স্টাইলিং এবং লেবেল কাস্টমাইজ করার বিস্তারিত তথ্য দেয়া হলো।
Radar Chart তৈরি করা
প্রথমে একটি সাধারণ Radar Chart তৈরি করা যাক।
কোড উদাহরণ:
const ctx = document.getElementById('radarChart').getContext('2d');
const radarChart = new Chart(ctx, {
type: 'radar', // Chart type: Radar
data: {
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding'], // Labels for the radar
datasets: [{
label: 'Activity Level', // Label for the dataset
data: [20, 30, 40, 50, 60], // Data for each label
borderColor: 'rgba(75, 192, 192, 1)', // Border color
backgroundColor: 'rgba(75, 192, 192, 0.2)', // Background color
borderWidth: 2, // Border width
fill: true // Fill the area inside the radar chart
}]
},
options: {
scales: {
r: {
angleLines: {
display: true, // Display the angle lines
color: 'rgba(0, 0, 0, 0.1)' // Color of the angle lines
},
grid: {
color: 'rgba(0, 0, 0, 0.1)', // Color of the grid lines
},
ticks: {
display: true, // Display the ticks on the radar
stepSize: 10, // The distance between ticks
beginAtZero: true // Start the ticks at zero
}
}
},
plugins: {
legend: {
position: 'top', // Position of the legend
labels: {
font: {
size: 14 // Font size of the legend
}
}
},
tooltip: {
backgroundColor: 'rgba(0, 0, 0, 0.8)', // Background color of the tooltip
bodyFont: {
size: 14 // Font size of the tooltip body
}
}
}
}
});
Radar Chart এর Styling কাস্টমাইজ করা
Chart.js এর মাধ্যমে Radar Chart এর স্টাইলিং অনেক কিছু কাস্টমাইজ করা যায়। কিছু প্রধান স্টাইলিং অপশন নিচে দেওয়া হলো:
১. Grid Lines এবং Angle Lines কাস্টমাইজ করা
Grid Lines এবং Angle Lines চার্টের মধ্যে ডেটার লেবেল এবং পয়েন্টগুলির সাহায্যে সাহায্য করে। আপনি এগুলোর রঙ, দৃশ্যমানতা এবং স্টাইল পরিবর্তন করতে পারেন।
scales: {
r: {
angleLines: {
display: true, // Angle lines visible
color: 'rgba(0, 0, 0, 0.1)', // Color of the angle lines
lineWidth: 2 // Line width for the angle lines
},
grid: {
color: 'rgba(0, 0, 0, 0.1)', // Color of the grid lines
lineWidth: 1 // Line width for the grid lines
},
ticks: {
display: true, // Display ticks
stepSize: 10, // Space between each tick
beginAtZero: true // Start ticks at 0
}
}
}
২. Labels কাস্টমাইজ করা
আপনার Radar Chart এর labels (লেবেলস) কাস্টমাইজ করতে পারেন, যেমন তাদের রঙ, আকার এবং ফন্ট পরিবর্তন করা। font এবং color এর মাধ্যমে আপনি লেবেলের কাস্টমাইজেশন করতে পারবেন।
scales: {
r: {
ticks: {
font: {
size: 14, // Font size of the ticks
family: 'Arial', // Font family
weight: 'bold' // Font weight
},
color: 'rgba(0, 0, 0, 0.7)' // Tick label color
}
}
}
৩. Dataset এর Border এবং Fill কাস্টমাইজ করা
আপনার Radar Chart এর dataset এর সীমানা (border) এবং ভরাট (fill) রঙ কাস্টমাইজ করতে পারেন। এটি চার্টের দৃশ্যমানতাকে আরও আকর্ষণীয় করে তোলে।
datasets: [{
label: 'Activity Level',
data: [20, 30, 40, 50, 60],
borderColor: 'rgba(75, 192, 192, 1)', // Border color of the radar chart
backgroundColor: 'rgba(75, 192, 192, 0.2)', // Background color inside the radar chart
borderWidth: 2, // Border width
fill: true // Whether to fill the area inside the chart
}]
৪. Legend এবং Tooltip কাস্টমাইজ করা
Chart.js এ legend এবং tooltip কাস্টমাইজ করার জন্য আপনি plugins অপশন ব্যবহার করতে পারেন। এটি চার্টের ডেটা পয়েন্টের বর্ণনা এবং টুলটিপ স্টাইলিং নিয়ন্ত্রণ করে।
plugins: {
legend: {
position: 'top', // Legend position: 'top', 'bottom', 'left', 'right'
labels: {
font: {
size: 14, // Font size of the legend labels
family: 'Verdana' // Font family of the legend
},
color: 'rgba(0, 0, 0, 0.8)' // Legend label color
}
},
tooltip: {
backgroundColor: 'rgba(0, 0, 0, 0.8)', // Tooltip background color
bodyFont: {
size: 14, // Tooltip body font size
family: 'Arial' // Tooltip font family
},
bodyColor: '#fff' // Tooltip body text color
}
}
সারাংশ
Chart.js এর Radar Chart কাস্টমাইজ করা খুবই সহজ এবং এটি বিভিন্ন ধরনের স্টাইলিং অপশন প্রদান করে। আপনি Grid lines, Angle lines, Labels, Dataset border, Tooltip এবং Legend এর রং, আকার, অবস্থান ইত্যাদি কাস্টমাইজ করে আপনার চার্টটি সুন্দর এবং কার্যকরী করে তুলতে পারেন। কাস্টমাইজেশন এর মাধ্যমে আপনি আপনার ডেটা আরও আকর্ষণীয় এবং পরিষ্কারভাবে উপস্থাপন করতে পারবেন।
