Drilldown Charts Highcharts এ একটি শক্তিশালী বৈশিষ্ট্য, যা ব্যবহারকারীদের চার্টের একটি নির্দিষ্ট অংশে ক্লিক করে আরও বিস্তারিত তথ্য দেখার সুযোগ দেয়। এটি ডেটা বিশ্লেষণে সহায়ক, যেখানে ব্যবহারকারী মূল চার্টের উপর ক্লিক করলে সংশ্লিষ্ট ডেটার বিশদ প্রদর্শিত হয়। এটি সাধারণত পাই চার্ট বা কলাম চার্ট এ ব্যবহৃত হয়, যেখানে আপনি প্রথমে সামগ্রিক দৃশ্য দেখতে পারেন এবং পরে ডেটার আরও বিস্তারিত রূপে প্রবাহিত হতে পারেন।
Drilldown Chart তৈরি করা
Drilldown chart তৈরি করতে, আপনি মূল চার্টে কিছু drilldown series যুক্ত করতে হবে। যখন ব্যবহারকারী মূল চার্টের কোনও সেগমেন্টে ক্লিক করবে, তখন একটি নতুন চার্ট প্রদর্শিত হবে, যা ওই সেগমেন্টের বিস্তারিত ডেটা দেখাবে।
উদাহরণ:
এখানে একটি পাই চার্ট তৈরি করা হয়েছে, যা Drilldown সুবিধা প্রদান করে। প্রধান চার্টে বিভিন্ন বিভাগ (যেমন: খাদ্য, পোশাক, ইলেকট্রনিক্স) দেখানো হবে এবং বিভাগে ক্লিক করার পরে বিস্তারিত ডেটা প্রদর্শিত হবে।
<!DOCTYPE html>
<html>
<head>
<title>Highcharts Drilldown Example</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
</head>
<body>
<div id="container" style="width: 100%; height: 400px;"></div>
<script>
Highcharts.chart('container', {
chart: {
type: 'pie'
},
title: {
text: 'বিক্রয় বিভাগের Drilldown'
},
subtitle: {
text: 'একটি বিভাগের উপর ক্লিক করুন বিস্তারিত দেখার জন্য'
},
plotOptions: {
pie: {
cursor: 'pointer',
point: {
events: {
drilldown: function () {
alert('আপনি ' + this.name + ' বিভাগে ক্লিক করেছেন');
}
}
}
}
},
series: [{
name: 'বিভাগ',
colorByPoint: true,
data: [{
name: 'খাদ্য',
y: 60,
drilldown: 'food'
}, {
name: 'পোশাক',
y: 25,
drilldown: 'clothing'
}, {
name: 'ইলেকট্রনিক্স',
y: 15,
drilldown: 'electronics'
}]
}],
drilldown: {
series: [{
id: 'food',
data: [
['চাল', 25],
['সবজি', 15],
['ফল', 10],
['মাংস', 10]
]
}, {
id: 'clothing',
data: [
['প্যান্ট', 10],
['শার্ট', 10],
['জ্যাকেট', 5]
]
}, {
id: 'electronics',
data: [
['ল্যাপটপ', 10],
['মোবাইল', 3],
['টিভি', 2]
]
}]
}
});
</script>
</body>
</html>
ব্যাখ্যা:
- Main Pie Chart: মূল চার্টে তিনটি বিভাগ দেখানো হয়েছে— খাদ্য, পোশাক, এবং ইলেকট্রনিক্স।
- Drilldown: যখন ব্যবহারকারী কোনো বিভাগের উপর ক্লিক করবে, তখন সংশ্লিষ্ট ডেটা (যেমন খাদ্যের বিস্তারিত বিভাগ) একটি নতুন চার্ট হিসেবে প্রদর্শিত হবে। এই অংশে ড্রিলডাউন সিরিজগুলি series.id এর মাধ্যমে নির্ধারণ করা হয়েছে।
- Drilldown Event:
drilldownইভেন্টের মাধ্যমে ব্যবহারকারী যখন একটি সেগমেন্টে ক্লিক করবে, তখন একটি এলার্ট শো হবে (এটি শুধুমাত্র একটি উদাহরণ, আপনি এটি কাস্টমাইজ করতে পারেন)।
Drilldown Chart এর উপকারিতা
- ডেটার বিস্তারিত বিশ্লেষণ: Drilldown চার্ট ব্যবহারকারীদের জন্য ডেটার গভীরতর বিশ্লেষণ সহজ করে তোলে, যেখানে তারা প্রথমে সামগ্রিক তথ্য দেখেন এবং তারপর নির্দিষ্ট অংশের বিস্তারিত দেখতে পারেন।
- ইন্টারঅ্যাকটিভ: এটি অত্যন্ত ইন্টারঅ্যাকটিভ এবং ব্যবহারকারীকে বিস্তারিত তথ্য পেতে আরও সক্রিয় করে তোলে।
- স্পেসের ব্যবহার: ড্রিলডাউন ব্যবহারের মাধ্যমে আপনি একটি চার্টের মধ্যে একাধিক স্তরের ডেটা অন্তর্ভুক্ত করতে পারেন, যা খুবই কার্যকরী যদি আপনার কাছে প্রচুর ডেটা থাকে।
Drilldown এর সাথে Multiple Series যুক্ত করা
Multiple Drilldown Series ব্যবহার করার মাধ্যমে একাধিক ডেটা সেগমেন্টের জন্য বিভিন্ন বিস্তারিত ডেটা দেখানো সম্ভব।
উদাহরণ:
<!DOCTYPE html>
<html>
<head>
<title>Highcharts Multiple Drilldown</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
</head>
<body>
<div id="container" style="width: 100%; height: 400px;"></div>
<script>
Highcharts.chart('container', {
chart: {
type: 'pie'
},
title: {
text: 'বিভিন্ন বিভাগের Drilldown'
},
plotOptions: {
pie: {
cursor: 'pointer',
point: {
events: {
drilldown: function () {
alert('আপনি ' + this.name + ' বিভাগের উপর ক্লিক করেছেন');
}
}
}
}
},
series: [{
name: 'বিভাগ',
colorByPoint: true,
data: [{
name: 'ফলের দোকান',
y: 45,
drilldown: 'fruit_shop'
}, {
name: 'বস্ত্র দোকান',
y: 35,
drilldown: 'clothing_shop'
}, {
name: 'ইলেকট্রনিক্স',
y: 20,
drilldown: 'electronics_shop'
}]
}],
drilldown: {
series: [{
id: 'fruit_shop',
data: [
['অ্যাপেল', 20],
['কমলা', 15],
['পেয়ারা', 10]
]
}, {
id: 'clothing_shop',
data: [
['টি-শার্ট', 10],
['জিন্স', 15],
['হুডি', 10]
]
}, {
id: 'electronics_shop',
data: [
['টেলিভিশন', 5],
['মোবাইল', 8],
['ল্যাপটপ', 7]
]
}]
}
});
</script>
</body>
</html>
এখানে তিনটি বিভাগের জন্য Multiple Drilldown সিরিজ যোগ করা হয়েছে। প্রতিটি বিভাগে বিস্তারিত তথ্য ক্লিক করে দেখা যাবে।
উপসংহার
Highcharts এর Drilldown Charts ডেটা বিশ্লেষণে একটি অত্যন্ত শক্তিশালী ফিচার, যা ব্যবহারকারীদের মূল চার্ট থেকে আরও বিস্তারিত তথ্য প্রবাহিত করতে সাহায্য করে। এটি পাই চার্ট, কলাম চার্ট এবং অন্যান্য গ্রাফিক্যাল ভিজুয়ালাইজেশন সহ কাজ করতে পারে। Drilldown charts এর মাধ্যমে ব্যবহারকারী ইন্টারঅ্যাক্টিভভাবে ডেটা দেখতে এবং বিশ্লেষণ করতে পারে, যা তাদের জন্য আরও উপযোগী এবং কার্যকরী।
Read more
