Highcharts ব্যবহারকারীদের জন্য অত্যন্ত ইন্টারঅ্যাকটিভ চার্ট তৈরি করার জন্য বিভিন্ন user interaction অপশন প্রদান করে। এর মধ্যে Drilldown এবং Zoom Events দুটি গুরুত্বপূর্ণ ফিচার যা ব্যবহারকারীদের ডেটার আরও বিস্তারিত বিশ্লেষণ করতে সাহায্য করে। এই ফিচারগুলো ব্যবহার করে, আপনি চার্টে ডেটার উপর আরও গভীরভাবে বিশ্লেষণ করতে পারেন, যা সাধারণত ট্রেন্ড বিশ্লেষণ বা তুলনা করার জন্য উপকারী।
Drilldown: বিস্তারিত ডেটা দেখার জন্য
Drilldown হল একটি ফিচার যা ব্যবহারকারীদের একটি চার্টে প্রথমে সাধারণ বা সারাংশ ডেটা দেখানোর পরে, আরও বিস্তারিত ডেটা দেখতে সক্ষম করে। সাধারণত, একটি column বা pie chart এর উপাদান ক্লিক করার মাধ্যমে আরও বিস্তারিত ডেটা বা সাব-ডেটা দেখানো হয়।
উদাহরণ: 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: 'column'
},
title: {
text: 'Sales Data by Region'
},
subtitle: {
text: 'Click a column to drill down'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'Sales Amount'
}
},
series: [{
name: 'Regions',
data: [{
name: 'North America',
y: 60,
drilldown: 'north_america'
}, {
name: 'Europe',
y: 30,
drilldown: 'europe'
}, {
name: 'Asia',
y: 10,
drilldown: 'asia'
}]
}],
drilldown: {
series: [{
id: 'north_america',
data: [
['USA', 45],
['Canada', 15]
]
}, {
id: 'europe',
data: [
['Germany', 20],
['UK', 10]
]
}, {
id: 'asia',
data: [
['China', 6],
['India', 4]
]
}]
}
});
</script>
</body>
</html>
উদাহরণ ব্যাখ্যা:
- Drilldown ফিচার ব্যবহার করে, আপনি মূল column chart এর উপর ক্লিক করার মাধ্যমে একটি নতুন স্তরে বিশ্লেষণ করতে পারেন।
- drilldown.id সহ series এ ভিন্ন ভিন্ন ডেটা যোগ করা হয়েছে, যা ড্রিলডাউন আউটপুট হিসেবে দেখা যাবে।
- ব্যবহারকারী যখন একটি কলামে ক্লিক করবেন, তখন সেই কলামের বিস্তারিত ডেটা দেখানো হবে।
Zoom: ডেটার ওপর বিস্তারিত দেখতে
Zoom ইন্টারঅ্যাকশন ব্যবহারকারীদের চার্টের উপর একটি নির্দিষ্ট অঞ্চল বেছে নিতে এবং সেই অঞ্চলের ডেটা বিশ্লেষণ করতে সক্ষম করে। Highcharts এ Zoom অপশনটি খুবই সহজভাবে xAxis এবং yAxis এর জন্য নির্ধারণ করা যায়। Zoom দ্বারা ব্যবহারকারী তাদের প্রয়োজনীয় সময়কাল বা ডেটা পয়েন্টের সিলেকশন করতে পারেন।
উদাহরণ: Zoom In and Zoom Out ইভেন্ট
<!DOCTYPE html>
<html>
<head>
<title>Highcharts Zoom Example</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
<script>
Highcharts.chart('container', {
chart: {
type: 'line',
zoomType: 'xy' // x এবং y অক্ষের জন্য zoom সক্রিয় করা
},
title: {
text: 'Sales Over Time'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']
},
yAxis: {
title: {
text: 'Sales'
}
},
series: [{
name: 'Sales',
data: [10, 20, 30, 40, 50, 60, 70]
}],
chart: {
events: {
selection: function (event) {
var zoomed = event.xAxis[0].min + ' to ' + event.xAxis[0].max; // Zoom ইন পরবর্তী ভ্যালু দেখানো
console.log('Zoomed range: ' + zoomed);
}
}
}
});
</script>
</body>
</html>
উদাহরণ ব্যাখ্যা:
- zoomType: 'xy' সেট করার মাধ্যমে xAxis এবং yAxis উভয়ের জন্য zoom ইফেক্ট সক্ষম করা হয়েছে।
- ব্যবহারকারী যখন চার্টের উপর জুম ইন বা আউট করবেন, তখন selection event চালু হবে এবং সিলেক্ট করা রেঞ্জ console-এ দেখানো হবে।
Zoom ইভেন্ট:
- selection event ব্যবহার করা হয়েছে, যা ব্যবহারকারী যখন চার্টে একটি নির্দিষ্ট এলাকা সিলেক্ট করবেন, তখন তার xAxis এবং yAxis রেঞ্জ কনসোল বা অন্য কোথাও দেখা যাবে।
Drilldown এবং Zoom এর সংমিশ্রণ
আপনি Drilldown এবং Zoom এর দুটি ফিচার একসাথে ব্যবহার করতে পারেন, যার ফলে ব্যবহারকারী সহজেই একটি চার্টের ওপর ক্লিক করে বিস্তারিত দেখতে পারবে এবং সেই সাথে তাদের কাঙ্ক্ষিত সময়কাল বা ডেটার মধ্যে জুম ইন বা আউট করতে পারবেন।
উদাহরণ: Drilldown এবং Zoom একসাথে ব্যবহার
<!DOCTYPE html>
<html>
<head>
<title>Highcharts Drilldown and Zoom 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: 'column',
zoomType: 'xy' // Zoom সক্রিয় করা
},
title: {
text: 'Sales by Region'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'Sales Amount'
}
},
series: [{
name: 'Regions',
data: [{
name: 'North America',
y: 60,
drilldown: 'north_america'
}, {
name: 'Europe',
y: 30,
drilldown: 'europe'
}, {
name: 'Asia',
y: 10,
drilldown: 'asia'
}]
}],
drilldown: {
series: [{
id: 'north_america',
data: [
['USA', 45],
['Canada', 15]
]
}, {
id: 'europe',
data: [
['Germany', 20],
['UK', 10]
]
}, {
id: 'asia',
data: [
['China', 6],
['India', 4]
]
}]
},
chart: {
events: {
selection: function (event) {
var zoomed = event.xAxis[0].min + ' to ' + event.xAxis[0].max;
console.log('Zoomed range: ' + zoomed);
}
}
}
});
</script>
</body>
</html>
সংমিশ্রণ ব্যাখ্যা:
- Drilldown: প্রাথমিক column chart তে বিভিন্ন অঞ্চলের সারাংশ দেখানো হচ্ছে। ব্যবহারকারী যখন কোনো কলামে ক্লিক করবেন, তখন আরো বিস্তারিত ডেটা দেখানো হবে।
- Zoom: xy পদ্ধতিতে xAxis এবং yAxis উভয়ের জন্য zoom ইফেক্ট সক্রিয় করা হয়েছে, যাতে ব্যবহারকারীরা চার্টের ওপর একটি নির্দিষ্ট অঞ্চল জুম করতে পারেন।
উপসংহার
Drilldown এবং Zoom ইভেন্ট Highcharts এর দুটি গুরুত্বপূর্ণ ফিচার যা ব্যবহারকারীদের ডেটার ওপর বিস্তারিতভাবে বিশ্লেষণ করতে সহায়ক। Drilldown ব্যবহারকারীদের একটি উপাদানের ওপর ক্লিক করে আরও গভীরে যেতে সহায়তা করে, এবং Zoom তাদের নির্দিষ্ট একটি এলাকা বা সময়কাল দেখতে সাহায্য করে। এই দুটি ফিচার একসাথে ব্যবহার করা হলে, আপনি ইন্টারঅ্যাকটিভ এবং ডাইনামিক চার্ট তৈরি করতে পারবেন যা ব্যবহারকারীদের আরও ভাল বিশ্লেষণ এবং ডেটা ভিজুয়ালাইজেশন করতে সাহায্য করবে।
Read more
