Line Chart (লাইন চার্ট) Chart.js-এ একটি জনপ্রিয় চার্ট টাইপ যা সময় বা ধারাবাহিক ডেটার পরিবর্তন বা প্রবণতা প্রদর্শন করতে ব্যবহৃত হয়। এটি একটি লাইন বা পলিনোমিয়াল কনেকশনের মাধ্যমে বিভিন্ন ডেটা পয়েন্টের মধ্যে সম্পর্ক দেখায়। সাধারণত এটি ট্রেন্ড বা সময়ভিত্তিক বিশ্লেষণের জন্য ব্যবহৃত হয়।
Line Chart এর সুবিধা
- টাইম সিরিজ ডেটা: লাইন চার্ট সময়ের সাথে পরিবর্তিত ডেটা বা ধারাবাহিক তথ্য দেখানোর জন্য আদর্শ।
- ডেটার ট্রেন্ড: এটি সহজে ডেটার বৃদ্ধি বা হ্রাসের প্রবণতা দেখতে সাহায্য করে।
- সহজ তুলনা: একাধিক ডেটাসেটের তুলনা করতে সুবিধাজনক।
Line Chart তৈরি করার জন্য Chart.js কনফিগারেশন
নিচে একটি বেসিক Line Chart তৈরি করার উদাহরণ দেওয়া হলো:
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 Example</title>
</head>
<body>
<h1>Line Chart Example</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>
JavaScript ফাইল (Line Chart কনফিগারেশন)
script.js:
const ctx = document.getElementById('myLineChart').getContext('2d');
// Line Chart কনফিগারেশন
const myLineChart = new Chart(ctx, {
type: 'line', // চার্টের ধরন: Line Chart
data: {
labels: ['January', 'February', 'March', 'April', 'May'], // এক্স-অক্ষের লেবেল
datasets: [{
label: 'Sales Growth', // ডেটাসেটের নাম
data: [10, 20, 30, 40, 50], // Y-অক্ষের ডেটা পয়েন্ট
borderColor: 'rgba(75, 192, 192, 1)', // লাইনটির রং
backgroundColor: 'rgba(75, 192, 192, 0.2)', // লাইনটির নিচে ব্যাকগ্রাউন্ড রং
fill: true, // লাইন চার্টে ফিলিং
tension: 0.4 // লাইনটির কোণ (Curve) কাস্টমাইজেশন
}]
},
options: {
responsive: true, // রেসপন্সিভ চার্ট
scales: {
y: {
beginAtZero: true // Y-অক্ষ শূন্য থেকে শুরু হবে
}
}
}
});
Line Chart এর কাস্টমাইজেশন
Chart.js এর লাইন চার্টের বিভিন্ন কাস্টমাইজেশন অপশন রয়েছে, যেমন:
borderColor: লাইনটির রং নির্ধারণ করতে ব্যবহৃত হয়।backgroundColor: লাইনটির নিচের ব্যাকগ্রাউন্ড রং কাস্টমাইজ করতে ব্যবহৃত হয়।fill:trueদিলে লাইনটির নিচে একটি ভরা অংশ দেখা যাবে।tension: এটি লাইনটির কোণ (curve) নিয়ন্ত্রণ করে। 0.0 দিলে সোজা লাইন, 1.0 দিলে সম্পূর্ণ বাঁকা লাইন হবে।labels: এক্স-অক্ষের লেবেল হিসেবে ব্যবহার করা হয়।
Line Chart এর আরও কাস্টমাইজেশন অপশন
লেজেন্ড কাস্টমাইজেশন:
options: { plugins: { legend: { display: true, position: 'top' } } }টুলটিপস কাস্টমাইজেশন:
options: { plugins: { tooltip: { enabled: true, mode: 'index', intersect: false } } }স্কেল কাস্টমাইজেশন:
options: { scales: { x: { title: { display: true, text: 'Months' } }, y: { title: { display: true, text: 'Sales' }, beginAtZero: true } } }
Line Chart এর অন্যান্য বৈশিষ্ট্য
- এনিমেশন: Chart.js লাইন চার্টে সুন্দর এনিমেশন অ্যাড করতে পারে, যা ডেটার পরিবর্তন দেখানোর জন্য ব্যবহারকারীদের জন্য আকর্ষণীয়।
- রেসপন্সিভ: স্ক্রিনের সাইজ অনুযায়ী চার্ট নিজে থেকেই মানিয়ে নেয়।
- মাল্টিপল ডেটাসেট: একাধিক ডেটাসেটের জন্য একসাথে লাইন চার্ট তৈরি করা যেতে পারে, যা বিভিন্ন ট্রেন্ড বা ক্যাটাগরি তুলনা করার জন্য উপযুক্ত।
সারাংশ
Line Chart Chart.js এর অন্যতম জনপ্রিয় চার্ট টাইপ, যা সময়ভিত্তিক বা ধারাবাহিক ডেটার বিশ্লেষণ করতে কার্যকরী। এটি সাধারণত ট্রেন্ড দেখানোর জন্য ব্যবহৃত হয় এবং ব্যবহারকারীদের জন্য সহজে বোধগম্য ডেটা উপস্থাপন করে। Chart.js এর মাধ্যমে আপনি বিভিন্ন ধরনের কাস্টমাইজেশন, এনিমেশন এবং রেসপন্সিভ চার্ট তৈরি করতে পারবেন।
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 ডেটা ভিজ্যুয়ালাইজেশনকে আরও আকর্ষণীয় এবং তথ্যপূর্ণ করে তোলে।
Chart.js-এ একাধিক ডেটাসেট ব্যবহার করে একাধিক সিরিজ বা ডেটা লাইন প্রদর্শন করা সম্ভব। এর মাধ্যমে একটি চার্টে একাধিক ডেটা ভিজ্যুয়ালাইজ করা যায়, যা ডেটার তুলনা করতে সাহায্য করে। এছাড়াও, লাইন স্টাইলিং ব্যবহার করে চার্টের লাইনগুলোকে কাস্টমাইজ করা যায়, যেমন রঙ, প্রস্থ, এবং স্টাইল।
Multiple Datasets in Chart.js
একাধিক ডেটাসেট ব্যবহার করে আপনি একটি চার্টে একাধিক লাইন বা বার প্রদর্শন করতে পারেন। এটি ব্যবহারকারীকে একাধিক ভিন্ন ডেটার মধ্যে তুলনা করতে সহায়তা করে। সাধারণত, ডেটাসেটের মাধ্যমে বিভিন্ন ডেটার মান ও সেটিংস পরিবর্তন করা হয়।
উদাহরণ: Multiple Datasets (লাইন চার্ট)
এখানে একটি লাইন চার্ট তৈরি করা হয়েছে যেখানে দুটি ডেটাসেট ব্যবহার করা হয়েছে:
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line', // চার্ট টাইপ (লাইন চার্ট)
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June'], // এক্স-অক্ষের লেবেল
datasets: [
{
label: 'Dataset 1', // প্রথম ডেটাসেটের লেবেল
data: [12, 19, 3, 5, 2, 3], // প্রথম ডেটাসেটের ডেটা পয়েন্ট
borderColor: 'rgba(75, 192, 192, 1)', // লাইন রঙ
borderWidth: 2, // লাইন প্রস্থ
fill: false // লাইনটি পূর্ণ হবে না
},
{
label: 'Dataset 2', // দ্বিতীয় ডেটাসেটের লেবেল
data: [6, 11, 15, 6, 8, 12], // দ্বিতীয় ডেটাসেটের ডেটা পয়েন্ট
borderColor: 'rgba(153, 102, 255, 1)', // লাইন রঙ
borderWidth: 2, // লাইন প্রস্থ
fill: false // লাইনটি পূর্ণ হবে না
}
]
},
options: {
responsive: true, // রেসপন্সিভ চার্ট
scales: {
y: {
beginAtZero: true // Y-অক্ষ শূন্য থেকে শুরু হবে
}
}
}
});
Explanation of Code:
- Multiple Datasets: এখানে দুটি ডেটাসেট (
Dataset 1এবংDataset 2) ব্যবহৃত হয়েছে, প্রতিটি ডেটাসেটে আলাদা ডেটা পয়েন্ট এবং লাইন রঙ রয়েছে। আপনি এখানে আরও ডেটাসেট যোগ করতে পারেন। - Border Color and Border Width: প্রতিটি ডেটাসেটের লাইন রঙ এবং প্রস্থ কাস্টমাইজ করা হয়েছে। এটি ডেটাসেটকে আলাদা এবং পরিষ্কারভাবে দেখতে সাহায্য করে।
- Fill:
fill: falseব্যবহার করে লাইনগুলোর নিচে পূর্ণতা দেওয়া হয়নি। আপনি যদি পূর্ণতা দিতে চান,fill: trueব্যবহার করতে পারেন।
Line Styling in Chart.js
Chart.js-এ লাইন স্টাইলিং কাস্টমাইজ করা যায়। এর মাধ্যমে আপনি লাইনটির রঙ, প্রস্থ, স্টাইল (যেমন ড্যাশড লাইন) পরিবর্তন করতে পারেন।
উদাহরণ: Line Styling (ড্যাশড লাইন)
এখানে লাইন স্টাইলিং কাস্টমাইজ করার জন্য একটি ড্যাশড লাইন (dashed line) তৈরি করা হয়েছে:
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April', 'May'],
datasets: [{
label: 'Dataset 1',
data: [12, 19, 3, 5, 2],
borderColor: 'rgba(75, 192, 192, 1)', // লাইন রঙ
borderWidth: 3, // লাইন প্রস্থ
fill: false, // পূর্ণতা দিবে না
borderDash: [5, 5] // ড্যাশড লাইন: [ড্যাশের দৈর্ঘ্য, স্পেস]
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
});
Line Styling Options:
borderDash:borderDashঅ্যারে ব্যবহার করে আপনি লাইনটির স্টাইল পরিবর্তন করতে পারেন। এটি দুইটি মান নেয়:- প্রথম মান: ড্যাশের দৈর্ঘ্য।
- দ্বিতীয় মান: ড্যাশের মধ্যে স্পেসের দৈর্ঘ্য।
উদাহরণ:
[5, 5]দিয়ে আপনি একটি ড্যাশড লাইন তৈরি করবেন, যেখানে 5px ড্যাশ এবং 5px স্পেস থাকবে।borderColor: লাইন রঙ পরিবর্তন করতে ব্যবহৃত হয়।borderWidth: লাইন প্রস্থ কাস্টমাইজ করার জন্য ব্যবহৃত হয়।
আরও কিছু Line Styling:
- Line Type: Chart.js-এ লাইনটির ধরন পরিবর্তন করতে পারেন, যেমন সোজা (straight), বেজি (bezier) ইত্যাদি।
lineTension: 0.4 // বেজি লাইন
- Point Style: পয়েন্টের আকার এবং রঙ পরিবর্তন করতে পারেন।
pointStyle: 'rect', // পয়েন্টকে রেকটেঙ্গেল আকারে দেখাবে
pointRadius: 5 // পয়েন্টের আকার
সারাংশ
Chart.js-এ multiple datasets ব্যবহার করে একাধিক ডেটাসেটের চার্ট তৈরি করা যায়, যা বিভিন্ন ডেটার তুলনা করতে সহায়ক। একইভাবে, line styling কাস্টমাইজেশন ব্যবহার করে লাইনগুলির রঙ, প্রস্থ এবং স্টাইল পরিবর্তন করা যায়, যা চার্টের দৃষ্টিনন্দনতা এবং বোধগম্যতা বাড়ায়। borderDash, borderColor, এবং borderWidth সহ অন্যান্য স্টাইলিং অপশন ব্যবহার করে আপনি আপনার চার্টের লাইনগুলোকে আরও কাস্টমাইজ করতে পারেন।
