{"id":17754,"date":"2015-03-03T16:22:27","date_gmt":"2015-03-03T10:52:27","guid":{"rendered":"https:\/\/2thenew.online\/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:\/\/2thenew.online\/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":49,"footnotes":""},"categories":[7],"tags":[1669,1674,1671,1672,398,1648,1308,1670,1673],"class_list":["post-17754","post","type-post","status-publish","format-standard","hentry","category-grails","tag-charts","tag-client-side","tag-download-report","tag-generate-pdf","tag-google","tag-google-charts","tag-js","tag-jspdf","tag-savefile"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t