Welcome folks today in this blog post we will be using the chart.js
library to export colorful bar charts in pdf document using jspdf
library in javascript. All the full source code of the application is shown below.
Get Started
In order to get started you need to make an index.html
file and copy paste the following code
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #chartContainer { width: 40% } ; #myChart2 { width: 40% } ; </style> </head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.debug.js"></script> <body> <a href="#" id="downloadPdf">Download Report Page as PDF</a> <br /><br /> <div id="reportPage"> <div id="chartContainer" style="width: 30%;float: left;"> <canvas id="myChart"></canvas> </div> <div style="width: 30%; float: left;"> <canvas id="myChart2"></canvas> </div> <br /><br /><br /> <div style="width: 30%; height: 400px; clear: both;"> <canvas id="myChart3" style="width: 40%"></canvas> </div> </div> </body> |
As you can see we have the bar charts
inside the html. Now we also have some custom css styles that are applied to the bar charts. And now we need to export these bar charts from the canvas to pdf document
script.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 |
var chartColors = { red: 'rgb(255, 99, 132)', orange: 'rgb(255, 159, 64)', yellow: 'rgb(255, 205, 86)', green: 'rgb(75, 192, 192)', blue: 'rgb(54, 162, 235)', purple: 'rgb(153, 102, 255)', grey: 'rgb(231,233,237)' }; var randomScalingFactor = function() { return (Math.random() > 0.5 ? 1.0 : 1.0) * Math.round(Math.random() * 100); }; var data = { labels: ["Car", "Bike", "Walking"], datasets: [{ label: 'Fuel', backgroundColor: [ chartColors.red, chartColors.blue, chartColors.yellow], data: [ randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), ] }] }; var myBar = new Chart(document.getElementById("myChart"), { type: 'horizontalBar', data: data, options: { responsive: true, title: { display: true, text: "Chart.js - Base Example" }, tooltips: { mode: 'index', intersect: false }, legend: { display: false, }, scales: { xAxes: [{ ticks: { beginAtZero: true } }] } } }); var myBar2 = new Chart(document.getElementById("myChart2"), { type: 'horizontalBar', data: data, options: { responsive: true, title: { display: true, text: "Chart.js - Changing X Axis Step Size" }, tooltips: { mode: 'index', intersect: false }, legend: { display: false, }, scales: { xAxes: [{ ticks: { beginAtZero: true, stepSize: 2 } }] } } }); var myBar3 = new Chart(document.getElementById("myChart3"), { type: 'horizontalBar', data: data, options: { responsive: true, maintainAspectRatio: false, title: { display: true, text: "Chart.js - Setting maintainAspectRatio = false and Setting Parent Width/Height" }, tooltips: { mode: 'index', intersect: false }, legend: { display: false, }, scales: { xAxes: [{ ticks: { beginAtZero: true } }] } } }); $('#downloadPdf').click(function(event) { // get size of report page var reportPageHeight = $('#reportPage').innerHeight(); var reportPageWidth = $('#reportPage').innerWidth(); // create a new canvas object that we will populate with all other canvas objects var pdfCanvas = $('<canvas />').attr({ id: "canvaspdf", width: reportPageWidth, height: reportPageHeight }); // keep track canvas position var pdfctx = $(pdfCanvas)[0].getContext('2d'); var pdfctxX = 0; var pdfctxY = 0; var buffer = 100; // for each chart.js chart $("canvas").each(function(index) { // get the chart height/width var canvasHeight = $(this).innerHeight(); var canvasWidth = $(this).innerWidth(); // draw the chart into the new canvas pdfctx.drawImage($(this)[0], pdfctxX, pdfctxY, canvasWidth, canvasHeight); pdfctxX += canvasWidth + buffer; // our report page is in a grid pattern so replicate that in the new canvas if (index % 2 === 1) { pdfctxX = 0; pdfctxY += canvasHeight + buffer; } }); // create new pdf and add our new canvas as an image var pdf = new jsPDF('l', 'pt', [reportPageWidth, reportPageHeight]); pdf.addImage($(pdfCanvas)[0], 'PNG', 0, 0); // download the pdf pdf.save('filename.pdf'); }); |
As you can see we are using the jspdf
library to export the canvas
first of all and take the screenshot as jpeg
image and then adding that image using the addImage()
method of jspdf. And lastly we are downloading the pdf using the save()
method.