Highcharts ব্যবহার করে আপনি Zoom, Pan, এবং Scroll অপশন যোগ করতে পারেন, যা আপনার চার্টের ইন্টারঅ্যাকটিভিটি বৃদ্ধি করে এবং ব্যবহারকারীদের চার্টে ডেটা বিশ্লেষণ করতে সাহায্য করে। এই অপশনগুলোর মাধ্যমে ব্যবহারকারীরা সহজে চার্টের একটি নির্দিষ্ট অংশ দেখার জন্য স্কেল করতে বা প্যান করতে পারে, যা বৃহত্তর ডেটাসেট বা টাইম সিরিজ ডেটা বিশ্লেষণের জন্য উপকারী।
Zoom, Pan, এবং Scroll কীভাবে কাজ করে?
- Zoom: চার্টের নির্দিষ্ট অংশে জুম ইন বা জুম আউট করার সুবিধা প্রদান করে।
- Pan: চার্টের এক অংশ থেকে অন্য অংশে মুভ করার সুযোগ দেয়।
- Scroll: চার্টে স্ক্রল বার যোগ করার মাধ্যমে ব্যবহারকারী ডেটা স্ক্রল করে দেখতে পারেন।
এই অপশনগুলো সাধারণত xAxis এবং yAxis এর জন্য কনফিগার করা হয়।
Zoom এবং Pan যোগ করা
Zoom এবং Pan ফিচার যোগ করার জন্য Highcharts এ chart.zoomType কনফিগারেশন ব্যবহার করা হয়। এটি আপনাকে চার্টের কোন অক্ষ (axis) এর জন্য জুম এবং প্যান সক্ষম করতে সহায়ক।
উদাহরণ:
<!DOCTYPE html>
<html>
<head>
<title>Highcharts Zoom and Pan</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' // এক্স এবং ওয়াই অক্ষের জন্য জুম সক্ষম করা
},
title: {
text: 'Zoom and Pan Example'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Sales'
}
},
series: [{
name: 'Sales',
data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120]
}]
});
</script>
</body>
</html>
এই উদাহরণে, zoomType: 'xy' সেট করার মাধ্যমে আপনি উল্লম্ব এবং অনুভূমিক উভয় অক্ষেই জুম ইন এবং প্যান করার সুবিধা পাবেন।
Scrollbar যোগ করা
Highcharts এ scrollbar যোগ করার মাধ্যমে আপনি বড় ডেটাসেটের জন্য স্ক্রলিং সক্ষম করতে পারেন। এটি বিশেষভাবে টাইম সিরিজ বা অনেক ডেটা পয়েন্টের জন্য উপকারী, যেখানে স্ক্রল করে ডেটা দেখা সম্ভব হয়।
উদাহরণ:
<!DOCTYPE html>
<html>
<head>
<title>Highcharts Scrollbar</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/scrollbar.js"></script>
</head>
<body>
<div id="container" style="width: 100%; height: 400px;"></div>
<script>
Highcharts.chart('container', {
chart: {
type: 'line' // লাইন চার্ট টাইপ
},
title: {
text: 'Scrollbar Example'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
scrollbar: {
enabled: true // স্ক্রোলবার সক্ষম করা
}
},
yAxis: {
title: {
text: 'Sales'
}
},
series: [{
name: 'Sales',
data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120]
}]
});
</script>
</body>
</html>
এখানে, scrollbar.enabled কে true সেট করার মাধ্যমে X-Axis এর জন্য স্ক্রোলবার যোগ করা হয়েছে, যা ডেটা স্ক্রল করার সুবিধা প্রদান করবে।
Zoom, Pan, এবং Scroll একসাথে ব্যবহার করা
আপনি একই চার্টে Zoom, Pan, এবং Scroll তিনটি ফিচার একসাথে ব্যবহার করতে পারেন। এটি চার্টের ইন্টারঅ্যাকটিভিটি বৃদ্ধি করে এবং ব্যবহারকারীদের ডেটা বিশ্লেষণের জন্য আরো অপশন প্রদান করে।
উদাহরণ:
<!DOCTYPE html>
<html>
<head>
<title>Highcharts Zoom, Pan, and Scroll</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/scrollbar.js"></script>
</head>
<body>
<div id="container" style="width: 100%; height: 400px;"></div>
<script>
Highcharts.chart('container', {
chart: {
type: 'line', // লাইন চার্ট টাইপ
zoomType: 'xy' // এক্স এবং ওয়াই অক্ষের জন্য জুম সক্ষম করা
},
title: {
text: 'Zoom, Pan, and Scroll Example'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
scrollbar: {
enabled: true // স্ক্রোলবার সক্ষম করা
}
},
yAxis: {
title: {
text: 'Sales'
}
},
series: [{
name: 'Sales',
data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120]
}]
});
</script>
</body>
</html>
এই উদাহরণে Zoom, Pan, এবং Scrollbar তিনটি অপশন একসাথে ব্যবহৃত হয়েছে।
উপসংহার
Highcharts এ Zoom, Pan, এবং Scroll অপশন যোগ করা সহজ এবং ইন্টারঅ্যাকটিভ চার্ট তৈরি করতে সহায়ক। এগুলো ব্যবহারকারীদের চার্টের নির্দিষ্ট অংশের উপর ফোকাস করতে এবং বড় ডেটাসেট বা টাইম সিরিজ ডেটা বিশ্লেষণ করতে সাহায্য করে। Zoom এবং Pan চার্টে ইন্টারঅ্যাকটিভিটিকে বৃদ্ধি করে, এবং Scrollbar বৃহত্তর ডেটা সেট দেখার জন্য একটি কার্যকরী টুল।
Read more
