Google Charts API ইন্টারঅ্যাকটিভ এবং ইউজার ফ্রেন্ডলি চার্ট তৈরিতে সহায়তা করে। এর মাধ্যমে, আপনি চার্টের বিভিন্ন উপাদানের সাথে ইউজারের ইন্টারঅ্যাকশন তৈরি করতে পারেন, যেমন হোভার, ক্লিক, জুম, ড্র্যাগ ইত্যাদি। এই ইন্টারঅ্যাকশনগুলো ইউজারের অভিজ্ঞতাকে উন্নত করে এবং ডেটা ভিজুয়ালাইজেশনকে আরও কার্যকরী করে তোলে।

Chart Interactivity:

Google Charts ইন্টারঅ্যাকটিভ ফিচার যেমন tooltip, click events, selection events, এবং hover effects সাপোর্ট করে, যা ব্যবহারকারীদের চার্টের সাথে সরাসরি যোগাযোগ করতে সহায়তা করে।

1. Tooltip Interactivity (টুলটিপ ইন্টারঅ্যাকশন)

Tooltip চার্টের উপরে হোভার করার সময় প্রদর্শিত হয়, যা অতিরিক্ত তথ্য দেখানোর জন্য ব্যবহৃত হয়। এটি ব্যবহারকারীর জন্য ডেটা আরও স্পষ্টভাবে উপস্থাপন করতে সহায়তা করে।

উদাহরণ:

chartOptions = {
  tooltip: {
    trigger: 'focus', // Tooltip trigger: focus, selection
    isHtml: true, // Enable HTML content in tooltip
    textStyle: {
      color: 'black', // Tooltip text color
      fontSize: 14 // Tooltip text size
    }
  }
};

এখানে, trigger অপশন দ্বারা আপনি নির্ধারণ করতে পারেন কবে টুলটিপটি প্রদর্শিত হবে—যেমন হোভার বা নির্বাচন (selection)।

2. Click Event Interactivity (ক্লিক ইভেন্ট ইন্টারঅ্যাকশন)

আপনি click event ব্যবহার করে চার্টে ক্লিক করার মাধ্যমে বিভিন্ন অ্যাকশন ট্রিগার করতে পারেন। এই ইন্টারঅ্যাকশনের মাধ্যমে ইউজারকে চার্টের ভিতরে ক্লিক করার পর কোনো নতুন তথ্য দেখানো বা কোনো অ্যাকশন শুরু করা যায়।

উদাহরণ:

chartOptions = {
  // Chart options
  tooltip: { trigger: 'selection' }
};

// Event Listener for click event
google.visualization.events.addListener(chart, 'select', function() {
  var selectedItem = chart.getSelection()[0];
  if (selectedItem) {
    var item = chartData.getValue(selectedItem.row, 0);
    alert('You selected: ' + item);
  }
});

এখানে, select ইভেন্ট ব্যবহার করে ইউজার যখন চার্টের একটি অংশে ক্লিক করবে, তখন একটি এলার্ট বা অন্য কোনো অ্যাকশন ট্রিগার হবে।

3. Selection Event Interactivity (সিলেকশন ইভেন্ট ইন্টারঅ্যাকশন)

Selection event ব্যবহারকারীদের চার্টের অংশ নির্বাচন করার সুযোগ দেয়। এই ইভেন্টের মাধ্যমে ইউজারের নির্বাচিত ডেটা বা অংশ নিয়ে অন্যান্য অ্যাকশন করা যায়।

উদাহরণ:

chartOptions = {
  selectionMode: 'multiple', // Allow multiple selection
};

// Selection event listener
google.visualization.events.addListener(chart, 'select', function() {
  var selectedItem = chart.getSelection()[0];
  if (selectedItem) {
    var item = chartData.getValue(selectedItem.row, 0);
    console.log('Selected item: ' + item);
  }
});

এখানে, getSelection() ফাংশনের মাধ্যমে ইউজার যে অংশে ক্লিক করেছে বা নির্বাচিত করেছে তার তথ্য পাওয়া যাবে।

4. Hover Effect (হোভার ইফেক্ট)

Hover effect দ্বারা ইউজার যখন চার্টের কোনো অংশে হোভার করবে, তখন সেই অংশের উপর কিছু অতিরিক্ত তথ্য দেখানো যাবে, যেমন রঙ পরিবর্তন বা ডেটার বিস্তারিত বিবরণ।

উদাহরণ:

chartOptions = {
  tooltip: {
    trigger: 'focus', // Show tooltip on hover
    isHtml: true, // Enable HTML content
    textStyle: {
      color: 'black', // Tooltip text color
      fontSize: 14 // Tooltip font size
    }
  }
};

এই কাস্টমাইজেশনের মাধ্যমে আপনি হোভার করার সময় চার্টের বিভিন্ন অংশে টুলটিপ বা অতিরিক্ত তথ্য দেখাতে পারবেন।

5. Zoom and Pan (জুম এবং প্যান)

Google Charts API কিছু চার্টে zoom এবং pan ফিচারও সাপোর্ট করে, বিশেষ করে Timeline Chart এবং Scatter Chart এ। এটি ব্যবহারকারীদের চার্টে ইনপুট বা ডেটা সেটের মধ্যে নেভিগেট করতে সহায়তা করে।

উদাহরণ:

chartOptions = {
  explorer: { actions: ['dragToZoom', 'rightClickToReset'], axis: 'horizontal', keepInBounds: true }
};

এখানে, explorer অপশন ব্যবহার করে আপনি জুম এবং প্যানিং ফিচার সক্ষম করতে পারেন, যা ব্যবহারকারীদের ডেটার মধ্যে গভীরভাবে অনুসন্ধান করতে সাহায্য করবে।

6. Animation Effects (এনিমেশন ইফেক্ট)

চার্টের প্রদর্শন এবং পরিবর্তনগুলোকে আরো আকর্ষণীয় করতে animation ব্যবহার করা যায়। এটি চার্টের লোডিং, ডেটা আপডেট, বা টাইটেল পরিবর্তন করার সময় এনিমেশন ইফেক্ট যোগ করতে পারে।

উদাহরণ:

chartOptions = {
  animation: {
    startup: true, // Animation starts when the chart is loaded
    easing: 'inAndOut', // Easing function for animation
    duration: 1000 // Animation duration in milliseconds
  }
};

এখানে, startup: true ব্যবহার করলে চার্ট লোড হওয়ার সময় এনিমেশন শুরু হবে।

Chart Interactivity Example

এখানে একটি পূর্ণাঙ্গ উদাহরণ দেওয়া হলো যেখানে একটি Bar Chart ব্যবহার করা হয়েছে এবং এতে click event, selection event, এবং tooltip সহ আরও কিছু ইন্টারঅ্যাকটিভ ফিচার যুক্ত করা হয়েছে।

app.component.ts ফাইল:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'Interactive Google Chart';
  
  chartType = 'BarChart'; // Chart Type
  chartData = [
    ['Year', 'Sales', 'Expenses'],
    ['2010', 1000, 400],
    ['2011', 1170, 460],
    ['2012', 660, 1120],
    ['2013', 1030, 540]
  ]; // Chart Data

  chartOptions = {
    title: 'Company Performance',
    hAxis: { title: 'Year' },
    vAxis: { title: 'Amount' },
    animation: {
      startup: true,
      easing: 'inAndOut',
      duration: 1000
    },
    tooltip: {
      trigger: 'focus', // Show tooltip on hover
      isHtml: true
    }
  };

  ngOnInit() {
    google.charts.load('current', { packages: ['corechart', 'bar'] });
    google.charts.setOnLoadCallback(this.drawChart.bind(this));
  }

  drawChart() {
    const data = google.visualization.arrayToDataTable(this.chartData);
    const chart = new google.visualization.BarChart(document.getElementById('chart_div'));
    
    google.visualization.events.addListener(chart, 'select', () => {
      const selection = chart.getSelection();
      if (selection.length > 0) {
        const item = selection[0];
        alert('You selected: ' + this.chartData[item.row + 1][0]);
      }
    });

    chart.draw(data, this.chartOptions);
  }
}

app.component.html ফাইল:

<h1>{{ title }}</h1>

<!-- Google Chart Component -->
<div id="chart_div" style="width: 900px; height: 500px;"></div>

এখানে, click event এবং tooltip ব্যবহার করা হয়েছে। ইউজার যখন চার্টের একটি অংশে ক্লিক করবে, তখন একটি এলার্ট প্রদর্শিত হবে।

সারাংশ

Chart Interactivity এবং User Interaction ব্যবহার করে Google Charts এর মাধ্যমে আপনি ইউজারদের জন্য আরও আকর্ষণীয় এবং ইন্টারঅ্যাকটিভ চার্ট তৈরি করতে পারেন। Tooltip, Click events, Selection events, Zoom, Animation, এবং Hover effects ব্যবহার করে আপনি ইউজারের সাথে চার্টের যোগাযোগকে আরও কার্যকরী এবং ইন্টারঅ্যাকটিভ করে তুলতে পারেন। এগুলি ডেটা ভিজুয়ালাইজেশনকে আরও গতিশীল এবং ব্যবহারকারী-বান্ধব করে তোলে।