Simple Chart তৈরি করা (Creating a Simple Chart)

Google Charts API এর সাহায্যে একটি সিম্পল চার্ট তৈরি করা খুবই সহজ। এখানে আমরা একটি সাধারণ Pie Chart তৈরি করব এবং Angular অ্যাপ্লিকেশনে সেটি প্রদর্শন করব। ধাপে ধাপে পুরো প্রক্রিয়া বর্ণনা করা হলো।

Step 1: Angular প্রজেক্ট তৈরি করা

প্রথমে একটি নতুন Angular প্রজেক্ট তৈরি করুন (যদি ইতিমধ্যে থাকে, তাহলে সেটি ব্যবহার করতে পারেন):

ng new google-charts-demo
cd google-charts-demo

Step 2: angular-google-charts লাইব্রেরি ইন্সটল করা

Google Charts লাইব্রেরি ব্যবহার করতে angular-google-charts প্যাকেজটি ইন্সটল করতে হবে। এর জন্য নিচের কমান্ডটি ব্যবহার করুন:

npm install angular-google-charts

এটি ইন্সটল হওয়ার পর angular-google-charts আপনার node_modules ফোল্ডারে যুক্ত হয়ে যাবে।

Step 3: GoogleChartsModule ইমপোর্ট করা

এখন, GoogleChartsModule আপনার Angular অ্যাপ্লিকেশনে ইমপোর্ট করতে হবে। এর জন্য app.module.ts ফাইলে নিম্নলিখিত কোডটি যোগ করুন:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { GoogleChartsModule } from 'angular-google-charts'; // GoogleChartsModule ইমপোর্ট

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    GoogleChartsModule // এখানে GoogleChartsModule যোগ করুন
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 4: কম্পোনেন্টে Google Chart ব্যবহার করা

এখন, আমরা একটি Pie Chart তৈরি করব। app.component.ts ফাইলে ডেটা এবং অপশন কনফিগার করতে হবে।

app.component.ts:

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

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

  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
    pieHole: 0.4,  // Doughnut Style
    width: 600,
    height: 400
  }; // Chart Options
}

Step 5: HTML ফাইলে Chart রেন্ডার করা

এখন, app.component.html ফাইলে চার্ট রেন্ডার করতে হবে। এখানে আমরা google-chart কম্পোনেন্ট ব্যবহার করব।

app.component.html:

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

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

Step 6: অ্যাপ্লিকেশন রান করা

এখন, Angular অ্যাপ্লিকেশন চালানোর জন্য নিচের কমান্ডটি ব্যবহার করুন:

ng serve

এটি ডিফল্টভাবে অ্যাপ্লিকেশনটি http://localhost:4200 এ রান করবে। ব্রাউজারে গিয়ে আপনি আপনার Pie Chart দেখতে পারবেন।

সারাংশ

এই প্রক্রিয়াতে আমরা একটি সিম্পল Pie Chart তৈরি করেছি এবং Angular অ্যাপে সেটি ইন্টিগ্রেট করেছি। আমরা angular-google-charts লাইব্রেরি ব্যবহার করে সহজে Google Charts এর মাধ্যমে ডেটা ভিজুয়ালাইজেশন তৈরি করেছি। ChartOptions এবং chartData কাস্টমাইজ করে আপনি যে কোনো ধরনের চার্ট তৈরি করতে পারেন। Google Charts API এর সাহায্যে আপনি ইন্টারঅ্যাকটিভ এবং কাস্টমাইজড চার্ট তৈরি করতে পারবেন।

Google Charts ব্যবহার করে প্রথমবারের মতো একটি সিম্পল চার্ট তৈরি করা খুবই সহজ। নিচে ধাপে ধাপে প্রক্রিয়া বর্ণনা করা হলো যাতে আপনি Angular অ্যাপ্লিকেশন ব্যবহার করে প্রথম Google Chart তৈরি করতে পারেন।

Step 1: Angular প্রজেক্ট তৈরি করা

প্রথমে একটি নতুন Angular প্রজেক্ট তৈরি করুন (যদি আপনার আগে থেকেই কোনো প্রজেক্ট থাকে, তবে সেটি ব্যবহার করতে পারেন)।

ng new google-charts-demo
cd google-charts-demo

Step 2: angular-google-charts লাইব্রেরি ইন্সটল করা

Google Charts API ব্যবহার করতে angular-google-charts প্যাকেজটি ইন্সটল করতে হবে। ইন্সটল করার জন্য নিচের কমান্ডটি ব্যবহার করুন:

npm install angular-google-charts

এটি ইনস্টল হওয়ার পর angular-google-charts লাইব্রেরি আপনার node_modules ফোল্ডারে যুক্ত হয়ে যাবে।

Step 3: GoogleChartsModule ইমপোর্ট করা

এখন, Angular অ্যাপ্লিকেশনে GoogleChartsModule ব্যবহার করতে app.module.ts ফাইলে এটি ইমপোর্ট করুন:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { GoogleChartsModule } from 'angular-google-charts'; // GoogleChartsModule ইমপোর্ট

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    GoogleChartsModule // এখানে GoogleChartsModule যোগ করুন
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 4: কম্পোনেন্টে Google Chart তৈরি করা

এখন, আমরা একটি Pie Chart তৈরি করব। এটি করার জন্য, app.component.ts ফাইলে ডেটা এবং অপশন কনফিগার করতে হবে।

app.component.ts ফাইল:

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

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

  // 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 (0.4 means hole size)
    width: 600,
    height: 400
  };
}

এখানে, chartType হলো 'PieChart', এবং chartData হলো একটি অ্যারে যা বিভিন্ন তথ্য প্রদর্শন করবে। chartOptions দিয়ে চার্টের বিভিন্ন কাস্টমাইজেশন সেট করা হয়েছে, যেমন title, pieHole (ডোঘনাট স্টাইলের জন্য), এবং চার্টের width এবং height।

Step 5: HTML ফাইলে Chart রেন্ডার করা

এখন, app.component.html ফাইলে Google Chart রেন্ডার করার জন্য নিচের কোডটি যোগ করুন:

app.component.html ফাইল:

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

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

এখানে, google-chart কম্পোনেন্ট ব্যবহার করে আমরা আমাদের Pie Chart রেন্ডার করেছি।

Step 6: অ্যাপ্লিকেশন চালানো

এখন Angular অ্যাপ্লিকেশনটি চালাতে নিচের কমান্ডটি ব্যবহার করুন:

ng serve

এটি ডিফল্টভাবে অ্যাপ্লিকেশনটি http://localhost:4200 এ রান করবে। আপনার ব্রাউজারে গিয়ে আপনি আপনার প্রথম Google Pie Chart দেখতে পাবেন।

সারাংশ

এভাবে, আমরা Angular এর মধ্যে Google Charts ব্যবহার করে একটি সিম্পল Pie Chart তৈরি করেছি। angular-google-charts লাইব্রেরি ব্যবহার করে আপনি সহজেই Google Charts API ইন্টিগ্রেট করতে পারেন এবং ডেটার ভিজুয়ালাইজেশন করতে পারেন। এই প্রক্রিয়াতে আপনি বিভিন্ন ধরনের চার্ট তৈরি করতে পারবেন, যেমন Line Chart, Bar Chart, Area Chart, Pie Chart ইত্যাদি।

Google Charts API ব্যবহার করে আপনি বিভিন্ন ধরনের চার্ট তৈরি করতে পারেন এবং ডেটা বাইন্ডিংয়ের মাধ্যমে চার্টে প্রদর্শিত তথ্য পরিচালনা করতে পারেন। এখানে আমরা Chart Type এবং Data Binding এর ভূমিকা এবং কিভাবে এগুলি ব্যবহার করতে হয় তা আলোচনা করব।

Chart Type

Google Charts API-এ Chart Type দ্বারা আপনি যে ধরনের চার্ট তৈরি করবেন তা নির্ধারণ করা হয়। বিভিন্ন ধরনের চার্ট বিভিন্ন প্রয়োজনে ব্যবহার করা হয়। এখানে কিছু জনপ্রিয় Chart Types দেওয়া হলো:

1. Pie Chart (পাই চার্ট)

Pie Chart মূলত ডেটার একটি অংশের তুলনা দেখানোর জন্য ব্যবহৃত হয়। এটি সাধারণত শতাংশের ভিত্তিতে ডেটা দেখায়।

chartType = 'PieChart';

2. Bar Chart (বার চার্ট)

Bar Chart সাধারণত বিভিন্ন ক্যাটেগরি বা গ্রুপের মধ্যে তুলনা করতে ব্যবহৃত হয়, যেখানে প্রতিটি ক্যাটেগরি একটি বার দ্বারা উপস্থাপিত হয়।

chartType = 'BarChart';

3. Line Chart (লাইন চার্ট)

Line Chart সাধারণত সময়ের সাথে ডেটার পরিবর্তন বা প্রবণতা প্রদর্শনের জন্য ব্যবহৃত হয়।

chartType = 'LineChart';

4. Column Chart (কলাম চার্ট)

Column Chart Bar Chart এর মতো, তবে এটি প্রতিটি তুলনা কলামের আকারে প্রদর্শিত হয়।

chartType = 'ColumnChart';

5. Area Chart (এলাকা চার্ট)

Area Chart লাইন চার্টের মতো, তবে এখানে লাইনটির নিচের অংশ রঙিন থাকে এবং একটি ভলিউমের ধারণা দেয়।

chartType = 'AreaChart';

6. Combo Chart (কোম্বো চার্ট)

Combo Chart একাধিক চার্টের সংমিশ্রণ হতে পারে। যেমন একটি চার্টে বার এবং লাইন একসাথে প্রদর্শন করা হয়।

chartType = 'ComboChart';

7. Bubble Chart (বাবল চার্ট)

Bubble Chart প্রতিটি ডেটা পয়েন্টকে একটি বুদ্বুদ দ্বারা উপস্থাপন করে, যেখানে বুদ্বুদটির আকার এবং রঙ অতিরিক্ত ডেটা বা পরিমাপ তুলে ধরে।

chartType = 'BubbleChart';

8. Gantt Chart (গ্যান্ট চার্ট)

Gantt Chart প্রজেক্ট ম্যানেজমেন্ট এবং সময়সূচী প্রদর্শনের জন্য ব্যবহৃত হয়।

chartType = 'Gantt';

Data Binding

Data Binding একটি প্রক্রিয়া যা ডেটা এবং ইউআই (User Interface) এর মধ্যে যোগাযোগ তৈরি করে। Angular এর মাধ্যমে Google Charts এর ডেটা বাইন্ডিং খুবই সহজ। Google Charts API তে Data Binding এর মাধ্যমে আপনি ডেটা এবং চার্টের মধ্যে সম্পর্ক স্থাপন করতে পারেন। Angular এ ডেটা বাইন্ডিংয়ের মাধ্যমে ডেটা পরিবর্তন হলে তা চার্টে স্বয়ংক্রিয়ভাবে প্রতিফলিত হয়।

Data Binding এর উদাহরণ

ধরা যাক, আমরা একটি Pie Chart তৈরি করছি, যেখানে ডেটা chartData অ্যারে থেকে আসে এবং আমাদের chartType এবং chartOptions কাস্টমাইজ করা থাকে।

1. Component ফাইল (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 with Data Binding';

  // Chart Type
  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
  };

  // ডেটা পরিবর্তন করার ফাংশন
  updateChartData() {
    this.chartData = [
      ['Task', 'Hours per Day'],
      ['Work', 6],
      ['Eat', 3],
      ['Commute', 2],
      ['Watch TV', 1],
      ['Sleep', 12]
    ];
  }
}

2. HTML ফাইল (app.component.html):

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

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

<!-- একটি বাটন যা ডেটা আপডেট করবে -->
<button (click)="updateChartData()">Update Chart Data</button>

এখানে, chartData হচ্ছে যে ডেটা চার্টে প্রদর্শিত হবে, এবং chartType ও chartOptions হচ্ছে চার্টের কাস্টমাইজেশন।

যখন updateChartData() ফাংশনটি কল করা হবে, তখন chartData অ্যারে পরিবর্তন হবে এবং নতুন ডেটা চার্টে স্বয়ংক্রিয়ভাবে প্রদর্শিত হবে।

Data Binding এর প্রকারভেদ

1. One-way Data Binding: ডেটা শুধুমাত্র একদিকে প্রবাহিত হয় (যেমন: কম্পোনেন্ট থেকে টেমপ্লেটে)।

   উদাহরণ:

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

2. Two-way Data Binding: ডেটা দুটি দিকে প্রবাহিত হয় (কম্পোনেন্ট থেকে টেমপ্লেটে এবং টেমপ্লেট থেকে কম্পোনেন্টে)।

   উদাহরণ:

   <input [(ngModel)]="title">
   

Chart Data পরিবর্তন এবং Update

Angular তে ডেটা বাইন্ডিংয়ের মাধ্যমে আপনি ডেটা পরিবর্তন করে তা সোজা চার্টে রিফ্লেক্ট করতে পারেন। যেমন একটি বোতাম ক্লিকের মাধ্যমে ডেটা পরিবর্তন করা:

updateChartData() {
  this.chartData = [
    ['Task', 'Hours per Day'],
    ['Work', 6],
    ['Eat', 3],
    ['Commute', 2],
    ['Watch TV', 1],
    ['Sleep', 12]
  ];
}

এটি করলে, Pie Chart-এ স্বয়ংক্রিয়ভাবে নতুন ডেটা প্রদর্শিত হবে।

সারাংশ

Chart Type এবং Data Binding এর মাধ্যমে আপনি Google Charts API তে বিভিন্ন ধরনের চার্ট তৈরি করতে পারেন এবং ডেটাকে সহজেই পরিবর্তন করে তা চার্টে প্রতিফলিত করতে পারেন। Angular এর ডেটা বাইন্ডিংয়ের মাধ্যমে আপনি কম্পোনেন্টের ডেটা পরিবর্তন করলে তা স্বয়ংক্রিয়ভাবে টেমপ্লেটে এবং চার্টে প্রদর্শিত হয়। এটি ডেটা ভিজুয়ালাইজেশনের জন্য অত্যন্ত কার্যকরী এবং ইন্টারঅ্যাকটিভ উপায়।

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 এ রূপান্তর করে। এটি চারটি গুরুত্বপূর্ণ পদক্ষেপ অনুসরণ করে:

1. ডেটা একটি অ্যারে আকারে সংগ্রহ করা হয়।
2. arrayToDataTable ফাংশন ব্যবহার করে সেই অ্যারেকে DataTable-এ রূপান্তর করা হয়।
3. রূপান্তরিত 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 কলাম যুক্ত করেছি। এখন, আপনি এই নতুন কলামটিকে চার্টে প্রদর্শন করতে পারেন।

DataTable এবং ArrayToDataTable ব্যবহার করার সুবিধা

• Structure: DataTable একটি পরিষ্কার এবং সুসংগঠিত ডেটা স্ট্রাকচার প্রদান করে, যা বড় ডেটা সেটের জন্য উপযুক্ত।
• Performance: arrayToDataTable ফাংশনটি দ্রুত ডেটাকে Google Charts API এর জন্য প্রস্তুত করে।
• Flexibility: আপনি ডেটা সংগ্রহ করার পর বিভিন্নভাবে সেটি কাস্টমাইজ এবং ফরম্যাট করতে পারেন।

সারাংশ

DataTable এবং arrayToDataTable ব্যবহার করে আপনি Google Charts-এ ডেটা কাস্টমাইজ এবং ফরম্যাট করতে পারবেন। arrayToDataTable ফাংশনটি অ্যারে ডেটাকে DataTable ফরম্যাটে রূপান্তর করার জন্য ব্যবহৃত হয় এবং এটি সহজেই Google Chart এ রেন্ডার করা যায়। এটি Google Charts API এর সাথে ডেটা ব্যবস্থাপনা সহজ করে তোলে এবং ডেটা ভিজুয়ালাইজেশনকে আরও কার্যকরী করে।

Google Charts API-এ Chart Style এবং Layout Customization ব্যবহার করে আপনি চার্টের বিভিন্ন দিক কাস্টমাইজ করতে পারেন, যেমন রঙ, টাইটেল, অক্ষ (axis), লেজেন্ড, টুলটিপ, সাইজ এবং আরও অনেক কিছু। এই কাস্টমাইজেশনগুলি আপনার ডেটা ভিজুয়ালাইজেশনকে আরও কার্যকরী এবং আকর্ষণীয় করে তোলে।

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

Chart Style কাস্টমাইজেশন দ্বারা আপনি চার্টের বিভিন্ন উপাদান যেমন রঙ, ফন্ট, গ্রিডলাইন, অক্ষের স্টাইল ইত্যাদি কাস্টমাইজ করতে পারেন।

1. Title কাস্টমাইজেশন (Title Customization)

চার্টের টাইটেল পরিবর্তন করতে এবং সেটির স্টাইল কাস্টমাইজ করতে title অপশন ব্যবহার করা হয়।

chartOptions = {
  title: 'My Daily Activities', // Title
  titleTextStyle: {
    color: 'blue', // Title text color
    fontSize: 18, // Title text size
    bold: true, // Title text weight
    italic: true // Title text style
  }
};

2. Chart Width এবং Height কাস্টমাইজেশন

চার্টের আকার পরিবর্তন করতে আপনি width এবং height অপশন ব্যবহার করতে পারেন।

chartOptions = {
  width: 600,   // Chart width
  height: 400   // Chart height
};

3. Legend কাস্টমাইজেশন (Legend Customization)

চার্টের লেজেন্ডের পজিশন এবং স্টাইল কাস্টমাইজ করতে legend অপশন ব্যবহার করা হয়।

chartOptions = {
  legend: {
    position: 'top', // Legend position: top, bottom, left, right
    alignment: 'center', // Legend alignment: start, center, end
    textStyle: {
      color: 'black', // Legend text color
      fontSize: 14, // Legend text size
      fontName: 'Arial' // Legend text font
    }
  }
};

4. Colors কাস্টমাইজেশন

চার্টের বিভিন্ন উপাদানের রঙ কাস্টমাইজ করতে colors অপশন ব্যবহার করা হয়। এটি একাধিক রঙ গ্রহণ করতে পারে।

chartOptions = {
  colors: ['#FF5733', '#33FF57', '#3357FF'] // Chart colors
};

5. Tooltip কাস্টমাইজেশন

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

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

6. Axis কাস্টমাইজেশন (Axis Customization)

hAxis (horizontal axis) এবং vAxis (vertical axis) কাস্টমাইজ করার মাধ্যমে আপনি অক্ষের টাইটেল, লেবেল, গ্রিডলাইন এবং অন্যান্য স্টাইল কাস্টমাইজ করতে পারেন।

chartOptions = {
  hAxis: {
    title: 'Time', // Horizontal axis title
    minValue: 0, // Minimum value for horizontal axis
    textStyle: {
      color: 'green', // Axis text color
      fontSize: 12 // Axis text font size
    },
    gridlines: {
      color: 'lightgrey', // Gridlines color
      count: 5 // Number of gridlines
    }
  },
  vAxis: {
    title: 'Sales', // Vertical axis title
    textStyle: {
      color: 'red', // Axis text color
      fontSize: 14 // Axis text font size
    }
  }
};

7. Background Color কাস্টমাইজেশন

চার্টের ব্যাকগ্রাউন্ড রঙ পরিবর্তন করতে backgroundColor অপশন ব্যবহার করা হয়।

chartOptions = {
  backgroundColor: '#f2f2f2' // Background color of the chart
};

8. 3D Chart কাস্টমাইজেশন

অনেক ধরনের চার্টে 3D ভিউ তৈরি করা যায়। যেমন, PieChart, ColumnChart, BarChart-এ 3D কাস্টমাইজেশন করা যেতে পারে।

chartOptions = {
  is3D: true, // Enable 3D for the chart
  view: { min: 0, max: 10 }
};

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

Chart Layout কাস্টমাইজেশন দ্বারা আপনি চার্টের আঙ্গিক, অক্ষের বিন্যাস, এবং অন্যান্য উপাদান কাস্টমাইজ করতে পারেন।

9. Gridlines কাস্টমাইজেশন

গ্রিডলাইনগুলোকে কাস্টমাইজ করতে gridlines অপশন ব্যবহার করা হয়, যা চার্টের অক্ষের গ্রিডের জন্য উপযুক্ত।

chartOptions = {
  hAxis: {
    gridlines: {
      count: 4, // Set the number of gridlines
      color: '#e5e5e5', // Set gridline color
      width: 0.5 // Set gridline width
    }
  },
  vAxis: {
    gridlines: {
      color: '#e5e5e5',
      width: 0.5
    }
  }
};

10. Chart Title Positioning and Alignment

চার্টের টাইটেল এবং লেজেন্ডের পজিশন এবং এলাইনমেন্ট নিয়ন্ত্রণ করা যায়।

chartOptions = {
  title: 'Sales Overview',
  titlePosition: 'in', // 'in' or 'out' for title inside or outside the chart
  titleTextStyle: {
    fontSize: 16,
    color: '#000',
    bold: true
  },
  legend: {
    position: 'bottom',
    alignment: 'center' // Align legend text to center
  }
};

Chart Example with Full Customization

নিচে একটি Pie Chart উদাহরণ দেওয়া হলো, যেখানে বিভিন্ন কাস্টমাইজেশন অপশন ব্যবহৃত হয়েছে।

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
      }
    }
  };
}

HTML:

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

<google-chart 
  [type]="chartType" 
  [data]="chartData" 
  [options]="chartOptions">
</google-chart>

সারাংশ

Google Charts API-তে Chart Style এবং Layout Customization আপনাকে আপনার চার্টকে কাস্টমাইজ করার পুরো স্বাধীনতা দেয়। আপনি title, legend, colors, axis, gridlines, এবং অন্যান্য অপশন কাস্টমাইজ করে চার্টের স্টাইল এবং লেআউট পরিবর্তন করতে পারেন। এই কাস্টমাইজেশন আপনার ডেটা ভিজুয়ালাইজেশনকে আরও আকর্ষণীয় এবং ব্যবহারকারী-বান্ধব করে তোলে।