{"id":17754,"date":"2015-03-03T16:22:27","date_gmt":"2015-03-03T10:52:27","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=17754"},"modified":"2016-12-16T15:32:52","modified_gmt":"2016-12-16T10:02:52","slug":"generate-pdf-for-google-charts-through-javascript","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/generate-pdf-for-google-charts-through-javascript\/","title":{"rendered":"Generate PDF for Google Charts through Javascript"},"content":{"rendered":"

In a previous blog, we learned, how to draw a google chart<\/a>.<\/p>\n

Let’s say, I have 5 graphs on my page and I want to generate a PDF which contains these graphs using a JavaScript<\/a>.<\/p>\n

For that, we will use jsPDF plugin<\/a>.<\/p>\n

Step 1. Create a hidden empty DIV, to store graph-images:<\/p>\n

[java]
\n<div id=’graph-images’ style=’display:none’><\/div>
\n[\/java]<\/p>\n

Step 2. Update your ‘drawMyChart()’ function to get image of chart<\/p>\n

[java]
\nvar data = …
\nvar options =
\n …
\n}<\/p>\n

var chart = new google.visualization.ComboChart(document.getElementById(‘chart_div’)); \/* Define your ComboChart object *\/
\ngoogle.visualization.events.addListener(chart, ‘ready’, function () {
\n var content = ‘<img src="’ + chart.getImageURI() + ‘">’;
\n $(‘#graph-images’).append(content);
\n}); \/* Adds a listener to make a image of chart inside a #graph-images*\/<\/p>\n

chart.draw(data, options); \/* draw the chart using above define ‘data’ and ‘options’ *\/
\n[\/java]<\/p>\n

Google Chart API provides access to a PNG image of a chart, using the getImageURI() method. When the chart object is ready an ‘img’ tag is appended in the ‘#graph-images’ DIV.<\/p>\n

Step 3 : Include plugin javascript files : jspdf.js<\/a>, FileSaver.js<\/a>, zlib.js<\/a>, png.js<\/a>,jspdf.plugin.addimage.js<\/a>, and jspdf.plugin.png_support.js<\/a><\/p>\n

Step 4 : Add functionality to generate a PDF of the above saved chart-images:<\/p>\n

[java]
\nfunction generatePDF() {
\nvar doc = new jsPDF(‘p’, ‘pt’, ‘a4’, false) \/* Creates a new Document*\/
\ndoc.setFontSize(15); \/* Define font size for the document *\/
\nvar yAxis = 30;
\nvar imageTags = $(‘#graph-images img’);
\nfor (var i = 0; i < imageTags.length; i++) {
\n if (i % 2 == 0 && i != 0) { \/* I want only two images in a page *\/
\n doc.addPage(); \/* Adds a new page*\/
\n yAxis = 30; \/* Re-initializes the value of yAxis for newly added page*\/
\n }
\n var someText = ‘Chart ‘+(i+1);
\n doc.text(60, yAxis, someText); \/* Add some text in the PDF *\/
\n yAxis = yAxis + 20; \/* Update yAxis *\/
\n doc.addImage(imageTags[i], ‘png’, 40, yAxis, 530, 350, undefined, ‘none’);
\n yAxis = yAxis+ 360; \/* Update yAxis *\/
\n }
\ndoc.save(‘Chart_Report’ + ‘.pdf’) \/* Prompts user to save file on his\/her machine *\/
\n}
\n[\/java]<\/p>\n

Here we are adding a chart heading and the image for all the charts drawn.<\/p>\n

Step 5: Whenever there’s an error adding any image in the PDF, jsPDF API throws an error ‘throw new Error()’ and stops any further processing. For this we can provide exception handling:<\/p>\n

[java]
\n try {
\n doc.addImage(imageTags[i], ‘png’, 40, yAxis, 530, 350, undefined, ‘none’);
\n yAxis = yAxis+ 360; \/* Update yAxis *\/
\n }
\n catch (e) {
\n doc.text(120, yAxis + 30, ‘SOME ERROR OCCURRED WHILE ADDING IMAGE’);
\n yAxis = yAxis + 50 \/* Update yAxis *\/
\n }
\n[\/java]<\/p>\n

Our code remains the same, we just need to move doc.addImage(*, *, *, *, *, *) into the try-catch block, so that whenever any error occurs while inserting an\u00a0image inside the PDF, we add following text: ‘SOME ERROR OCCURRED WHILE ADDING IMAGE’, and continue further.<\/p>\n

Hope this helps everyone!<\/p>\n","protected":false},"excerpt":{"rendered":"

In a previous blog, we learned, how to draw a google chart. Let’s say, I have 5 graphs on my page and I want to generate a PDF which contains these graphs using a JavaScript. For that, we will use jsPDF plugin. Step 1. Create a hidden empty DIV, to store graph-images: [java] <div id=’graph-images’ […]<\/p>\n","protected":false},"author":79,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":29},"categories":[7],"tags":[1669,1674,1671,1672,398,1648,1308,1670,1673],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/17754"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/79"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=17754"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/17754\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=17754"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=17754"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=17754"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}