Chart Data Export করা (CSV, Excel)

Google Charts API ব্যবহার করে আপনি আপনার চার্টের ডেটা CSV বা Excel ফরম্যাটে এক্সপোর্ট করতে পারেন। যদিও Google Charts API সরাসরি এক্সপোর্ট করার ফিচার অফার করে না, তবে আপনি কিছু অতিরিক্ত কোড ব্যবহার করে চার্টের ডেটা CSV বা Excel ফরম্যাটে রপ্তানি করতে পারেন।

এখানে, আমরা CSV এবং Excel ফরম্যাটে ডেটা এক্সপোর্ট করার জন্য কাস্টম ফাংশন তৈরি করব।

1. CSV Export (CSV ডেটা এক্সপোর্ট)

CSV ফরম্যাটে ডেটা এক্সপোর্ট করতে, আমরা JavaScript এর মাধ্যমে CSV ফাইল তৈরি করে সেটি ইউজারের ডাউনলোড করার জন্য প্রস্তুত করব।

CSV Export উদাহরণ

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 - Export CSV';

  chartType = 'PieChart'; // Chart Type: PieChart
  chartData = [
    ['Task', 'Hours per Day'],
    ['Work', 8],
    ['Eat', 2],
    ['Commute', 2],
    ['Watch TV', 2],
    ['Sleep', 8]
  ]; // Initial Data

  chartOptions = {
    title: 'My Daily Activities',
    pieHole: 0.4,
    width: 600,
    height: 400
  };

  // Function to Export Chart Data as CSV
  exportCSV() {
    let csvContent = "data:text/csv;charset=utf-8,";
    this.chartData.forEach((rowArray) => {
      let row = rowArray.join(",");
      csvContent += row + "\r\n"; // Add each row to CSV content
    });

    // Create a link to download the CSV
    const encodedUri = encodeURI(csvContent);
    const link = document.createElement("a");
    link.setAttribute("href", encodedUri);
    link.setAttribute("download", "chart_data.csv");
    document.body.appendChild(link);
    link.click(); // Simulate a click to download the file
  }
}

app.component.html ফাইল:

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

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

<!-- Button to Export Data as CSV -->
<button (click)="exportCSV()">Export as CSV</button>

এখানে:

• exportCSV() ফাংশনটি chartData অ্যারের প্রতিটি রো নিয়ে একটি CSV ফাইল তৈরি করে এবং সেটি ডাউনলোড করার জন্য প্রস্তুত করে।
• encodedUri এবং link ব্যবহার করে ডাউনলোড ফাইল তৈরি করা হয়।

CSV Export Result:

• যখন ইউজার "Export as CSV" বাটনে ক্লিক করবেন, তখন ডেটা একটি CSV ফাইল হিসেবে ডাউনলোড হবে।

2. Excel Export (Excel ডেটা এক্সপোর্ট)

Excel ফরম্যাটে ডেটা এক্সপোর্ট করতে, আমরা SheetJS নামক একটি লাইব্রেরি ব্যবহার করতে পারি। এটি JavaScript লাইব্রেরি যা Excel ফাইল তৈরি এবং ডাউনলোড করার জন্য ব্যবহৃত হয়।

Excel Export উদাহরণ

প্রথমে SheetJS লাইব্রেরি ইন্সটল করতে হবে:

npm install xlsx

app.component.ts ফাইল (Excel Export):

import { Component } from '@angular/core';
import * as XLSX from 'xlsx';

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

  chartType = 'PieChart'; // Chart Type: PieChart
  chartData = [
    ['Task', 'Hours per Day'],
    ['Work', 8],
    ['Eat', 2],
    ['Commute', 2],
    ['Watch TV', 2],
    ['Sleep', 8]
  ]; // Initial Data

  chartOptions = {
    title: 'My Daily Activities',
    pieHole: 0.4,
    width: 600,
    height: 400
  };

  // Function to Export Chart Data as Excel
  exportExcel() {
    const ws: XLSX.WorkSheet = XLSX.utils.aoa_to_sheet(this.chartData);  // Convert data to sheet
    const wb: XLSX.WorkBook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, 'Chart Data');  // Append sheet to workbook

    // Save the workbook as Excel file
    XLSX.writeFile(wb, 'chart_data.xlsx');
  }
}

app.component.html ফাইল:

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

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

<!-- Button to Export Data as Excel -->
<button (click)="exportExcel()">Export as Excel</button>

এখানে:

• XLSX.utils.aoa_to_sheet() ফাংশন ব্যবহার করে chartData কে Excel শীট ফরম্যাটে রূপান্তর করা হচ্ছে।
• XLSX.writeFile() ফাংশন ব্যবহার করে সেই ডেটা Excel ফাইল হিসেবে ডাউনলোড করা হচ্ছে।

Excel Export Result:

• যখন ইউজার "Export as Excel" বাটনে ক্লিক করবেন, তখন ডেটা একটি Excel ফাইল হিসেবে ডাউনলোড হবে।

সারাংশ

CSV এবং Excel ফরম্যাটে Google Charts থেকে ডেটা এক্সপোর্ট করার জন্য আমরা:

• CSV Export এর জন্য JavaScript দিয়ে সিম্পল CSV ফাইল তৈরি করেছি এবং সেটি ডাউনলোড করার ব্যবস্থা করেছি।
• Excel Export এর জন্য SheetJS লাইব্রেরি ব্যবহার করেছি, যা Excel ফাইল তৈরি করে ডাউনলোড করতে সাহায্য করে।

এভাবে, আপনি সহজেই আপনার Google Chart এর ডেটা রিয়েল-টাইমে CSV বা Excel ফরম্যাটে এক্সপোর্ট করতে পারেন।