Highcharts ব্যবহার করে আপনি Custom Events তৈরি করতে পারেন, যা আপনাকে চার্টের ইন্টারঅ্যাকশনে আরও নিয়ন্ত্রণ ও কাস্টম ফাংশনালিটি যোগ করার সুযোগ দেয়। Custom Events এর মাধ্যমে, আপনি ব্যবহারকারীদের ইন্টারঅ্যাকশন যেমন ক্লিক, হোভারের উপর রেসপন্স, ডেটা পয়েন্টের পরিবর্তন ইত্যাদি পরিচালনা করতে পারেন। এটি আপনার চার্টকে আরও ইন্টারঅ্যাকটিভ এবং কার্যকরী করে তোলে।
Custom Events কীভাবে কাজ করে?
Highcharts এ Custom Events তৈরি করতে হলে আপনাকে JavaScript এবং Highcharts event handlers ব্যবহার করতে হবে। Highcharts এর মধ্যে বিভিন্ন ধরনের ইভেন্ট থাকে যেমন:
- click: চার্টে কোনো এলিমেন্ট বা পয়েন্টে ক্লিক করলে ইভেন্ট ট্রিগার হয়।
- mouseover: চার্টের উপর মাউস রেখে দিলে ইভেন্ট ট্রিগার হয়।
- load: চার্ট লোড হওয়ার পর ইভেন্ট ট্রিগার হয়।
আপনি এই ইভেন্টগুলো কাস্টমাইজ করতে পারেন এবং প্রয়োজন অনুযায়ী নতুন ইভেন্ট যোগ করতে পারেন।
Custom Event তৈরি এবং ব্যবহার করা
Highcharts এ Custom Events তৈরি করার জন্য, আপনাকে chart.events বা series.events এর মধ্যে ইভেন্ট কনফিগারেশন করতে হবে। এই ইভেন্টগুলোর মাধ্যমে আপনি ব্যবহারকারীর ইন্টারঅ্যাকশনের উপর ভিত্তি করে একটি ফাংশন কার্যকর করতে পারবেন।
উদাহরণ: ক্লিক ইভেন্ট
এই উদাহরণে, আমরা click ইভেন্ট ব্যবহার করব। যখন ব্যবহারকারী চার্টের কোনো পয়েন্টে ক্লিক করবে, তখন একটি কাস্টম ফাংশন ট্রিগার হবে।
<!DOCTYPE html>
<html>
<head>
<title>Highcharts Custom Event - Click</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: 'column',
events: {
click: function (event) {
alert('You clicked at: ' + event.xAxis[0].value + ', ' + event.yAxis[0].value);
}
}
},
title: {
text: 'Click Event Example'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
},
yAxis: {
title: {
text: 'Sales'
}
},
series: [{
name: 'Sales',
data: [10, 20, 30, 40, 50]
}]
});
</script>
</body>
</html>
এখানে, click ইভেন্টটি ব্যবহার করা হয়েছে। যখন ব্যবহারকারী চার্টের যে কোনো অংশে ক্লিক করবে, তখন তার X এবং Y ভ্যালু একটি পপ-আপের মাধ্যমে দেখানো হবে।
Mouseover ইভেন্ট
Highcharts এ mouseover ইভেন্ট ব্যবহার করে আপনি চার্টের উপর মাউস রাখলে বিশেষ কোনো অ্যাকশন কার্যকর করতে পারেন। এই ইভেন্টটি সাধারণত টুলটিপ বা ফোকাস ইফেক্টের জন্য ব্যবহার হয়।
উদাহরণ:
<!DOCTYPE html>
<html>
<head>
<title>Highcharts Custom Event - Mouseover</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',
events: {
mouseover: function () {
alert('Mouse is over the chart!');
}
}
},
title: {
text: 'Mouseover Event Example'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
},
yAxis: {
title: {
text: 'Sales'
}
},
series: [{
name: 'Sales',
data: [10, 20, 30, 40, 50]
}]
});
</script>
</body>
</html>
এখানে, যখন ব্যবহারকারী mouseover ইভেন্ট ট্রিগার করবে, তখন একটি পপ-আপ দেখা যাবে যা বার্তা দেবে "Mouse is over the chart!"।
Data Point Click Event
Data Point এর উপর ক্লিক করলে আপনি নির্দিষ্ট একটি ডেটা পয়েন্ট নিয়ে কাজ করতে পারেন, যেমন ডেটা বিশ্লেষণ বা ডেটার সাথে সম্পর্কিত কোনো অ্যাকশন কার্যকর করা।
উদাহরণ:
<!DOCTYPE html>
<html>
<head>
<title>Highcharts Custom Event - Data Point Click</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: 'column'
},
title: {
text: 'Data Point Click Event Example'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
},
yAxis: {
title: {
text: 'Sales'
}
},
series: [{
name: 'Sales',
data: [10, 20, 30, 40, 50],
events: {
click: function (event) {
var clickedPoint = event.point;
alert('You clicked on: ' + clickedPoint.category + ' with value ' + clickedPoint.y);
}
}
}]
});
</script>
</body>
</html>
এখানে, series.events.click ব্যবহার করা হয়েছে, যেখানে একটি নির্দিষ্ট ডেটা পয়েন্টে ক্লিক করলে তার category এবং value দেখানো হবে।
Custom Event Listener
আপনি Custom Event তৈরি করতে এবং সেই ইভেন্টের জন্য কাস্টম লিসেনার যোগ করতে পারেন। এই ক্ষেত্রে, আপনি আপনার নিজস্ব ইভেন্ট নাম ব্যবহার করে, ইভেন্ট ট্রিগার করতে পারবেন।
উদাহরণ:
<!DOCTYPE html>
<html>
<head>
<title>Highcharts Custom Event Listener</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 100%; height: 400px;"></div>
<script>
var chart = Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'Custom Event Example'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
},
yAxis: {
title: {
text: 'Sales'
}
},
series: [{
name: 'Sales',
data: [10, 20, 30, 40, 50]
}]
});
// Custom Event Listener
chart.container.addEventListener('customEvent', function() {
alert('Custom Event Triggered!');
});
// Trigger the custom event after 2 seconds
setTimeout(function() {
var event = new Event('customEvent');
chart.container.dispatchEvent(event);
}, 2000);
</script>
</body>
</html>
এই উদাহরণে, একটি customEvent তৈরি করা হয়েছে, যা 2 সেকেন্ড পর স্বয়ংক্রিয়ভাবে ট্রিগার হবে এবং একটি পপ-আপ দেখাবে "Custom Event Triggered!"।
উপসংহার
Highcharts এ Custom Events তৈরি এবং ব্যবহার করা অত্যন্ত সহজ এবং শক্তিশালী। আপনি click, mouseover, load, এবং অন্যান্য ইভেন্ট ব্যবহার করে আপনার চার্টকে আরও ইন্টারঅ্যাকটিভ ও কাস্টমাইজ করতে পারেন। এই ইভেন্টগুলো ব্যবহার করে আপনি ব্যবহারকারীর ইনপুট বা অন্যান্য ইন্টারঅ্যাকশনগুলির উপর ভিত্তি করে ফাংশনালিটি তৈরি করতে পারেন, যা আপনার চার্টের কার্যকারিতা বাড়ায়।
Read more
