[SOLVED] Google charts are not showing in Snappy PDF

Google charts are not showing in Snappy PDF

I am trying to load a chart then convert it to PDF using Laravel-snappy

Here is the code I am using to generate the pdf:

$pdf = SnappyPDF::loadView('report', []);
$pdf->setOption('enable-javascript', true);
$pdf->setOption('no-stop-slow-scripts', true);
$pdf->setOption('page-size', 'A4');
$pdf->setOption('lowquality', false);
$pdf->setOption('disable-smart-shrinking', true);
$pdf->setOption('images', true);
$pdf->setOption('window-status', 'ready');
$pdf->setOption('run-script', 'window.setTimeout(function(){window.status="ready";},5000);');
return $pdf->inline();

And here is the HTML/CSS report.blade.php:

<head>
    <script src="http://www.gstatic.com/charts/loader.js"></script>
    <script>
      function init() {
        google.charts.load('current', {packages: ['corechart']});
        var interval = setInterval(function () {
          if (google.visualization !== undefined && google.visualization.DataTable !== undefined 
            && google.visualization.PieChart !== undefined) {
            clearInterval(interval);
            window.status = 'ready';
            drawChart();
          }
        }, 100);
      }

      function drawChart() {
        // Define the chart to be drawn.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Element');
        data.addColumn('number', 'Percentage');
        data.addRows([
          ['Nitrogen', 0.78],
          ['Oxygen', 0.21],
          ['Other', 0.01]
        ]);

        var chart = new google.visualization.PieChart(document.getElementById('myPieChart'));
        chart.draw(data, {});
      }
    </script>
</head>
<body onload="init()">
<div id="myPieChart" style="width: 500px; height: 500px;"></div>
</body>

The PDF output is always returning a blank page.

Solution

I had this same issue - getting blank chart or an error message 'Undefined is not a function.'.

After 3 days of trying all possible options, what worked for me is to "revert" back to an old Google Charts version.

<script>google.load("visualization", "44", {packages:["corechart"]});</script>

I was previously using "1" for the version number. And just found out that using version "1" now means you are using the current version! From Google Charts document - "All 'jsapi' requests are now being redirected to the new loader. If you were loading version '1' or '1.0', you will now be loading 'current'."

Have also tried version 45, and it fails in case too. Looks like the newer versions have loading problems with wkhtmlpdf.