javascript - Using Google Charts API Generated Graphic in FPDF - Stack Overflow

admin管理员组

文章数量:1332377

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: / 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

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/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

• javascript
• php
• google-visualization
• fpdf

Share Improve this question Follow edited Jul 13, 2015 at 13:30 Michael Kunst asked Jul 13, 2015 at 10:03 Michael KunstMichael Kunst 2,9882727 silver badges4040 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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() + '">';
  });

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

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

本文标签： javascriptUsing Google Charts API Generated Graphic in FPDFStack Overflow