DC.js এর মাধ্যমে Responsive চার্ট তৈরি করা সম্ভব, যার ফলে চার্টটি স্বয়ংক্রিয়ভাবে ব্রাউজারের আকারের সাথে মানিয়ে যায়। Responsive চার্ট তৈরি করার জন্য, আপনাকে সাধারণভাবে CSS এবং JavaScript এর কিছু কৌশল ব্যবহার করতে হবে। নিচে আমরা DC.js ব্যবহার করে কিভাবে responsive চার্ট তৈরি করতে পারি তার বিস্তারিত ব্যাখ্যা দেব।
১. প্রয়োজনীয় ফাইল যোগ করা
প্রথমে আপনাকে DC.js, D3.js, এবং Crossfilter এর সিডিএন লিঙ্কগুলি যোগ করতে হবে। আপনি যদি এগুলি পূর্বে যোগ না করে থাকেন, তবে নিচের মতো করে যোগ করুন:
<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">
২. HTML ফাইল তৈরি
এখানে আমরা একটি সাধারণ 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 Responsive 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">
<style>
/* Responsive styles */
.dc-chart {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<h1>Responsive DC.js Chart Example</h1>
<div id="bar-chart" class="dc-chart"></div>
<script>
// JavaScript কোড এখানে হবে
</script>
</body>
</html>
এখানে .dc-chart ক্লাসের মাধ্যমে আমরা CSS স্টাইলিং যোগ করেছি যাতে চার্টের আকার 100% প্রস্থে সামঞ্জস্যপূর্ণ হয় এবং উচ্চতা স্বয়ংক্রিয়ভাবে সেট হয়।
৩. ডেটাসেট তৈরি এবং DC.js সেটআপ
এখন ডেটা তৈরি করে, Crossfilter এবং DC.js এর মাধ্যমে একটি Bar Chart তৈরি করব।
const data = [
{ category: "A", value: 30 },
{ category: "B", value: 50 },
{ category: "C", value: 70 },
{ category: "D", value: 20 },
{ category: "E", value: 60 }
];
// Crossfilter সেটআপ
const ndx = crossfilter(data);
// category এর উপর ডাইমেনশন তৈরি
const categoryDimension = ndx.dimension(d => d.category);
// value এর উপর গ্রুপ তৈরি
const categoryGroup = categoryDimension.group().reduceSum(d => d.value);
// DC.js বার চার্ট তৈরি
const barChart = dc.barChart("#bar-chart");
barChart
.width(null) // এইখানে width সুনির্দিষ্ট করা হয়নি, এটি responsive করতে
.height(300)
.dimension(categoryDimension)
.group(categoryGroup)
.x(d3.scaleBand()) // x-axis scale
.xUnits(dc.units.ordinal)
.elasticY(true)
.yAxisLabel("Value")
.xAxisLabel("Category");
এখানে, .width(null) ব্যবহার করা হয়েছে, যাতে এটি রেসপন্সিভ হয় এবং স্ক্রীনের আকারের সাথে মানিয়ে নিতে পারে।
৪. Responsive Chart তৈরির জন্য Dynamic Resizing
DC.js এর মাধ্যমে একটি রেসপন্সিভ চার্ট তৈরি করতে, আপনাকে resize ইভেন্টের জন্য একটি window.resize listener যুক্ত করতে হবে, যা ব্রাউজারের আকার পরিবর্তিত হলে চার্টের আকার পুনরায় রেন্ডার করবে।
// Resize event listener
window.addEventListener("resize", function() {
dc.redrawAll(); // পুরো ড্যাশবোর্ড রিড্র করুন
});
এটি নিশ্চিত করবে যে ব্রাউজারের আকার পরিবর্তন হলে চার্ট স্বয়ংক্রিয়ভাবে রিড্র করবে।
৫. পূর্ণ কোড উদাহরণ
এখন সম্পূর্ণ কোডটি একত্রিত করা হলো:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DC.js Responsive 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">
<style>
/* Responsive styles */
.dc-chart {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<h1>Responsive DC.js Chart Example</h1>
<div id="bar-chart" class="dc-chart"></div>
<script>
// ডেটাসেট
const data = [
{ category: "A", value: 30 },
{ category: "B", value: 50 },
{ category: "C", value: 70 },
{ category: "D", value: 20 },
{ category: "E", value: 60 }
];
// Crossfilter সেটআপ
const ndx = crossfilter(data);
// category এর উপর ডাইমেনশন তৈরি
const categoryDimension = ndx.dimension(d => d.category);
// value এর উপর গ্রুপ তৈরি
const categoryGroup = categoryDimension.group().reduceSum(d => d.value);
// DC.js বার চার্ট তৈরি
const barChart = dc.barChart("#bar-chart");
barChart
.width(null) // responsive width
.height(300)
.dimension(categoryDimension)
.group(categoryGroup)
.x(d3.scaleBand()) // x-axis scale
.xUnits(dc.units.ordinal)
.elasticY(true)
.yAxisLabel("Value")
.xAxisLabel("Category");
// Resize event listener
window.addEventListener("resize", function() {
dc.redrawAll(); // redrawing chart when window is resized
});
dc.renderAll();
</script>
</body>
</html>
৬. অতিরিক্ত কাস্টমাইজেশন
- Height and Width Dynamic Adjustment: আপনি চার্টের height এবং width এর মান CSS বা JavaScript এর মাধ্যমে নির্ধারণ করতে পারেন, যা ব্রাউজারের আকার অনুযায়ী পরিবর্তিত হবে।
- Gridlines and Axis Labels:
renderHorizontalGridLines(true)এবংxAxisLabel()বাyAxisLabel()ব্যবহার করে গ্রিডলাইন এবং অক্ষ লেবেল কাস্টমাইজ করা যায়।
সারাংশ
- Responsive চার্ট তৈরি করতে DC.js ব্যবহার করা সহজ।
- CSS এর
width: 100%এবং JavaScript এরwidth(null)ব্যবহার করে ব্রাউজারের আকার অনুযায়ী চার্ট রেন্ডার করা যায়। - Resize event ব্যবহার করে, চার্টের আকার স্বয়ংক্রিয়ভাবে পরিবর্তিত হয় যখন ব্রাউজারের আকার পরিবর্তিত হয়।
এটি একটি কার্যকরী পদ্ধতি যা ডেটা ভিজ্যুয়ালাইজেশনকে মোবাইল, ট্যাবলেট বা ডেস্কটপের জন্য অপ্টিমাইজড করে।
Read more
