How to convert Google Chart to PNG and PDF

If you use Google Chart for reporting and visualising data you may want to have a functionality of exporting charts to PNG and PDF files. Here I will guide you how to quickly convert Google Chart to PNG and PDF. For those of you interested in using Google Chart I recommend you to have a look at this tutorial that I made a while ago.

Before being able to export an interactive Google Chart to PDF we need to access the chart as a PNG first. Luckily, this has been described here by Google. But let’s quickly review it together:

Accessing Google Chart as a PNG

Considering the example explained here, using getImageURI() method we can modify the existing code to get PNG encoding of the chart:

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

<?php   $HTML =<<<XYZ <!--Load the AJAX API--> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript">         // Load the Visualization API and the charts package.       google.load('visualization', '1.0', {'packages':['corechart']});         // Set a callback to run when the Google Visualization API is loaded.       google.setOnLoadCallback(drawChart);         // Callback that creates and populates a data table,       // instantiates the pie chart, passes in the data and       // draws it.       function drawChart() {           // Create the data table.         var data = new google.visualization.DataTable();         data.addColumn('string', 'Age Range');         data.addColumn('number', 'Number');         data.addRows({$pie_chart_data});           // Set chart options         var options = {title:'The Percent Of People Within Age Range',          titleTextStyle: {fontName: 'Lato', fontSize: 18, bold: true},                        height: 400,                        is3D: true,          colors:['#0F4F8D','#2B85C1','#8DA9BF','#F2C38D','#E6AC03','#F09B35', '#D94308', '#013453'],          chartArea:{left:30,top:30,width:'100%',height:'80%'}};           // Instantiate and draw our chart, passing in some options.         var chart_div = document.getElementById('pie_chart_div');         var chart = new google.visualization.PieChart(chart_div);           // Wait for the chart to finish drawing before calling the getIm geURI() method.         google.visualization.events.addListener(chart, 'ready', function ()      {          chart_div.innerHTML = '<img src="' + chart.getImageURI() + '">';         });           chart.draw(data, options);       }         // Make the charts responsive       jQuery(document).ready(function(){         jQuery(window).resize(function(){           drawChart();         });       });       </script>       <div id="pie_chart_div"></div> XYZ;       echo $HTML;   ?>

Exporting an image to PDF

By having an image we can easily convert it to PDF. There are a variety of ways to do that. For example we can use HTML to PDF converters such as TCPDF orDOMPDF. Here you can find all the steps to use DOMPDF:

1. Download the latest release from here (v0.6.1 at the time of writing this).
2. Unzip the file and upload the folder to your host.
3. Create a form with an action pointing to the file that handles converting HTML to PDF. In my case the file is saveChartPDF.php:

1 2 3 4

<form method='post' action='path/to/saveChartPDF.php' id='savePDFForm'> <input type='hidden' id='htmlContentHidden' name='htmlContent' value=''> <input type='button' id="downloadBtn" value='Save to PDF'> </form>

4. Content of saveChartPDF.php simply is:

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<?php   if (isset($_POST['htmlContent']) && $_POST['htmlContent'] != '') {     require_once 'path/to/dompdf/dompdf_config.inc.php';       $file_name = 'googleChart.pdf';     $html = $_POST['htmlContent'];       $dompdf = new DOMPDF();     $dompdf->load_html($html);     $dompdf->render();     $dompdf->stream($file_name); }

5. Now you just need to have this JavaScript code in the file that contains the form:

1 2 3 4 5 6 7 8 9 10 11 12

<script> jQuery(document).ready(function() {         jQuery("#downloadBtn").on("click", function() {               var htmlContent = jQuery("#pie_chart_div").html();             jQuery("#htmlContentHidden").val(htmlContent);               // submit the form             jQuery('#savePDFForm').submit();         });       }); </script>

What does it do? easy! It just populates the value of hidden input (in this casehtmlContentHidden) with the content of pie_chart_div div and submits the form when the button is clicked. You can check the demo here.