2

Well, the question is really in the title. Since the Graphics are created with Javascript, and the PDF is generated on the server side, I was wondering if there was any way (may be a hackish, not-so-beautiful way if necessary) to include these graphics into a pdf generated using FPDF.

Example of a chart I'd like to include: https://jsfiddle.net/srm8gzqg/3/ chart.draw(data, options);

Edit: Im almost despairing, since I haven't found one php alternative in which I can create a graph like in the fiddle. Requirements are the following:

  • Lines from top to bottom
  • Input data can have float values
  • Axis on the left and bottom with correct label orientation etc.

I really found no good library written in php that can output an image file (jpg, png, etc) with the given requirements. Any hint is highly appreciated

Michael Kunst
  • 2,978
  • 25
  • 40

3 Answers3

3

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

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

  // 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() + '">';
  });
Sotiris Kiritsis
  • 3,178
  • 3
  • 23
  • 31
  • 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. – Michael Kunst Jul 13 '15 at 11:14
  • 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? – Sotiris Kiritsis Jul 13 '15 at 11:19
  • 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. – Michael Kunst Jul 13 '15 at 11:42
  • 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](https://developers.google.com/chart/image/) but is currently deprecated. – Sotiris Kiritsis Jul 13 '15 at 12:14
2

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).

Auris
  • 1,309
  • 1
  • 9
  • 18
2

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.

<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);
Gokul Hegde
  • 109
  • 1
  • 9