DataTable এবং ArrayToDataTable ব্যবহার

Web Development - অ্যাঙ্গুলার গুগল চার্ট (Angular Google Charts) - Simple Chart তৈরি করা (Creating a Simple Chart) |

Google Charts API ব্যবহার করে ডেটা ভিজুয়ালাইজেশন করতে DataTable এবং arrayToDataTable দুটি গুরুত্বপূর্ণ কনসেপ্ট রয়েছে। এগুলি Google Charts-এ ডেটা সঞ্চয় এবং প্রদর্শনের জন্য ব্যবহৃত হয়।

DataTable কি?

DataTable হলো Google Charts এর একটি ডেটা স্ট্রাকচার যা চার্টে ব্যবহৃত ডেটা সংগঠিত এবং ব্যবস্থাপনা করার জন্য ডিজাইন করা হয়েছে। এটি একটি টেবিলের মতো, যেখানে রো (পঙক্তি) এবং কলাম থাকে, এবং আপনি ডেটাকে বিভিন্ন ধরনের ফরম্যাটে পরিচালনা করতে পারেন।

Google Charts API-তে, DataTable ব্যবহার করে আপনি ডেটার স্ট্রাকচার নির্ধারণ করতে পারেন, এবং এটি চার্ট তৈরির জন্য প্রয়োজনীয় ডেটা হিসেবে ব্যবহৃত হয়।

arrayToDataTable কি?

arrayToDataTable একটি ফাংশন যা JavaScript অ্যারে (Array) থেকে DataTable তৈরি করে। এটি সাধারণত ডেটাকে array আকারে নিয়ে তা DataTable ফরম্যাটে রূপান্তর করার জন্য ব্যবহৃত হয়। এই ফাংশনটি Google Charts এর google.visualization.arrayToDataTable() এর মাধ্যমে ডেটা কোয়ালিটি এবং মান ঠিকঠাক রেখে DataTable তে রূপান্তর করতে সাহায্য করে।

arrayToDataTable এর ব্যবহার

arrayToDataTable ফাংশনটি একটি সাধারণ অ্যারে গ্রহণ করে এবং তা একটি Google Chart এর জন্য DataTable এ রূপান্তর করে। এটি চারটি গুরুত্বপূর্ণ পদক্ষেপ অনুসরণ করে:

ডেটা একটি অ্যারে আকারে সংগ্রহ করা হয়।
arrayToDataTable ফাংশন ব্যবহার করে সেই অ্যারেকে DataTable-এ রূপান্তর করা হয়।
রূপান্তরিত DataTable-টি Google Chart এ ব্যবহার করা হয়।

ArrayToDataTable উদাহরণ

ধরা যাক, আমরা একটি Pie Chart তৈরি করতে চাই, যেখানে কিছু সাধারণ তথ্য থাকবে। আমরা অ্যারে (Array) আকারে ডেটা দেব এবং তা arrayToDataTable ফাংশনের মাধ্যমে DataTable এ রূপান্তর করব।

1. DataTable এবং arrayToDataTable ব্যবহার করে Pie Chart তৈরি

`app.component.ts` ফাইল:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Google Charts - DataTable Example';

  // Chart Type: Pie Chart
  chartType = 'PieChart';

  // Chart Data (এটি অ্যারে আকারে ডেটা)
  chartData = [
    ['Task', 'Hours per Day'],
    ['Work', 8],
    ['Eat', 2],
    ['Commute', 2],
    ['Watch TV', 2],
    ['Sleep', 8]
  ];

  // Chart Options
  chartOptions = {
    title: 'My Daily Activities',
    pieHole: 0.4,  // Doughnut Style
    width: 600,
    height: 400
  };
}

`app.component.html` ফাইল:

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

<!-- Google Chart কম্পোনেন্ট -->
<google-chart 
  [type]="chartType" 
  [data]="chartData" 
  [options]="chartOptions">
</google-chart>

এখানে, chartData একটি অ্যারে হিসেবে ডেটা প্রদান করা হয়েছে। এই ডেটা আমরা arrayToDataTable ফাংশন ব্যবহার করে Google Chart DataTable এ রূপান্তর করব।

arrayToDataTable ফাংশন ব্যবহার

যদিও আমাদের উদাহরণে সরাসরি অ্যারে ব্যবহার করা হয়েছে, যদি আপনি google.visualization.arrayToDataTable() ব্যবহার করতে চান, তাহলে এটি এমনভাবে দেখতে হবে:

google.charts.load('current', {'packages':['corechart', 'pie']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Task', 'Hours per Day'],
    ['Work', 8],
    ['Eat', 2],
    ['Commute', 2],
    ['Watch TV', 2],
    ['Sleep', 8]
  ]);

  var options = {
    title: 'My Daily Activities',
    pieHole: 0.4
  };

  var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
  chart.draw(data, options);
}

এখানে, arrayToDataTable ফাংশনটি অ্যারে ডেটা নেবে এবং তা Google Chart এর DataTable ফরম্যাটে রূপান্তর করবে, যার পরে সেটি চার্টে রেন্ডার হবে।

HTML:

<div id="piechart_3d" style="width: 900px; height: 500px;"></div>

Chart Data কাস্টমাইজেশন

DataTable এর সাথে আপনি ডেটা কাস্টমাইজ করতে পারেন। আপনি যদি ডেটার নতুন ভ্যালু বা কলাম যোগ করতে চান, তবে সেটা DataTable-এ যুক্ত করা যাবে। উদাহরণস্বরূপ:

var data = google.visualization.arrayToDataTable([
  ['Task', 'Hours per Day', 'Percentage'],
  ['Work', 8, 40],
  ['Eat', 2, 10],
  ['Commute', 2, 10],
  ['Watch TV', 2, 10],
  ['Sleep', 8, 40]
]);

এখানে, আমরা একটি নতুন Percentage কলাম যুক্ত করেছি। এখন, আপনি এই নতুন কলামটিকে চার্টে প্রদর্শন করতে পারেন।