4

I created a graph with google charts with the below code:

<script>
var holderarray = [
    ['Question', '% Scores'], ['Question 1', 67], ['Question 2', 18], ['Question 3', 40], ['Question 4', 66], ['Question 5', 37], ['Question 6', 98], ['Question 7', 50], ['Question 8', 75], ['Question 9', 66], ['Question 10', 37]
  ];
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawMaterial);

function drawMaterial() {
    var data = google.visualization.arrayToDataTable(holderarray);
    var materialOptions = {
        colors: ['#15e01b'],
        chart: {
          title: 'Value selected'
        },
        hAxis: {
          title: '% Score',
          minValue: 0, maxValue: 100
        },
        vAxis: {
          title: 'Questions'
        },
        bars: 'horizontal'
    };
    
    var chart_div = document.getElementById('chart_div');
    var chart = new google.visualization.BarChart(chart_div);

    // Wait for the chart to finish drawing before calling the getImageURI() method.
    google.visualization.events.addListener(chart, 'ready', function () {
        chart_div.innerHTML = '<img src="' + chart.getImageURI() + '">';
        //console.log(chart_div.innerHTML);
    });

    chart.draw(data, google.charts.Bar.convertOptions(materialOptions));
}

<div id='chart_div' style='height:300px;'></div>

This works fine, Now trying to export this graph using MPDF, I put the DIV to display the graph in my $html variable to export to PDF like below:

include("mpdf/mpdf.php");
$mpdf=new mPDF(); 

$html = "
Testing PDF Creator<br>
<div id='chart_div' style='height:300px;'></div>
";

echo "$html";

$mpdf->WriteHTML($html);
$mpdf->Output();
$mpdf->debug = true;
exit

the echo still shows the graph but the PDF generated contain only "Test PDF Creator" no graph. I have search through a lot of fix but non simce to work at all... Please healp

WhiteHat
  • 59,912
  • 7
  • 51
  • 133
ttalib
  • 43
  • 4
  • Your pdf will contain `Testing PDF Creator
    ` because that's all youve given it, in your php, there's no javascript being run to actually draw the chart     – Wesley Smith Oct 13 '20 at 07:13
  • 1
    If you are displaying this chart on the frontend and the user wants to export it to a pdf from there, you could grab the rendered html from the page, send it to your php script via ajax, then use it there to fill the pdf. Otherwise youll need to work out how to render the graph on the server side – Wesley Smith Oct 13 '20 at 07:17
  • Also note, if you do get the html and send it, you'll probably find you need the css as well. It might be best to try and convert the chart to an image on the client side and send that to the backend to put in the pdf – Wesley Smith Oct 13 '20 at 07:20
  • 1
    Testing PDF Creator
    I set the Javascript to load the graph into it the same way it load it into the DIV. But it won't. Even the $html variable, if i echo it it shows the graph but when I generate pdf from it no graph
     – ttalib Oct 13 '20 at 13:59
  • 1
    If you echo it out, when the browser renders that html, it _runs_ the javascript which builds the chart. When you compile the html into a variable on the server side in php, the html will contain the parent element and the javascript code (or the link to it) _but_ the javascript code isnt actually being executed and so it never builds the chart – Wesley Smith Oct 13 '20 at 14:03
  • Oh i see, any suggestion on how to go about this? – ttalib Oct 13 '20 at 14:10
  • Ive never tried it but [this post](https://stackoverflow.com/a/15085218/1376624) seems to indicate that you might get it to render by passing the js into `$mpdf->SetJS($compildedJs)` where $compiledJs is JS code with tags. – Wesley Smith Oct 13 '20 at 14:18
  • when the chart's ready event fires, you convert the chart to an image. then you could post / send the image uri back to another php page using ajax, and use the image to create the pdf. see [this similar answer](https://stackoverflow.com/a/38678667/5090771)... – WhiteHat Oct 13 '20 at 17:43

0 Answers0