DC.js ব্যবহার করে line chart তৈরি করা খুবই সহজ। এখানে আমরা দুটি ধরনের line chart তৈরি করব:
- Simple Line Chart - একটি একক লাইন চার্ট যা একটি মাত্র ডেটাসেটের উপর ভিত্তি করে।
- Multi-series Line Chart - একাধিক লাইন দিয়ে বিভিন্ন ডেটাসেটের তুলনা করা।
১. Simple Line Chart
একটি simple line chart তৈরি করতে DC.js এর lineChart() ফাংশন ব্যবহার করা হয়। এই ধরনের চার্ট সাধারণত একটি মাত্র ডেটাসেটের ট্রেন্ড দেখাতে ব্যবহার হয়।
ধাপ ১: ডেটাসেট তৈরি
const data = [
{ date: "2023-01-01", value: 30 },
{ date: "2023-02-01", value: 50 },
{ date: "2023-03-01", value: 70 },
{ date: "2023-04-01", value: 90 },
{ date: "2023-05-01", value: 110 }
];
ধাপ ২: Crossfilter সেটআপ
const ndx = crossfilter(data);
const dateDimension = ndx.dimension(d => d.date);
const valueGroup = dateDimension.group().reduceSum(d => d.value);
ধাপ ৩: DC.js Line Chart তৈরি করা
const lineChart = dc.lineChart("#line-chart");
lineChart
.width(600)
.height(300)
.dimension(dateDimension)
.group(valueGroup)
.x(d3.scaleTime()) // X-axis টাইম স্কেল
.xUnits(d3.timeMonths) // এক্স-অক্ষের জন্য মাস হিসাবে ইউনিট
.yAxisLabel("Value")
.xAxisLabel("Date");
dc.renderAll();
ধাপ ৪: HTML কোড
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DC.js Simple Line Chart</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter2/1.5.7/crossfilter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.2/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/5.0.3/dc.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/5.0.3/dc.min.css">
</head>
<body>
<h1>Simple Line Chart with DC.js</h1>
<div id="line-chart"></div>
<script>
const data = [
{ date: "2023-01-01", value: 30 },
{ date: "2023-02-01", value: 50 },
{ date: "2023-03-01", value: 70 },
{ date: "2023-04-01", value: 90 },
{ date: "2023-05-01", value: 110 }
];
const ndx = crossfilter(data);
const dateDimension = ndx.dimension(d => d.date);
const valueGroup = dateDimension.group().reduceSum(d => d.value);
const lineChart = dc.lineChart("#line-chart");
lineChart
.width(600)
.height(300)
.dimension(dateDimension)
.group(valueGroup)
.x(d3.scaleTime())
.xUnits(d3.timeMonths)
.yAxisLabel("Value")
.xAxisLabel("Date");
dc.renderAll();
</script>
</body>
</html>
২. Multi-series Line Chart
একাধিক line series একসঙ্গে দেখানোর জন্য multi-series line chart ব্যবহার করা হয়, যেখানে একাধিক গ্রুপ এবং ডাইমেনশন থাকে। এই ধরনের চার্টে একাধিক লাইন একে অপরের তুলনায় আলাদা ডেটাসেট বা ক্যাটেগরি দেখাতে ব্যবহার হয়।
ধাপ ১: ডেটাসেট তৈরি
const data = [
{ date: "2023-01-01", series: "A", value: 30 },
{ date: "2023-01-01", series: "B", value: 40 },
{ date: "2023-02-01", series: "A", value: 50 },
{ date: "2023-02-01", series: "B", value: 60 },
{ date: "2023-03-01", series: "A", value: 70 },
{ date: "2023-03-01", series: "B", value: 80 },
{ date: "2023-04-01", series: "A", value: 90 },
{ date: "2023-04-01", series: "B", value: 100 }
];
ধাপ ২: Crossfilter সেটআপ
const ndx = crossfilter(data);
const dateDimension = ndx.dimension(d => d.date);
const seriesGroupA = dateDimension.group().reduceSum(d => (d.series === "A" ? d.value : 0));
const seriesGroupB = dateDimension.group().reduceSum(d => (d.series === "B" ? d.value : 0));
ধাপ ৩: DC.js Multi-series Line Chart তৈরি করা
const lineChart = dc.lineChart("#multi-line-chart");
lineChart
.width(600)
.height(300)
.dimension(dateDimension)
.group(seriesGroupA, "Series A")
.stack(seriesGroupB, "Series B")
.x(d3.scaleTime()) // X-axis টাইম স্কেল
.xUnits(d3.timeMonths) // এক্স-অক্ষের জন্য মাস হিসাবে ইউনিট
.yAxisLabel("Value")
.xAxisLabel("Date");
dc.renderAll();
ধাপ ৪: HTML কোড
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DC.js Multi-series Line Chart</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter2/1.5.7/crossfilter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.2/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/5.0.3/dc.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/5.0.3/dc.min.css">
</head>
<body>
<h1>Multi-series Line Chart with DC.js</h1>
<div id="multi-line-chart"></div>
<script>
const data = [
{ date: "2023-01-01", series: "A", value: 30 },
{ date: "2023-01-01", series: "B", value: 40 },
{ date: "2023-02-01", series: "A", value: 50 },
{ date: "2023-02-01", series: "B", value: 60 },
{ date: "2023-03-01", series: "A", value: 70 },
{ date: "2023-03-01", series: "B", value: 80 },
{ date: "2023-04-01", series: "A", value: 90 },
{ date: "2023-04-01", series: "B", value: 100 }
];
const ndx = crossfilter(data);
const dateDimension = ndx.dimension(d => d.date);
const seriesGroupA = dateDimension.group().reduceSum(d => (d.series === "A" ? d.value : 0));
const seriesGroupB = dateDimension.group().reduceSum(d => (d.series === "B" ? d.value : 0));
const lineChart = dc.lineChart("#multi-line-chart");
lineChart
.width(600)
.height(300)
.dimension(dateDimension)
.group(seriesGroupA, "Series A")
.stack(seriesGroupB, "Series B")
.x(d3.scaleTime())
.xUnits(d3.timeMonths)
.yAxisLabel("Value")
.xAxisLabel("Date");
dc.renderAll();
</script>
</body>
</html>
সারাংশ
- Simple Line Chart: একক ডেটাসেটের উপর ভিত্তি করে একটি সাধারণ লাইন চার্ট তৈরি করতে
lineChart()ব্যবহার করা হয়। এতে সাধারণত একক সিরিজ থাকে। - Multi-series Line Chart: একাধিক সিরিজের তুলনা করার জন্য লাইন চার্ট তৈরি করা হয়, যেখানে একাধিক গ্রুপ এবং স্ট্যাক ব্যবহার করা হয়।
DC.js এর এই দুটি প্রকার লাইন চার্ট ব্যবহার করে আপনি সহজে ডেটার ট্রেন্ড এবং তুলনা দেখাতে পারবেন।
Content added By
Read more
