This article will help you to combine multiple charts into one single PDF file. Here I have created an example using two types of charts: AmChart and HighChart.
Reference for both these charts are given below:
HTML content to create the chart. I have used the jspdf jQuery to create pdf using jquery https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js
<style>
.Charts {
width: 100%;
height: 500px;
}
</style>
<!-- Resources -->
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/no-data-to-display.js"></script>
<div class="container body-content">
<h2>Charts</h2>
<button class="btn btn-primary" id="btnexport">Export To PDF</button>
<div class="col-md-12">
<div id="Columnchartdiv" class="Charts"></div>
</div>
<div class="col-md-12">
<div id="LineHighchartdiv" class="Charts"></div>
</div>
<div class="col-md-6">
<div id="PieChartdiv" class="Charts"></div>
</div>
</div>
@section scripts{
<script src="~/Scripts/ChartJS.js"></script>
}
To generate the chart, the following code is written in the ChartJS.js file. You can see I have used two arrays and added our chart object to that array. This array will be later used in our export process.
var imagesArray = [];
var HighChartArray = [];
//Column Chart using Amchart JS
am4core.ready(function () {
am4core.useTheme(am4themes_animated);
var chart = am4core.create("Columnchartdiv", am4charts.XYChart);
chart.data = [
{
"country": "USA - 1",
"visits": 2020
},
{
"country": "Japan",
"visits": 1909
},
{
"country": "Germany",
"visits": 1322
},
{
"country": "UAE",
"visits": 1122
},
{
"country": "Paris",
"visits": 1114
},
{
"country": "India",
"visits": 1020
},
{
"country": "Spain",
"visits": 985
},
{
"country": "Netherlands",
"visits": 665
},
{
"country": "Russia",
"visits": 580
},
{
"country": "Canada",
"visits": 441
},
{
"country": "Brazil",
"visits": 395
},
{
"country": "China",
"visits": 1985
}];
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "country";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGridDistance = 30;
categoryAxis.renderer.labels.template.adapter.add("dy", function (dy, target) {
if (target.dataItem && target.dataItem.index & 2 == 2) {
return dy + 25;
}
return dy;
});
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueY = "visits";
series.dataFields.categoryX = "country";
series.name = "Visits";
series.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]";
series.columns.template.fillOpacity = .8;
var columnTemplate = series.columns.template;
columnTemplate.strokeWidth = 2;
columnTemplate.strokeOpacity = 1;
});
//Line Chart using High Chart
HighChartArray.push(Highcharts.chart('LineHighchartdiv', {
title: {
text: 'Student Growth by Class, 2015-2022'
},
subtitle: {
text: ''
},
exporting: {
enabled: false
},
yAxis: {
title: {
text: 'Number of Students'
}
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 2015
}
},
series: [{
name: 'Junior KG',
data: [43935, 52504, 57178, 69659, 97032, 119933, 137134, 154176]
}, {
name: 'Senior KG',
data: [24917, 24065, 29743, 29852, 32491, 30283, 38122, 40435]
}, {
name: 'Primary',
data: [11745, 17723, 16006, 19772, 20186, 24378, 32148, 39388]
}, {
name: 'Secondary',
data: [null, 1235, 7989, 12160, 15113, 22453, 34401, null]
}, {
name: 'Higher Secondary',
data: [12909, 5949, 8106, 11249, 8980, 11817, 18275, 18112]
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
}));
//Pie Chart using High Chart
HighChartArray.push(Highcharts.chart('PieChartdiv', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
exporting: {
enabled: false
},
title: {
text: 'Browser usage in February, 2020'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Chrome',
y: 61.41,
sliced: true,
selected: true
}, {
name: 'Firefox',
y: 10.85
},
{
name: 'Internet Explorer',
y: 11.84
}, {
name: 'Edge',
y: 4.67
}, {
name: 'Safari',
y: 4.18
}, {
name: 'Opera',
y: 1.6
}, {
name: 'Other',
y: 2.61
}]
}]
}));
Now I have created one function to export all the Amchart to images and stored it in one array.
function SaveAmChart4() {
//Amchart 4 Export
var Amchart4ids = ["Columnchartdiv"];
var charts4 = {}, charts_remaining = Amchart4ids.length;
for (var j = 0; j < Amchart4ids.length; j++) {
for (var y = 0; y < am4core.registry.baseSprites.length; y++) {
if (am4core.registry.baseSprites[y].htmlContainer.id == Amchart4ids[j])
charts4[Amchart4ids[j]] = am4core.registry.baseSprites[y];
}
}
for (var z in charts4) {
var chart4 = charts4[z];
chart4.exporting.getImage("png").then(function (imgData) {
imagesArray.push(imgData);
console.log(imgData);
charts_remaining--;
if (charts_remaining == 0) {
save_chart();
}
});
}
} After that, we have other functions that will export all the highcharts to image. Both amchart and highchart have different export property so we need two functions here.
function save_chart() {
var charts_remaining = HighChartArray.length;
for (var i = 0; i < HighChartArray.length; i++) {
var chart = HighChartArray[i];
var render_width = 1000;
var render_height = render_width * chart.chartHeight / chart.chartWidth;
var svg = chart.getSVG({
exporting: {
sourceWidth: chart.chartWidth,
sourceHeight: chart.chartHeight
}
});
var canvas = document.createElement('canvas');
canvas.height = render_height;
canvas.width = render_width;
var image = new Image;
image.onload = function () {
canvas.getContext('2d').drawImage(this, 0, 0, render_width, render_height);
var data = canvas.toDataURL("image/png");
imagesArray.push(data);
charts_remaining--;
if (charts_remaining == 0) {
createPDF();
}
};
image.src = 'data:image/svg+xml;base64,' + window.btoa(svg);
}
} Now we will have our final export function.
function createPDF() {
var doc = new jsPDF("p", "mm", "a4");
var width = doc.internal.pageSize.width;
var height = doc.internal.pageSize.height;
var StartX = 10;
doc.setFont("arial", "normal");
doc.setTextColor(136, 136, 136); // color for fonts
doc.setFontSize(16);
doc.text(20, 10, 'AmChart Column Chart');
doc.setDrawColor(136, 136, 136); // color for line
doc.line(10, 15, parseInt(width) - 10, 15);
doc.addImage(imagesArray[0], 'JPEG', StartX, 20, parseInt(width) - 20, 100);
doc.setFont("arial", "normal");
doc.setTextColor(136, 136, 136); //
doc.setFontSize(16);
doc.text(20, 140, 'Highchart Line Chart');
doc.setDrawColor(136, 136, 136);
doc.line(10, 145, parseInt(width) - 10, 145);
doc.addImage(imagesArray[1], 'JPEG', StartX, 150, parseInt(width) - 20, 100);
doc.addPage(); // New page
doc.setFont("arial", "normal");
doc.setTextColor(136, 136, 136); // color for fonts
doc.setFontSize(16);
doc.text(20, 10, 'HighChart Pie Chart');
doc.addImage(imagesArray[2], 'JPEG', StartX, 20, parseInt((parseInt(width) - 10) / 2), parseInt((parseInt(width) - 20) / 2));
doc.save('SamplePDF.pdf'); // Change the name of the pdf file.
} Now call the first function (SaveAmChart4()) from the click event of our export button
$("#btnexport").click(function () {
SaveAmChart4();
});
Your output will be something like this:
In this article, we have to show Create and Used PIPE in angular
In this article, we have to show Create and Used PIPE in angular
In this article, we have to show Create and Used PIPE in angular