I am facing an issue while trying to create multiple charts in a PDF using Google Charts. I am utilizing CakePDF with the Wkhtmltopdf engine for generating the PDFs. The problem arises when attempting to load the Google Chart code into the PDF file. Below is the current JavaScript code snippet that I am working with:
<script type="text/javascript" src="https://www.google.com/jsapi">
</script>
<script type="text/javascript">
google.load('visualization', '1.0', {'packages':['corechart']});
//setTimeout(function() {google.load('visualization', '1.0', {'packages':['corechart']});}, 100);
google.setOnLoadCallback(drawChart);
function drawChart(doIt,taken, total, element)
{
if (typeof doIt === 'boolean')
{
var data = new google.visualization.DataTable();
data.addColumn('string', 'Type');
data.addColumn('number', 'Courses');
data.addRows([
['Taken', taken],
['Remaining', total - taken]
]);
var options = {
'width':40,
'height':40};
var chart = new google.visualization.PieChart(document.getElementById(element));
chart.draw(data, options);
}
}
</script>
There seems to be an issue arising when including the visualization package through google.load, as it causes Wkhtmltopdf to return an error stating that no data has been received from the engine. I came across a similar problem on Why does google.load cause my page to go blank? and attempted to resolve it by introducing a slight delay using setTimeout(function() {google.load('visualization', '1.0', {'packages':['corechart']});}, 100); However, balancing the delay between too low or high results in either a blank page or breaking of the Javascript.
var data = new google.visualization.DataTable();
The challenge now lies in solving the breakage caused at the line mentioned above. Despite trying various troubleshooting methods, such as moving the function call towards the end of PHP execution, the issue persists at the point of chart.draw(data, options);. The correct values and elements are being passed, but the function continues to malfunction.
Despite numerous attempts, it appears that Wkhtmltopdf fails to interpret any content within javascript tags, leading me to try different strategies without success. As a workaround, I have embedded the JS code within the default PDF layout recognized by CakePDF and then dynamically generate elements and values within the rendered view by WkhtmltoPdf. This approach, though convoluted, was the only way I could successfully invoke the JS function.
for ($i = 0; $i < sizeof($grade_array); $i++)
{
$element = $grade_array[$i][2];
echo '<script type="text/javascript">drawChart(true, '.$this->Js->value($grade_array[$i][0]).', '.$this->Js->value($grade_array[$i][1]).','.json_encode($element).');</script>';
}
All parameters are correctly passed to the function upon invocation, confirmed via debug statements printing the parameter values. Furthermore, inserting document.write('test') in place of chart.draw() functions properly, signifying a peculiar behavior specifically related to chart.draw(). Any efforts to resolve this result in the message "Wkhtmltopdf didn't return any data."