Google Charts API তে Chart Export এবং Printing ফিচারগুলি ব্যবহারকারীদের তাদের ডেটা ভিজুয়ালাইজেশন চার্টগুলি সেভ (এক্সপোর্ট) এবং প্রিন্ট করার সুবিধা দেয়। এগুলি খুবই উপকারী যখন আপনি চার্টের ডেটা বা চিত্রকে অফলাইন ভিউ বা রিপোর্টে অন্তর্ভুক্ত করতে চান। Google Charts API তে exporting এবং printing সহজেই ইমপ্লিমেন্ট করা যেতে পারে।
Chart Export এর মাধ্যমে আপনি চার্টটিকে ইমেজ বা পিডিএফ ফরম্যাটে এক্সপোর্ট করতে পারেন। এটি সাধারণত PNG, JPEG, SVG, বা PDF ফরম্যাটে এক্সপোর্ট করা যায়।
Google Charts API-তে একটি built-in ফিচার নেই যা সরাসরি চার্ট এক্সপোর্ট করে, তবে আপনি JavaScript লাইব্রেরি বা টুলস ব্যবহার করে চার্ট এক্সপোর্ট করতে পারেন।
আমরা Google Charts API এবং HTML5 Canvas API ব্যবহার করে একটি সাধারণ চার্ট এক্সপোর্ট উদাহরণ দেখব।
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
}
}
<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 ইমেজ ফাইল ডাউনলোড করতে পারবেন।
Chart Printing Google Charts-এ সরাসরি built-in ফিচার নেই, তবে আপনি HTML এর window.print() ফাংশন ব্যবহার করে চার্টটি প্রিন্ট করতে পারেন।
আপনি যদি Google Chart প্রিন্ট করতে চান, তবে আপনার পেজে প্রিন্ট বাটন যুক্ত করতে হবে এবং JavaScript ব্যবহার করে সেই পেজটি প্রিন্ট করতে হবে।
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
}
}
<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 কন্টেন্টকে প্রিন্ট ডায়ালগে পাঠাবে। এটি ব্যবহারকারীকে চার্ট প্রিন্ট করতে সাহায্য করবে।
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 ফরম্যাটে এক্সপোর্ট করা যায়।
প্রথমে একটি নতুন Angular প্রজেক্ট তৈরি করুন (যদি আপনার আগে থেকেই কোনো প্রজেক্ট থাকে, তবে সেটি ব্যবহার করতে পারেন):
ng new export-chart-app
cd export-chart-app
angular-google-charts লাইব্রেরি ইতোমধ্যেই ইন্সটল করা রয়েছে, তবে html2pdf.js লাইব্রেরি ইন্সটল করতে হবে যা PDF এক্সপোর্ট করার জন্য ব্যবহৃত হবে। এছাড়া Chart.js এর মাধ্যমে চার্ট রেন্ডারিং হবে, যেহেতু Google Charts API সরাসরি চার্ট ইমেজ এক্সপোর্ট করতে সাপোর্ট করে না।
npm install html2pdf.js --save
npm install angular-google-charts --save
এখন, আমাদের 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 { }
এখন, আমরা একটি 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
}
}
এখানে, দুটি ফাংশন তৈরি করা হয়েছে:
এখন, 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 এক্সপোর্ট করার জন্য।
এখন, অ্যাপ্লিকেশনটি চালাতে নিচের কমান্ডটি ব্যবহার করুন:
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 প্রিন্ট করার জন্য কাস্টমাইজেশন করা যায় এবং প্রিন্টিং ফিচার যোগ করা যায়।
প্রথমে একটি Angular অ্যাপ তৈরি করুন এবং angular-google-charts লাইব্রেরি ইন্সটল করুন।
ng new google-charts-printing
cd google-charts-printing
npm install angular-google-charts
এটি ইনস্টল হওয়ার পর angular-google-charts আপনার node_modules ফোল্ডারে যুক্ত হয়ে যাবে।
এখন, 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 { }
এখন আমরা একটি চার্ট তৈরি করব যা পরে প্রিন্ট করা হবে। এখানে আমরা Pie Chart ব্যবহার করব, তবে একই পদ্ধতিতে অন্য চার্টগুলিও প্রিন্ট করা যাবে।
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();
}
}
window.open ব্যবহার করেছি, যার মাধ্যমে নতুন উইন্ডো খোলা হয় এবং তারপর সেটিতে Google Chart ড্র করানো হয়। তারপর printWindow.print() কল করে প্রিন্ট কমান্ড দেয়া হয়।এখন, app.component.html ফাইলে আমরা Pie Chart রেন্ডার করব এবং Print বাটনটি যোগ করব।
<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>
এখন, আপনি যদি চান, তবে আপনি প্রিন্টের সময় চার্টের লেআউট, ফন্ট সাইজ, রঙ এবং স্টাইল আরও কাস্টমাইজ করতে পারেন। printChart() ফাংশনে যে HTML কোডটি আমরা প্রিন্ট উইন্ডোতে inject করেছি, সেখানে আপনি সহজেই CSS যোগ করে প্রিন্টের লেআউট কাস্টমাইজ করতে পারেন।
<style>
body {
font-family: Arial, sans-serif;
}
#chart_div {
border: 1px solid #ccc;
padding: 20px;
background-color: #f9f9f9;
}
</style>
এটি প্রিন্ট পেজের লেআউট এবং ডিজাইনকে আরও সুন্দর এবং প্রফেশনাল করে তুলবে।
এখন, অ্যাপ্লিকেশনটি চালানোর জন্য নিচের কমান্ডটি ব্যবহার করুন:
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 ফরম্যাটে ডেটা এক্সপোর্ট করার জন্য কাস্টম ফাংশন তৈরি করব।
CSV ফরম্যাটে ডেটা এক্সপোর্ট করতে, আমরা JavaScript এর মাধ্যমে CSV ফাইল তৈরি করে সেটি ইউজারের ডাউনলোড করার জন্য প্রস্তুত করব।
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>
এখানে:
Excel ফরম্যাটে ডেটা এক্সপোর্ট করতে, আমরা SheetJS নামক একটি লাইব্রেরি ব্যবহার করতে পারি। এটি JavaScript লাইব্রেরি যা Excel ফাইল তৈরি এবং ডাউনলোড করার জন্য ব্যবহৃত হয়।
প্রথমে 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>
এখানে:
CSV এবং Excel ফরম্যাটে Google Charts থেকে ডেটা এক্সপোর্ট করার জন্য আমরা:
এভাবে, আপনি সহজেই আপনার Google Chart এর ডেটা রিয়েল-টাইমে CSV বা Excel ফরম্যাটে এক্সপোর্ট করতে পারেন।
Google Charts API এর মাধ্যমে আপনি তৈরি করা চার্টকে Export এবং Print করার সুবিধা দিতে পারেন। এই বৈশিষ্ট্য ব্যবহারকারীদের চার্টটি এক্সপোর্ট করে PNG, PDF বা অন্যান্য ফরম্যাটে সংরক্ষণ বা প্রিন্ট করতে সহায়তা করে। Google Charts নিজে থেকে সরাসরি Export বা Print অপশন অফার করে না, তবে আপনি JavaScript বা Angular এর মাধ্যমে এই ফিচারটি ইমপ্লিমেন্ট করতে পারেন।
এখানে আমরা দেখব কিভাবে Export এবং Print অপশন কাস্টমাইজ করা যায়।
এটি পূর্বে আলোচনা করা হয়েছে। প্রথমে আপনার অ্যাপে angular-google-charts লাইব্রেরি ইন্সটল এবং কনফিগার করতে হবে। আপনার app.module.ts এবং app.component.ts ফাইলগুলিতে GoogleChartsModule ইমপোর্ট করতে হবে।
Google Charts API-এর মধ্যে Export এবং Print করার জন্য দুটি সাধারণ উপায় রয়েছে:
Exporting charts as PNG বা PDF এর জন্য, Google Charts API সরাসরি কোনো ইন্টিগ্রেটেড ফিচার প্রদান না করলেও আপনি google.visualization.events.addListener এবং html2canvas লাইব্রেরি ব্যবহার করে এটি করতে পারেন।
প্রথমে html2canvas লাইব্রেরি ইন্সটল করুন, যা HTML এলিমেন্টকে ইমেজে রেন্ডার করতে সাহায্য করবে:
npm install html2canvas
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);
}
}
<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>
html2canvas ব্যবহার করে চার্টের HTML এলিমেন্টকে PNG ইমেজে রূপান্তর করেছি এবং ব্যবহারকারীর কাছে ডাউনলোডের জন্য একটি লিঙ্ক তৈরি করেছি।window.open ব্যবহার করে একটি নতুন উইন্ডো তৈরি করেছি, সেখানে চার্টের HTML কনটেন্ট রেন্ডার করেছি এবং print() মেথড দিয়ে প্রিন্ট কমান্ড ট্রিগার করেছি।আপনি Export এবং Print অপশনগুলোর জন্য আরও কাস্টমাইজেশন করতে পারেন:
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 এর মাধ্যমে প্রিন্ট কাস্টমাইজেশন করতে পারেন।
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
