Save google charts as pdf

Question

I am trying to save the piechart as a pdf file as in http://keepcoding.ehsanabbasi.com/php/convert-google-chart-to-png-and-pdf/ Having javascript inside php.chartsrc shows up the following value rather than the png image source

"function (){if(!this.b||!this.$||!this.Ua)throw m("Chart has not finished drawing.");var a=new Ql(this.V,this.Aa),b=Tl(this.ma)[Wb](ih),a=YO(b,a),a=new EO(b,a),c=new RO(b),a=this.sO(c,a),c=yY(this.ig,this.$,this.Ua);a.Lp(this.$,c);return b[cc][0].toDataURL(Ssa)} failed (filesystem path '/var/www/html/function (){if(!this.b||!this.$||!this.Ua)throw m("Chart has not finished drawing.");var a=new Ql(this.V,this.Aa),b=Tl(this.ma)[Wb](ih),a=YO(b,a),a=new EO(b,a),c=new RO(b),a=this.sO(c,a),c=yY(this.ig,this.$,this.Ua);a.Lp(this.$,c);return b[cc][0].toDataURL(Ssa)}')"

 $script ="

        google.setOnLoadCallback(drawChart);
        function drawChart() { //code for drawing chart}
        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        google.visualization.events.addListener(chart, 'ready', function ()      {
        var chartsrc = chart.getImageURI();
     });

      $doc->addScriptDeclaration($script);
      echo "<div id='piechart'></div>";

Solution

We added support in our @cloudformatter to support all Google Charts output to PDF, Image, XPS and other formats. You can take a look at the links below.

Google Charts @cloudformatter support page: http://www.cloudformatter.com/GoogleCharts

Documentation for the overall Javascript: http://www.cloudformatter.com/CSS2Pdf.APIDoc.Usage

There are a few hints on the Google Charts web page above about implementing a Handler that adds the SVG namespace to the generated SVG after the chart draws.

You can choose from the menu at the top to format the whole page or even choose from the menus inline to format only a particular chart to PDF (or other formats).

There is also a fiddle to play with here: http://jsfiddle.net/zvx6eb7e/10/, the code to produce PDF behind the PDF button is only this:

var click="return xepOnline.Formatter.Format('JSFiddle', {render:'download', srctype:'svg'})";
jQuery('#buttons').append('<button onclick="'+ click +'">PDF</button>');

I would note one thing --- this is not chart to image to PDF, this is chart in vector to PDF for the highest resolution and best representation of the data.