Highcharts এ dynamic data changes এবং smooth transitions তৈরি করা অত্যন্ত সহজ। যখন আপনার চার্টে ডেটা পরিবর্তন হয়, তখন আপনি smooth transitions বা animated updates ব্যবহার করতে পারেন, যা ব্যবহারকারীদের জন্য একটি চমৎকার ভিজ্যুয়াল অভিজ্ঞতা প্রদান করে। এই প্রক্রিয়া চART এর বিভিন্ন উপাদান যেমন লাইন, বার বা সেগমেন্টের মধ্যে অ্যানিমেটেড পরিবর্তন তৈরি করতে সহায়ক।
Smooth Transitions এর জন্য Highcharts ব্যবহার করা
Highcharts এ smooth transitions বা animated updates তৈরি করতে chart.update(), series.update(), এবং data.update() এর মতো ফাংশন ব্যবহার করা হয়। আপনি যখন কোনো ডেটা বা সিরিজ পরিবর্তন করেন, তখন এই ফাংশনগুলি অটোমেটিক্যালি অ্যানিমেশন সহ সেই পরিবর্তনগুলো রেন্ডার করবে।
উদাহরণ: Dynamic Data Changes with Smooth Transitions
এখানে একটি লাইন চার্ট তৈরি করা হয়েছে, যেখানে ডেটা পরিবর্তন করার জন্য button ব্যবহার করা হয়েছে এবং অ্যানিমেশন সহ ডেটা আপডেট হবে।
<!DOCTYPE html>
<html>
<head>
<title>Highcharts Smooth Transitions</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 100%; height: 400px;"></div>
<button onclick="updateData()">ডেটা পরিবর্তন করুন</button>
<script>
var chart = Highcharts.chart('container', {
chart: {
type: 'line',
animation: true // অ্যানিমেশন চালু করা
},
title: {
text: 'সপ্তাহের বিক্রয়'
},
xAxis: {
categories: ['সোম', 'মঙ্গল', 'বুধ', 'বৃহস্পতিবার', 'শুক্রবার', 'শনিবার', 'রবিবার']
},
yAxis: {
title: {
text: 'বিক্রয় (Sales)'
}
},
series: [{
name: 'বিক্রি',
data: [10, 20, 30, 40, 50, 60, 70]
}]
});
function updateData() {
// নতুন ডেটা সেট
var newData = [15, 25, 35, 45, 55, 65, 75];
// ডেটা আপডেট করা এবং অ্যানিমেশন সহ রেন্ডার করা
chart.series[0].setData(newData, true); // true নির্দেশ দেয় অ্যানিমেশন করার জন্য
}
</script>
</body>
</html>
ব্যাখ্যা:
- Chart Initialization: প্রথমে একটি লাইন চার্ট তৈরি করা হয়েছে, যেখানে ডেটা সেটের মাধ্যমে সপ্তাহের বিক্রয় দেখানো হচ্ছে।
- Smooth Transitions:
setData()ফাংশনটি ব্যবহার করা হয়েছে যা পুরনো ডেটাকে নতুন ডেটা দ্বারা প্রতিস্থাপন করে এবং smooth transition এর মাধ্যমে পরিবর্তন প্রক্রিয়া দেখায়। দ্বিতীয় প্যারামিটার হিসেবেtrueদেওয়া হলে এটি অ্যানিমেশন সক্রিয় করবে। - Button for Data Change:
updateData()ফাংশনটি একটি বোতনের মাধ্যমে কল করা হয়, যা ডেটা পরিবর্তন করে এবং অ্যানিমেটেড আপডেট প্রদর্শন করে।
Highcharts এ Smooth Transitions এর অন্যান্য বৈশিষ্ট্য
1. Chart Animation
Highcharts এর chart.animation অপশন দ্বারা আপনি চার্টের প্রতিটি পরিবর্তনের সময় অ্যানিমেশন সক্রিয় করতে পারেন। উদাহরণস্বরূপ, যখন আপনি নতুন সিরিজ যোগ করবেন বা সিরিজ আপডেট করবেন, তখন সেগুলোর পরিবর্তন স্লো অ্যানিমেশন সহ প্রদর্শিত হবে।
chart.update({
chart: {
animation: {
duration: 1000 // অ্যানিমেশন সময় (মিলিসেকেন্ড)
}
}
});
2. Series Animation
আপনি সিরিজের জন্যও অ্যানিমেশন সেট করতে পারেন, যেমন সিরিজের ডেটা পরিবর্তন বা নতুন সিরিজ যুক্ত করার সময় সেগুলোর জন্য অ্যানিমেশন ব্যবহার করা।
chart.series[0].update({
animation: {
duration: 500
}
});
3. Custom Transitions
Highcharts এ আপনি custom animations বা transitions তৈরি করতে পারেন। উদাহরণস্বরূপ, আপনি setInterval() বা requestAnimationFrame() এর মাধ্যমে আপনার চার্টের ডেটা পরিবর্তন করতে পারেন এবং এতে একটি ম্যানুয়াল অ্যানিমেশন প্রক্রিয়া তৈরি করতে পারেন।
var i = 0;
var data = [10, 20, 30, 40, 50, 60, 70];
setInterval(function() {
i++;
if (i > data.length - 1) {
i = 0;
}
chart.series[0].addPoint(data[i], true, true); // নতুন পয়েন্ট অ্যাড করা এবং অ্যানিমেশন ব্যবহার করা
}, 1000);
4. Updating Chart Dynamically
Highcharts এ আপনি ডেটা আপডেট করতে পারেন যে কোন সময়, যেমন API থেকে ডেটা আনা, বা ইউজারের ইনপুট থেকে ডেটা পরিবর্তন করা। chart.update() বা series.update() ব্যবহার করে আপনি এই ধরনের ডেটা পরিবর্তন ও অ্যানিমেশন সহ রেন্ডার করতে পারেন।
উপসংহার
Smooth transitions Highcharts এ ডেটার পরিবর্তন প্রক্রিয়াকে আরো আকর্ষণীয় এবং ব্যবহারকারীর জন্য আনন্দদায়ক করে তোলে। অ্যানিমেশন ব্যবহার করে আপনি আপনার চার্টের ভিজ্যুয়াল কন্ট্রোল বাড়াতে পারেন এবং ব্যবহারকারীদেরকে ডেটার মধ্যে পরিবর্তন দেখে আরো সহজভাবে বুঝতে সহায়ক করতে পারেন। Dynamic data changes এর জন্য setData() এবং update() ফাংশন ব্যবহার করে, আপনি সুন্দরভাবে অ্যানিমেটেড ডেটা পরিবর্তন করতে পারেন।
Read more
