Chart.js একটি জনপ্রিয় জাভাস্ক্রিপ্ট লাইব্রেরি যা ডেটা ভিজ্যুয়ালাইজেশন এর জন্য ব্যবহৃত হয়। এর মাধ্যমে আপনি বিভিন্ন ধরনের চার্ট তৈরি করতে পারেন। লাইন চার্ট (Line Chart) হল এমন একটি চার্ট যা সময়ের সাথে ডেটার পরিবর্তন প্রদর্শন করতে ব্যবহৃত হয়, এবং এটি ট্রেন্ড বা প্যাটার্নের বিশ্লেষণে খুব কার্যকর।
লাইন চার্ট (Line Chart) কী?
লাইন চার্ট একটি গ্রাফিকাল উপস্থাপনা যা পয়েন্টগুলির মধ্যে একটি লাইন তৈরি করে, যাতে সময়ভিত্তিক বা ধারাবাহিক ডেটার প্রবণতা দেখা যায়। এটি বিশেষভাবে সময়ের সাথে পরিবর্তিত ডেটা প্রদর্শনে ব্যবহৃত হয়, যেমন শেয়ার বাজারের দাম, তাপমাত্রা পরিবর্তন, বিক্রয় ট্রেন্ড ইত্যাদি।
লাইন চার্ট তৈরি করার ধাপসমূহ
Chart.js ব্যবহার করে লাইন চার্ট তৈরি করতে নিচের ধাপগুলো অনুসরণ করতে হবে:
১. HTML ফাইল তৈরি
প্রথমে একটি HTML ফাইল তৈরি করুন যেখানে চার্ট প্রদর্শিত হবে। এই ফাইলে একটি <canvas> ট্যাগ থাকতে হবে যেখানে চার্ট রেন্ডার হবে।
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Line Chart with Chart.js</title>
</head>
<body>
<h1>My Line Chart</h1>
<canvas id="myLineChart" width="400" height="200"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="script.js"></script>
</body>
</html>
এখানে আমরা <canvas> ট্যাগ ব্যবহার করেছি, যার মাধ্যমে Chart.js চার্ট রেন্ডার করবে।
২. JavaScript কোড লেখার জন্য script.js ফাইল তৈরি করা
এখন, আমাদের ডেটা এবং কনফিগারেশন সেট করতে হবে। লাইন চার্ট তৈরি করতে Chart.js এর Chart কনস্ট্রাকটর ব্যবহার করা হয়।
script.js:
// Canvas এলিমেন্টের context অ্যাক্সেস করা
const ctx = document.getElementById('myLineChart').getContext('2d');
// নতুন লাইন চার্ট তৈরি করা
const myLineChart = new Chart(ctx, {
type: 'line', // লাইন চার্ট টাইপ
data: {
labels: ['January', 'February', 'March', 'April', 'May'], // X-অক্ষের লেবেল
datasets: [{
label: 'Sales Over Time', // ডেটাসেটের লেবেল
data: [10, 20, 30, 40, 50], // Y-অক্ষের ডেটা পয়েন্ট
borderColor: 'rgba(75, 192, 192, 1)', // লাইন রং
borderWidth: 2, // লাইন প্রস্থ
fill: false, // লাইনটি ফিল করা হবে না
}]
},
options: {
responsive: true, // চার্ট রেসপন্সিভ হবে
scales: {
y: {
beginAtZero: true // Y-অক্ষ শূন্য থেকে শুরু হবে
}
}
}
});
এখানে আমরা লাইন চার্ট তৈরি করেছি এবং তার জন্য নিম্নলিখিত কনফিগারেশন দিয়েছি:
labels: এক্স-অক্ষের লেবেল হিসেবে আমরা মাসের নাম দিয়েছি।datasets: ডেটাসেটের মধ্যে ডেটা, লাইন রঙ, এবং লাইন প্রস্থ সেট করা হয়েছে।options: চার্টের রেসপন্সিভনেস এবং Y-অক্ষের শূন্য থেকে শুরু করার অপশন কনফিগার করা হয়েছে।
৩. চার্ট কাস্টমাইজেশন
Chart.js এর মাধ্যমে লাইন চার্টকে কাস্টমাইজ করা যায় বিভিন্ন উপায়ে। কিছু সাধারণ কাস্টমাইজেশন:
- লাইন রং পরিবর্তন:
borderColorএর মাধ্যমে লাইন রঙ পরিবর্তন করা হয়। - ডেটা পয়েন্টের আকার পরিবর্তন:
pointRadiusএর মাধ্যমে ডেটা পয়েন্টের আকার পরিবর্তন করা যায়। - গ্রিড লাইন কাস্টমাইজেশন:
scalesএর মধ্যে গ্রিড লাইন কাস্টমাইজ করা যায়।
কাস্টমাইজেশন উদাহরণ:
const myLineChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April', 'May'],
datasets: [{
label: 'Sales Over Time',
data: [10, 20, 30, 40, 50],
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 2,
fill: false,
pointRadius: 5, // ডেটা পয়েন্টের আকার
pointBackgroundColor: 'rgba(255, 99, 132, 1)' // পয়েন্টের রং
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true,
grid: {
color: 'rgba(0, 0, 0, 0.1)' // গ্রিড লাইনের রং
}
},
x: {
grid: {
color: 'rgba(0, 0, 0, 0.1)' // এক্স-অক্ষের গ্রিড লাইনের রং
}
}
}
}
});
৪. লাইন চার্টের ব্যবহার ক্ষেত্র
লাইন চার্ট সাধারণত সময়ভিত্তিক ডেটা প্রদর্শনের জন্য ব্যবহৃত হয়। এর কিছু সাধারণ ব্যবহার ক্ষেত্র:
- অর্থনীতি এবং ফিনান্স: স্টক মার্কেটের দাম, মূল্য সূচক ইত্যাদি দেখানোর জন্য।
- বিজ্ঞান এবং প্রকৌশল: তাপমাত্রা, চাপ, গতি ইত্যাদি বিশ্লেষণ করার জন্য।
- ওয়েব অ্যানালিটিক্স: ওয়েবসাইটের ট্রাফিক এবং ব্যবহারকারীর আচরণ ট্র্যাক করার জন্য।
সারাংশ
Chart.js এর মাধ্যমে লাইন চার্ট তৈরি করা খুবই সহজ এবং কার্যকরী। এটি বিশেষভাবে সময়ের সাথে ডেটার পরিবর্তন ট্র্যাক করার জন্য উপযুক্ত। বিভিন্ন কাস্টমাইজেশন অপশন ব্যবহার করে আপনি চার্টের স্টাইল, রঙ, এবং অন্যান্য বৈশিষ্ট্য পরিবর্তন করতে পারেন। Chart.js ডেটা ভিজ্যুয়ালাইজেশনকে আরও আকর্ষণীয় এবং তথ্যপূর্ণ করে তোলে।
Read more
