Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Make wkhtmltoimage Wait till Google Chart API Renders the Chart Completely

Tags:

javascript

php

What I'm trying to do

Open a .php page using exec with

exec('./wkhtmltoimage-i386 abcdef.com/combined.php chart.jpg', $op, $er);

such that I get an image of the chart that was rendered.

What's actually happening

The chart.jpg isn't getting created at all on running the page which contains the above command.

Debugging

(1) I directly executed combined.php in a browser and the chart was being displayed as expected. So there is nothing wrong in combined.php code.

(2) I also tried putting just

<h1>Hello there!</h1>

inside combined.php and this resulted in chart.jpg being created and output shown up as image.

So this makes me believe that wkhtmltoimage will need to wait until the chart is being rendered and then perform the conversion operation. The thing is I'm out of ideas on how to make the conversion process wait till everything is done.

Javascript code used to prepare the chart

google.load('visualization', '1', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);

function drawChart() {
   var data = new google.visualization.DataTable(<?php echo $jsonTable; ?>);      
   var options = {
          title: 'TNS',titleTextStyle: {color: "green"}, hAxis: {title: "MONTH", titleTextStyle: {color: "green"}}, vAxis: {title: "Percentage", titleTextStyle: {color: "green"},viewWindowMode: 'explicit',
                 },
           max: 100,
           min: 0,
           legend: {
                    position: 'bottom'
           },
           width:1000,
           height:550,
           pointSize: 8,
           backgroundColor:'#ddd9c3',
           is3D: 'true',
           height:550,
           vAxis: {
            gridlineColor: '#9d9983'
        },
            colors: ['black', 'red', 'green', 'blue', 'yellow']       
       };


       var chart = new google.visualization.LineChart(document.getElementById('tns1'));     
       chart.draw(data, options);

         }
like image 796
asprin Avatar asked Oct 22 '22 09:10

asprin


1 Answers

You can use the following settings to allow JavaScript content to be rendered.

--enable-javascript
--javascript-delay

I'm assuming this documentation is up to date for that

http://madalgo.au.dk/~jakobt/wkhtmltoxdoc/wkhtmltoimage_0.10.0_rc2-doc.html

An attempt could be

exec('./wkhtmltoimage-i386 --enable-javascript --javascript-delay 1000 abcdef.com/combined.php chart.jpg', $op, $er);

Depending on how long it takes to render everything off course. Keep in mind that different security restrictions might be in place.

Some additional options you will surely want to investigate

--run-script             // run a specific script after loading
--debug-javascript       // return javascript debug output
--no-stop-slow-scripts  
--enable-local-file-access
like image 121
Willem D'Haeseleer Avatar answered Oct 24 '22 11:10

Willem D'Haeseleer