Rectangle 27 1

javascript Using Google Charts API Generated Graphic in FPDF?


Correct me if I am wrong, but as far as i know FPDF is only able to use (include) image files. So what you could do is generate that graph with image headers and than include the link to that graph in FPDF (works fine when including things generated in php and adding image headers, but can be tricky with converting JS generated graphic, could need some hacks). Another solution (if possible) try using wkhtmltopdf. It generates PDF from html pages (again not sure if that will work with JS generated graphics).

Note
Rectangle 27 1

javascript Using Google Charts API Generated Graphic in FPDF?


// 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() + '">';
  });

Google charts have the getImageURI method that provides you with a png of the chart you created.

Here is a jsfiddle example of a google chart rendered as an image. You can easily put the "printable version" in your pdf.

I don't think using 'Node.js' for something that small in your project is something you should consider. If you want them to be created "on-the-fly" an alternative is to create an API that takes as params the options of your chart as well as the data and returns you the image. Google used to have an Image Charts API but is currently deprecated.

Problem is I don't have a client where I could generate those graphics while generating the PDF. The PDF is generated on the server side in a cronjob.

Well since google charts is a javascript library, i can't think of a way to do it without.. javascript. If the charts are always gonna be the same you can run the javascript once, save the image urls in your database and read them from there when creating the pdf?

Well that's what I thought of too, but it would of course be nicer to have them created "on-the-go". I never used node.js, and only have a very vague idea what it is excactly, but could it be possible to create the images with it? since it's server-side js afaik.

Note
Rectangle 27 0

javascript Using Google Charts API Generated Graphic in FPDF?


<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript">

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

    function drawVisualization() {
    // Some raw data (not necessarily accurate)
    var data = google.visualization.arrayToDataTable([
    ['', ''],
    ['Numerical', 4],
    ['Verbal', 6],
    ['Mechanical', 4],  
    ['Reasoning', 5],  
    ['Spatial', 9]
    ]);

    var options = {
    title : '',
    vAxis: {title: "", viewWindowMode:'explicit',
          viewWindow:{
            max:12,
            min:0
          }},
    hAxis: {title: ""},
    seriesType: "bars",
    series: {5: {type: "line"}}
    };

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

    var app1=(chart.getImageURI());
        $.post("appt1.php",{postapp: app1},
        function(){});
    }
</script>
<div id="chart_div" style="display: none;"></div>


<!-- On the Server side  do this to store image appt1.php -->

$data =$_POST['postapp'];
list($type, $data) = explode(';', $data);
list(, $data) = explode(',', $data);
$data = base64_decode($data);

file_put_contents('exam_images/'."1".'.png', $data);

I finished up my project using the above method of generating reports. may be you are missing something :(

I used this method to save google charts as an image by using base64 url to save in some folder from server side finally use in fpdf as an image from folder.

Not a bad solution, though I have to be able to generate them on the server side, which I cannot do with this solution

Note