Chart Export এবং Printing (চার্ট এক্সপোর্ট এবং প্রিন্টিং)

Google Charts API তে Chart Export এবং Printing ফিচারগুলি ব্যবহারকারীদের তাদের ডেটা ভিজুয়ালাইজেশন চার্টগুলি সেভ (এক্সপোর্ট) এবং প্রিন্ট করার সুবিধা দেয়। এগুলি খুবই উপকারী যখন আপনি চার্টের ডেটা বা চিত্রকে অফলাইন ভিউ বা রিপোর্টে অন্তর্ভুক্ত করতে চান। Google Charts API তে exporting এবং printing সহজেই ইমপ্লিমেন্ট করা যেতে পারে।

1. Chart Export (চার্ট এক্সপোর্ট)

Chart Export এর মাধ্যমে আপনি চার্টটিকে ইমেজ বা পিডিএফ ফরম্যাটে এক্সপোর্ট করতে পারেন। এটি সাধারণত PNG, JPEG, SVG, বা PDF ফরম্যাটে এক্সপোর্ট করা যায়।

Google Charts API-তে একটি built-in ফিচার নেই যা সরাসরি চার্ট এক্সপোর্ট করে, তবে আপনি JavaScript লাইব্রেরি বা টুলস ব্যবহার করে চার্ট এক্সপোর্ট করতে পারেন।

Chart Export করার জন্য ব্যবহার করা যায়:

1. Google Charts Export Library
2. JavaScript canvas API
3. Custom Export Logic

Chart Export উদাহরণ:

আমরা Google Charts API এবং HTML5 Canvas API ব্যবহার করে একটি সাধারণ চার্ট এক্সপোর্ট উদাহরণ দেখব।

Step-by-Step Example (Chart Export):

1. প্রথমে একটি Chart তৈরি করুন।
2. একটি বাটন তৈরি করুন যা ব্যবহারকারীকে চার্ট এক্সপোর্ট করতে সহায়তা করবে।
3. HTML Canvas ব্যবহার করে এক্সপোর্ট করার কোড লিখুন।

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

  // Function to export the chart as an image
  exportChartAsImage() {
    const chartContainer = document.getElementById('chart_div');
    const chart = new google.visualization.PieChart(chartContainer);
    const data = google.visualization.arrayToDataTable(this.chartData);
    chart.draw(data, this.chartOptions);

    // Export the chart as PNG
    const url = chart.getImageURI();  // Returns the image URI of the chart
    const link = document.createElement('a');
    link.href = url;
    link.download = 'chart.png'; // Set the download file name
    link.click(); // Trigger the download
  }
}

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

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

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

<!-- Button to export the chart as an image -->
<button (click)="exportChartAsImage()">Export as Image</button>

এখানে, getImageURI() ফাংশনটি Google Charts-এ ব্যবহৃত হচ্ছে যা চার্টের চিত্রের URI প্রদান করে, এবং সেই URI ব্যবহার করে আপনি PNG ইমেজ ফাইল ডাউনলোড করতে পারবেন।

2. Chart Printing (চার্ট প্রিন্টিং)

Chart Printing Google Charts-এ সরাসরি built-in ফিচার নেই, তবে আপনি HTML এর window.print() ফাংশন ব্যবহার করে চার্টটি প্রিন্ট করতে পারেন।

Chart Printing উদাহরণ:

আপনি যদি Google Chart প্রিন্ট করতে চান, তবে আপনার পেজে প্রিন্ট বাটন যুক্ত করতে হবে এবং JavaScript ব্যবহার করে সেই পেজটি প্রিন্ট করতে হবে।

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

  // Function to print the chart
  printChart() {
    const chartContainer = document.getElementById('chart_div');
    const chartHTML = chartContainer.innerHTML;

    // Open a new window for printing
    const printWindow = window.open('', '', 'width=600,height=600');
    printWindow.document.write('<html><head><title>Print Chart</title></head><body>');
    printWindow.document.write(chartHTML);  // Add the chart HTML content to the print window
    printWindow.document.write('</body></html>');
    printWindow.document.close();  // Close the document
    printWindow.print();  // Trigger the print dialog
  }
}

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

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

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

<!-- Button to print the chart -->
<button (click)="printChart()">Print Chart</button>

এখানে, printChart() ফাংশনটি window.print() ফাংশন ব্যবহার করে নতুন উইন্ডো খুলে চার্টের HTML কন্টেন্টকে প্রিন্ট ডায়ালগে পাঠাবে। এটি ব্যবহারকারীকে চার্ট প্রিন্ট করতে সাহায্য করবে।

Conclusion

Chart Export এবং Chart Printing ব্যবহারকারীদের জন্য একটি কার্যকরী ফিচার প্রদান করে যার মাধ্যমে তারা তাদের ডেটা ভিজুয়ালাইজেশন (চার্ট) অফলাইন সেভ করতে বা প্রিন্ট করতে পারে। Google Charts API সরাসরি PNG বা JPEG এক্সপোর্ট ফিচার না দিলেও, getImageURI() ফাংশন এবং HTML5 Canvas ব্যবহার করে আপনি চার্ট ইমেজ এক্সপোর্ট করতে পারেন। window.print() ব্যবহার করে সরাসরি চার্ট প্রিন্ট করতে পারেন। এগুলি আপনার অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ এবং ব্যবহারকারী-বান্ধব করে তোলে।

Google Charts API তে সরাসরি চার্ট এক্সপোর্ট করার জন্য কোনো বিল্ট-ইন ফিচার নেই, তবে আমরা JavaScript এবং HTML5 এর কিছু ফিচার ব্যবহার করে চার্টকে PDF বা PNG ফরম্যাটে এক্সপোর্ট করতে পারি। এর জন্য Chart-to-image এবং html2pdf.js লাইব্রেরি ব্যবহার করা হয়।

এখানে আমরা দেখাবো কিভাবে একটি Google Chart কে PNG এবং PDF ফরম্যাটে এক্সপোর্ট করা যায়।

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

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

ng new export-chart-app
cd export-chart-app

Step 2: angular-google-charts এবং html2pdf.js ইন্সটল করা

angular-google-charts লাইব্রেরি ইতোমধ্যেই ইন্সটল করা রয়েছে, তবে html2pdf.js লাইব্রেরি ইন্সটল করতে হবে যা PDF এক্সপোর্ট করার জন্য ব্যবহৃত হবে। এছাড়া Chart.js এর মাধ্যমে চার্ট রেন্ডারিং হবে, যেহেতু Google Charts API সরাসরি চার্ট ইমেজ এক্সপোর্ট করতে সাপোর্ট করে না।

npm install html2pdf.js --save
npm install angular-google-charts --save

Step 3: GoogleChartsModule এবং html2pdf.js ইমপোর্ট করা

এখন, আমাদের app.module.ts ফাইলে GoogleChartsModule এবং html2pdf.js ইমপোর্ট করতে হবে।

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';
import * as html2pdf from 'html2pdf.js'; // html2pdf.js লাইব্রেরি ইমপোর্ট

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    GoogleChartsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 4: Chart তৈরি এবং Export ফাংশন তৈরি করা

এখন, আমরা একটি Google Chart তৈরি করব এবং সেই চার্টকে PNG অথবা PDF ফরম্যাটে এক্সপোর্ট করার জন্য দুটি ফাংশন তৈরি করব।

app.component.ts:

import { Component, OnInit } from '@angular/core';
import * as html2pdf from 'html2pdf.js'; // html2pdf.js লাইব্রেরি ইমপোর্ট

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'Export Google Chart Example';
  chartType = 'PieChart'; // Chart Type
  chartData = [
    ['Category', 'Amount'],
    ['Food', 300],
    ['Clothing', 500],
    ['Transportation', 700]
  ]; // Chart Data
  chartOptions = {
    title: 'Expenses Breakdown',
    width: 600,
    height: 400
  };

  constructor() { }

  ngOnInit(): void {}

  // PDF Export Function
  exportPDF() {
    const element = document.getElementById('chart_div'); // Chart container element
    const opt = {
      margin:       1,
      filename:     'chart-export.pdf',
      image:        { type: 'jpeg', quality: 0.98 },
      html2canvas:  { dpi: 192, letterRendering: true },
      jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
    };
    html2pdf().from(element).set(opt).save(); // Export to PDF
  }

  // PNG Export Function
  exportPNG() {
    const chart = document.getElementById('chart_div') as HTMLCanvasElement; // Chart container element
    const chartImage = chart.toDataURL('image/png'); // Convert chart to PNG
    const link = document.createElement('a');
    link.href = chartImage;
    link.download = 'chart-export.png'; // File name for download
    link.click(); // Trigger download
  }
}

এখানে, দুটি ফাংশন তৈরি করা হয়েছে:

1. exportPDF(): এই ফাংশনটি html2pdf.js ব্যবহার করে chart-এর PDF এক্সপোর্ট করবে।
2. exportPNG(): এই ফাংশনটি HTML Canvas এর মাধ্যমে chart কে PNG ফরম্যাটে রূপান্তর করে এবং ডাউনলোড করতে সহায়তা করবে।

Step 5: Chart এবং Export Button তৈরি করা

এখন, app.component.html ফাইলে Google Chart এবং Export to PDF/PNG বাটন তৈরি করা হবে।

app.component.html:

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

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

<!-- Export Buttons -->
<button (click)="exportPDF()">Export to PDF</button>
<button (click)="exportPNG()">Export to PNG</button>

এখানে, আমরা দুটি বাটন তৈরি করেছি, একটি PDF এক্সপোর্ট এবং অন্যটি PNG এক্সপোর্ট করার জন্য।

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

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

ng serve

এটি ডিফল্টভাবে অ্যাপ্লিকেশনটি http://localhost:4200 এ রান করবে। ব্রাউজারে গিয়ে আপনি আপনার Google Chart দেখতে পারবেন এবং দুইটি Export বাটন ক্লিক করে চার্ট PDF এবং PNG ফরম্যাটে এক্সপোর্ট করতে পারবেন।

সারাংশ

এভাবে, আমরা Google Chart তৈরি করে সেটিকে PDF এবং PNG ফরম্যাটে এক্সপোর্ট করার প্রক্রিয়া দেখলাম। html2pdf.js লাইব্রেরি ব্যবহার করে আমরা চার্টকে PDF এ রূপান্তর করেছি এবং Canvas ব্যবহার করে PNG ফরম্যাটে এক্সপোর্ট করেছি। এই প্রক্রিয়া চার্ট ডেটা শেয়ার বা প্রিন্ট করার জন্য খুবই উপকারী হতে পারে।

Google Charts API-এ চার্ট প্রিন্ট করার জন্য বিশেষ কোনো বিল্ট-ইন ফিচার নেই, তবে আপনি JavaScript এবং CSS ব্যবহার করে সহজেই Google Charts থেকে চার্ট প্রিন্ট করতে পারেন। প্রিন্টিং প্রক্রিয়াতে চার্টের কাস্টমাইজেশন ও ডিজাইন পরিবর্তন করা যাবে যাতে তা প্রিন্টিংয়ের জন্য উপযুক্ত হয়। এখানে আমরা দেখব কিভাবে Google Charts প্রিন্ট করার জন্য কাস্টমাইজেশন করা যায় এবং প্রিন্টিং ফিচার যোগ করা যায়।

Step 1: Angular প্রজেক্ট তৈরি এবং Google Charts ইন্সটল করা

প্রথমে একটি Angular অ্যাপ তৈরি করুন এবং angular-google-charts লাইব্রেরি ইন্সটল করুন।

ng new google-charts-printing
cd google-charts-printing
npm install angular-google-charts

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

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

এখন, app.module.ts ফাইলে GoogleChartsModule ইমপোর্ট করতে হবে।

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 3: Chart তৈরি করা

এখন আমরা একটি চার্ট তৈরি করব যা পরে প্রিন্ট করা হবে। এখানে আমরা Pie Chart ব্যবহার করব, তবে একই পদ্ধতিতে অন্য চার্টগুলিও প্রিন্ট করা যাবে।

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 = 'Google Charts Printing 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',
    pieHole: 0.4,
    width: 600,
    height: 400
  };

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

  drawChart() {
    const data = google.visualization.arrayToDataTable(this.chartData);
    const chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, this.chartOptions);
  }

  // Function to print the chart
  printChart() {
    const printWindow = window.open('', '', 'height=600,width=800');
    printWindow.document.write('<html><head><title>Print Chart</title></head><body>');
    printWindow.document.write('<h1>' + this.title + '</h1>');
    printWindow.document.write('<div id="chart_div" style="width: 600px; height: 400px;"></div>');
    printWindow.document.write('<script type="text/javascript">');
    printWindow.document.write('google.charts.load("current", { packages: ["corechart", "pie"] });');
    printWindow.document.write('google.charts.setOnLoadCallback(function() {');
    printWindow.document.write('var data = google.visualization.arrayToDataTable(' + JSON.stringify(this.chartData) + ');');
    printWindow.document.write('var chart = new google.visualization.PieChart(document.getElementById("chart_div"));');
    printWindow.document.write('chart.draw(data, ' + JSON.stringify(this.chartOptions) + ');');
    printWindow.document.write('});');
    printWindow.document.write('</script>');
    printWindow.document.write('</body></html>');
    printWindow.document.close();
    printWindow.print();
  }
}

Explanation:

• drawChart(): এই ফাংশনটি চার্ট রেন্ডার করার জন্য ব্যবহৃত হয়।
• printChart(): এই ফাংশনটি নতুন একটি উইন্ডো খোলে যেখানে চার্ট প্রিন্ট করার জন্য প্রস্তুত থাকে। এখানে আমরা window.open ব্যবহার করেছি, যার মাধ্যমে নতুন উইন্ডো খোলা হয় এবং তারপর সেটিতে Google Chart ড্র করানো হয়। তারপর printWindow.print() কল করে প্রিন্ট কমান্ড দেয়া হয়।

Step 4: HTML ফাইলে Chart রেন্ডার এবং Print Button

এখন, app.component.html ফাইলে আমরা Pie Chart রেন্ডার করব এবং Print বাটনটি যোগ করব।

app.component.html:

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

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

<!-- Print Button -->
<button (click)="printChart()" style="margin-top: 20px;">Print Chart</button>

<!-- Chart Container -->
<div id="chart_div" style="width: 600px; height: 400px;"></div>

Step 5: Print Functionality কাস্টমাইজেশন

এখন, আপনি যদি চান, তবে আপনি প্রিন্টের সময় চার্টের লেআউট, ফন্ট সাইজ, রঙ এবং স্টাইল আরও কাস্টমাইজ করতে পারেন। printChart() ফাংশনে যে HTML কোডটি আমরা প্রিন্ট উইন্ডোতে inject করেছি, সেখানে আপনি সহজেই CSS যোগ করে প্রিন্টের লেআউট কাস্টমাইজ করতে পারেন।

<style>
  body {
    font-family: Arial, sans-serif;
  }
  #chart_div {
    border: 1px solid #ccc;
    padding: 20px;
    background-color: #f9f9f9;
  }
</style>

এটি প্রিন্ট পেজের লেআউট এবং ডিজাইনকে আরও সুন্দর এবং প্রফেশনাল করে তুলবে।

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

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

ng serve

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

সারাংশ

Google Charts API ব্যবহার করে আপনি চার্ট প্রিন্ট করতে পারেন, তবে এটি কিছু অতিরিক্ত কোডিংয়ের মাধ্যমে করতে হয়। আমরা এখানে Angular ব্যবহার করে Pie Chart প্রিন্ট করার একটি কাস্টমাইজড পদ্ধতি দেখিয়েছি। window.print() ফাংশন ব্যবহার করে আপনি সহজেই চার্টটি প্রিন্ট করতে পারবেন এবং প্রিন্টের জন্য প্রয়োজনীয় কাস্টমাইজেশন করতে পারবেন, যেমন লেআউট, ফন্ট সাইজ, রঙ, এবং স্টাইল।

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 ফরম্যাটে এক্সপোর্ট করতে পারেন।

Google Charts API এর মাধ্যমে আপনি তৈরি করা চার্টকে Export এবং Print করার সুবিধা দিতে পারেন। এই বৈশিষ্ট্য ব্যবহারকারীদের চার্টটি এক্সপোর্ট করে PNG, PDF বা অন্যান্য ফরম্যাটে সংরক্ষণ বা প্রিন্ট করতে সহায়তা করে। Google Charts নিজে থেকে সরাসরি Export বা Print অপশন অফার করে না, তবে আপনি JavaScript বা Angular এর মাধ্যমে এই ফিচারটি ইমপ্লিমেন্ট করতে পারেন।

এখানে আমরা দেখব কিভাবে Export এবং Print অপশন কাস্টমাইজ করা যায়।

Step 1: Google Charts API এবং Angular Integration

এটি পূর্বে আলোচনা করা হয়েছে। প্রথমে আপনার অ্যাপে angular-google-charts লাইব্রেরি ইন্সটল এবং কনফিগার করতে হবে। আপনার app.module.ts এবং app.component.ts ফাইলগুলিতে GoogleChartsModule ইমপোর্ট করতে হবে।

Step 2: Chart Export এবং Print ফিচার ইমপ্লিমেন্ট করা

Google Charts API-এর মধ্যে Export এবং Print করার জন্য দুটি সাধারণ উপায় রয়েছে:

1. Export as PNG/PDF: আপনি JavaScript এর মাধ্যমে Google Charts এর ডেটাকে PNG বা PDF ফরম্যাটে এক্সপোর্ট করতে পারেন।
2. Print Chart: আপনি JavaScript বা CSS ব্যবহার করে সরাসরি চার্টের প্রিন্ট অপশন তৈরি করতে পারেন।

1. Export as PNG/PDF

Exporting charts as PNG বা PDF এর জন্য, Google Charts API সরাসরি কোনো ইন্টিগ্রেটেড ফিচার প্রদান না করলেও আপনি google.visualization.events.addListener এবং html2canvas লাইব্রেরি ব্যবহার করে এটি করতে পারেন।

Install html2canvas for Exporting

প্রথমে html2canvas লাইব্রেরি ইন্সটল করুন, যা HTML এলিমেন্টকে ইমেজে রেন্ডার করতে সাহায্য করবে:

npm install html2canvas

app.component.ts ফাইলে Export ফাংশন তৈরি করা

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import * as html2canvas from 'html2canvas'; // html2canvas ইমপোর্ট

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

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

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

  // Export Chart as PNG
  exportChartAsPNG() {
    const chartElement = document.getElementById('chart_div'); // Chart container element
    html2canvas(chartElement!).then((canvas) => {
      const imgData = canvas.toDataURL('image/png');
      const link = document.createElement('a');
      link.href = imgData;
      link.download = 'chart.png'; // File name for download
      link.click(); // Trigger download
    });
  }

  // Print the Chart
  printChart() {
    const chartElement = document.getElementById('chart_div'); // Chart container element
    const printWindow = window.open('', '', 'width=600,height=400');
    printWindow?.document.write('<html><body><h1>Chart</h1>' + chartElement?.innerHTML + '</body></html>');
    printWindow?.document.close();
    printWindow?.print();
  }

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

  drawChart() {
    const data = google.visualization.arrayToDataTable(this.chartData);
    const chart = new google.visualization.PieChart(document.getElementById('chart_div'));

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

app.component.html ফাইলে Export and Print Button যোগ করা

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

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

<!-- Buttons to Export and Print -->
<button (click)="exportChartAsPNG()">Export as PNG</button>
<button (click)="printChart()">Print Chart</button>

Explanation:

• Export as PNG: আমরা html2canvas ব্যবহার করে চার্টের HTML এলিমেন্টকে PNG ইমেজে রূপান্তর করেছি এবং ব্যবহারকারীর কাছে ডাউনলোডের জন্য একটি লিঙ্ক তৈরি করেছি।
• Print Chart: window.open ব্যবহার করে একটি নতুন উইন্ডো তৈরি করেছি, সেখানে চার্টের HTML কনটেন্ট রেন্ডার করেছি এবং print() মেথড দিয়ে প্রিন্ট কমান্ড ট্রিগার করেছি।

Step 3: Chart Export and Print Customization

আপনি Export এবং Print অপশনগুলোর জন্য আরও কাস্টমাইজেশন করতে পারেন:

Export Customization:

• আপনি ফাইল এক্সটেনশন পরিবর্তন করতে পারেন, যেমন PDF বা SVG।
• ইমেজের রেজোলিউশন বা ফাইল সাইজ কাস্টমাইজ করতে পারেন।

Print Customization:

• প্রিন্ট উইন্ডোর ফরম্যাট কাস্টমাইজ করতে পারেন (যেমন: পৃষ্ঠা মার্জিন, পৃষ্ঠা সাইজ ইত্যাদি)।
• চার্টের পাশাপাশি অন্যান্য কনটেন্ট প্রিন্ট করার জন্য CSS ব্যবহার করতে পারেন।

2. Print Chart Using CSS (CSS দিয়ে প্রিন্ট কাস্টমাইজেশন)

CSS ব্যবহার করে আপনি প্রিন্ট প্রিভিউ কাস্টমাইজ করতে পারেন, যেমন @media print দিয়ে প্রিন্টার প্রিন্টিং স্টাইল সেট করতে।

@media print {
  body {
    font-family: Arial, sans-serif;
  }
  
  #chart_div {
    width: 100% !important;
    height: auto !important;
  }
}

এখানে, @media print এর মাধ্যমে আমরা প্রিন্ট কাস্টমাইজেশন দিয়েছি যাতে চার্টটি প্রিন্টে সঠিকভাবে ফিট হয় এবং অন্যান্য সিএসএস স্টাইল সরানো না হয়।

সারাংশ

Export and Print Options Google Charts API ব্যবহার করে আপনার অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ এবং ইউজার-বান্ধব করে তোলে। আপনি Export as PNG বা PDF এবং Print অপশন যোগ করে ব্যবহারকারীদের চার্টের একটি কপি ডাউনলোড বা প্রিন্ট করার সুযোগ দিতে পারেন। এর জন্য আপনি html2canvas লাইব্রেরি ব্যবহার করে চার্ট এক্সপোর্ট করতে পারেন এবং JavaScript বা CSS এর মাধ্যমে প্রিন্ট কাস্টমাইজেশন করতে পারেন।