DC.js ব্যবহার করে আপনি ইন্টারেক্টিভ চার্ট তৈরি করতে পারেন যেখানে ব্যবহারকারীরা ডেটা ফিল্টার করতে পারে, ফিল্টার রিসেট করতে পারে, এবং গ্রাফটি রিড্র করার জন্য অপশন ব্যবহার করতে পারে। এখানে দেখানো হবে কীভাবে আপনি একটি DC.js চার্টে Filter, Reset, এবং Redraw অপশন যোগ করতে পারেন।
১. প্রাথমিক সেটআপ
প্রথমে একটি সাধারণ DC.js চার্ট তৈরি করি। এখানে আমরা একটি Bar Chart তৈরি করব যা ক্যাটেগরি অনুযায়ী ডেটা ফিল্টার ও গ্রুপ করবে।
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 Example</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>DC.js Filter, Reset, and Redraw Example</h1>
<div id="bar-chart"></div>
<!-- Filter and Reset buttons -->
<button id="filter-btn">Filter Category A</button>
<button id="reset-btn">Reset Filter</button>
<button id="redraw-btn">Redraw Chart</button>
<script>
// Data
const data = [
{ category: "A", value: 30 },
{ category: "B", value: 50 },
{ category: "A", value: 70 },
{ category: "C", value: 20 },
{ category: "B", value: 40 }
];
// Crossfilter Setup
const ndx = crossfilter(data);
const categoryDimension = ndx.dimension(d => d.category);
const categoryGroup = categoryDimension.group().reduceSum(d => d.value);
// DC.js Bar Chart
const barChart = dc.barChart("#bar-chart");
barChart
.width(600)
.height(300)
.dimension(categoryDimension)
.group(categoryGroup)
.x(d3.scaleBand())
.xUnits(dc.units.ordinal)
.xAxisLabel("Categories")
.yAxisLabel("Values")
.renderHorizontalGridLines(true);
// Render Chart
dc.renderAll();
// Filter button - Filter Category A
document.getElementById("filter-btn").addEventListener("click", () => {
categoryDimension.filter("A");
dc.redrawAll(); // Redraw all charts after filtering
});
// Reset button - Remove all filters
document.getElementById("reset-btn").addEventListener("click", () => {
categoryDimension.filterAll();
dc.redrawAll(); // Redraw all charts after resetting filters
});
// Redraw button - Manually redraw the chart
document.getElementById("redraw-btn").addEventListener("click", () => {
dc.redrawAll(); // Redraw all charts
});
</script>
</body>
</html>
২. Filter, Reset, এবং Redraw অপশন
Filter অপশন:
- ব্যবহারকারী Filter Category A বোতামে ক্লিক করলে
categoryDimension.filter("A")কল হবে। এটি ক্যাটেগরিAএর উপর ফিল্টার প্রয়োগ করবে এবং তারপরdc.redrawAll()ফাংশন দ্বারা চার্টটি রিফ্রেশ হবে।
document.getElementById("filter-btn").addEventListener("click", () => { categoryDimension.filter("A"); dc.redrawAll(); // Redraw all charts after filtering });- ব্যবহারকারী Filter Category A বোতামে ক্লিক করলে
Reset অপশন:
- Reset Filter বোতামে ক্লিক করলে
.filterAll()ফাংশনটি ক্যাটেগরি ডাইমেনশনের সব ফিল্টার মুছে ফেলবে এবং তারপরdc.redrawAll()ফাংশন চার্ট রিফ্রেশ করবে।
document.getElementById("reset-btn").addEventListener("click", () => { categoryDimension.filterAll(); dc.redrawAll(); // Redraw all charts after resetting filters });- Reset Filter বোতামে ক্লিক করলে
Redraw অপশন:
- Redraw Chart বোতামে ক্লিক করলে চার্টটি শুধুমাত্র রিফ্রেশ হবে, কোন নতুন ফিল্টার প্রয়োগ না করেই।
document.getElementById("redraw-btn").addEventListener("click", () => { dc.redrawAll(); // Redraw all charts });
৩. কাজের ব্যাখ্যা
- Filter: যখন Filter Category A বোতামটি চাপা হয়, তখন ক্যাটেগরি "A"-এর উপর ফিল্টার প্রয়োগ করা হয়।
dc.redrawAll()চার্ট পুনরায় রেন্ডার করে এবং শুধুমাত্র ক্যাটেগরি "A"-এর ডেটা প্রদর্শিত হয়। - Reset: Reset Filter বোতামে ক্লিক করার মাধ্যমে সমস্ত ফিল্টার মুছে ফেলা হয় এবং
dc.redrawAll()চার্ট রিফ্রেশ করে সমস্ত ডেটা পুনরায় প্রদর্শন করে। - Redraw: Redraw Chart বোতামটি ব্যবহারকারীদের চার্ট পুনরায় রেন্ডার করতে দেয়, কিন্তু এটি কোনো ফিল্টার পরিবর্তন না করে।
৪. আরো কাস্টমাইজেশন
- Multiple Filters: আপনি যদি একাধিক ফিল্টার বা ক্রস-ফিল্টারিং করতে চান, তবে
categoryDimension.filter()এর মাধ্যমে একাধিক ক্যাটেগরি বা অন্যান্য ডেটা ক্ষেত্র ফিল্টার করতে পারেন। - Dynamic Buttons: আপনি আরও ডাইনামিক বাটন তৈরি করতে পারেন যেগুলি ব্যবহারকারীর চাহিদা অনুযায়ী বিভিন্ন ফিল্টার এবং কনফিগারেশন পরিবর্তন করবে।
সারাংশ
এই কোডটি দেখিয়েছে কীভাবে DC.js এর মাধ্যমে একটি চার্টে Filter, Reset, এবং Redraw অপশন যোগ করা যায়। ব্যবহারকারীরা চার্টে ডেটা ফিল্টার করতে পারবে, ফিল্টার রিসেট করতে পারবে এবং ম্যানুয়ালি চার্টটি রিফ্রেশ করতে পারবে।
Content added By
Read more
