Google Charts API-তে Tooltip এবং Animation দুটি শক্তিশালী কাস্টমাইজেশন অপশন। এগুলি ব্যবহার করে আপনি আপনার চার্টকে আরও ইন্টারঅ্যাকটিভ এবং আকর্ষণীয় করতে পারেন। Tooltip ব্যবহারকারীকে ডেটা পয়েন্টের উপর হোভার করলে অতিরিক্ত তথ্য প্রদান করে, আর Animation চার্টের প্রদর্শনকে মসৃণ এবং আকর্ষণীয় করে তোলে।
এখন চলুন দেখি Tooltip এবং Animation কাস্টমাইজ করার পদ্ধতি।
Tooltip হল একটি ইনফরমেশন বক্স যা চার্টের উপর হোভার করার সময় প্রদর্শিত হয়। এটি ব্যবহারকারীদের ডেটা পয়েন্টের সাথে সম্পর্কিত অতিরিক্ত তথ্য প্রদান করতে সহায়তা করে। Google Charts API তে আপনি tooltip কাস্টমাইজ করতে পারেন বিভিন্নভাবে যেমন তার trigger, textStyle, HTML ইত্যাদি।
'focus', 'selection', অথবা 'none'।true সেট করতে হবে।chartOptions = {
tooltip: {
trigger: 'focus', // Tooltip প্রদর্শন হবে যখন ইউজার একটি ডেটা পয়েন্টে ফোকাস করবে
isHtml: true, // Tooltip এ HTML সক্রিয়
textStyle: {
color: 'blue', // Tooltip text color
fontSize: 14, // Tooltip text size
bold: true // Tooltip text bold
},
showColorCode: true // Tooltip এ রঙের কোড দেখানো হবে
}
};
এখন আপনি HTML এর মাধ্যমে একটি টুলটিপ কাস্টমাইজ করতে পারেন:
chartOptions = {
tooltip: {
trigger: 'focus',
isHtml: true,
textStyle: {
color: 'green',
fontSize: 16
},
content: '<div style="color:red;">Custom Tooltip Content</div>' // Custom HTML in tooltip
}
};
Animation হল সেই ফিচার যা চার্ট লোড হওয়ার সময় বা ডেটা পরিবর্তনের সময় মসৃণ এফেক্ট প্রদান করে। এটি আপনার চার্টকে আরও আকর্ষণীয় এবং ব্যবহারকারী-বান্ধব করে তোলে। Google Charts API তে animation কাস্টমাইজ করার মাধ্যমে আপনি চার্টের startup এফেক্ট, duration, এবং easing নিয়ন্ত্রণ করতে পারেন।
true হয়, তবে এনিমেশন শুরু হবে চার্ট লোড হওয়ার সময়।'linear', 'inAndOut' বা 'out'।chartOptions = {
animation: {
startup: true, // Animation starts when the chart is loaded
easing: 'inAndOut', // Easing function for animation
duration: 1000 // Animation duration in milliseconds
}
};
এখানে, চার্ট লোড হওয়ার সময় এনিমেশন শুরু হবে এবং 'inAndOut' easing ফাংশন ব্যবহার করা হবে, যা অল্প সময়ের মধ্যে গতি বাড়িয়ে এবং কমিয়ে এনিমেশন করবে। এনিমেশনের জন্য সময়কাল হল 1000 মিলিসেকেন্ড (1 সেকেন্ড)।
updateChartData() {
this.chartData = [
['Task', 'Hours per Day'],
['Work', 6],
['Eat', 3],
['Commute', 2],
['Watch TV', 1],
['Sleep', 12]
];
this.chartOptions.animation = {
startup: true,
easing: 'out',
duration: 1500 // Longer duration for smooth animation
};
}
এখানে, ডেটা আপডেটের পর এনিমেশন 'out' easing ফাংশন সহ এবং 1500 মিলিসেকেন্ডের সময়কাল দিয়ে চালু হবে।
এখন চলুন একটি পূর্ণাঙ্গ উদাহরণ দেখি যেখানে Tooltip এবং Animation কাস্টমাইজেশন একসাথে ব্যবহার করা হচ্ছে।
app.component.ts:import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Customized Google Chart';
chartType = 'PieChart'; // Chart Type
chartData = [
['Task', 'Hours per Day'],
['Work', 8],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 8]
]; // Chart Data
chartOptions = {
title: 'My Daily Activities', // Title
titleTextStyle: {
color: 'blue', // Title text color
fontSize: 18, // Title font size
bold: true // Title bold
},
pieHole: 0.4, // Doughnut Style
width: 600,
height: 400,
colors: ['#FF5733', '#33FF57', '#3357FF'], // Custom Colors
legend: {
position: 'top',
alignment: 'center',
textStyle: {
color: 'black', // Legend text color
fontSize: 14 // Legend font size
}
},
tooltip: {
trigger: 'focus', // Tooltip trigger
isHtml: true, // Enable HTML in tooltip
textStyle: {
color: 'black',
fontSize: 14
}
},
animation: {
startup: true,
easing: 'inAndOut',
duration: 1000 // Animation duration in milliseconds
}
};
}
app.component.html:<h1>{{ title }}</h1>
<google-chart
[type]="chartType"
[data]="chartData"
[options]="chartOptions">
</google-chart>
Google Charts API-তে Tooltip এবং Animation কাস্টমাইজেশন খুবই গুরুত্বপূর্ণ ফিচার। আপনি tooltip এর মাধ্যমে ডেটার বিস্তারিত তথ্য প্রদর্শন করতে পারেন, এবং animation এর মাধ্যমে চার্ট লোড হওয়ার সময় সুন্দর মসৃণ এফেক্ট যোগ করতে পারেন। এগুলি চার্টের ব্যবহারকারীর অভিজ্ঞতা উন্নত করে এবং ডেটার সঙ্গে ইন্টারঅ্যাকশন আরো আকর্ষণীয় করে তোলে।
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
