How to print bar chart of Google Charts in a PDF generated by mpdf?

Question

How to print bar chart of Google Charts in a PDF generated by mpdf?

Navigation

#1 by (0 votes)

0

I am making a report for a system and I need to print a pdf with the graph I generated and with the table data, but I inserting only the div chart is not generating the image.

Can anyone help me? example:

<div google-chart chart="chartExemplo" style="height: 100%; width: 100%; 
left: 10; top: 20; overflow: scroll;"></div>

google-charts mpdf

asked by anonymous 23.03.2018 / 15:50

1 answer

Replace text with JS at a given URL How to calculate the next available house?

score 0 · Answer 1

Some generated PDFs do not execute the JS codes. The only one I was able to generate with was wkhtmltopdf. It executes JS code and generates graphic image in PDF.

I could not use wkhtmltopdf and solved using ajax to save an image of the graphic to disk and then inserted the image into PDF generation with CakePHP 3 and mPDF. More I think you can use the same strategy with DOMPDF and FPDF:

JS:

google.visualization.events.addListener(chart, 'ready', function () {
                    var ajaxUrl = '/ROOT/controlador/saveChart';
                    $.ajax({    type: 'POST',
                                url: ajaxUrl,
                                dataType: 'json',
                                data: {dados: chart.getImageURI(), arquivo: "<?= $arquivo ?>"},
                                success: function(r) {
                                    console.log(r['arquivo']);
                                    //chart_perdas.innerHTML = '<img src="' + r['arquivo'] + '">';
                                },
                                error: function(e){
                                    alert("Erro ao salvar gráfico em " + urlAjax + ": " + e.responseText.message);
                                    console.log(e);
                                }
                            });
                  });

                chart.draw(view, options);

DRIVER:

public function saveChart(){
    $dados              = $_POST['dados'];
    $arquivo            = $_POST['arquivo']; 
    list($type, $dados) = explode(';', $dados);
    list(, $dados)      = explode(',', $dados);
    $dados              = base64_decode($dados);

    $path               = 'img/graph_cache/';

    if ($arquivo == null){
        $arquivo = $path . 'perdas' . rand(11111,999999999) . '.png';
    }else{
        $arquivo = $path . $arquivo;
    }

    $interval = 900;
    if ($handle = opendir($path)) {
        while (false !== ($file = readdir($handle))) { 
            if (((filemtime($path.$file) + $interval) < time()) && ($file != "..") && ($file != ".")) { 
                @unlink($path . $file);
            }
        }
        closedir($handle); 
    }

    file_put_contents($arquivo, $dados);

    $this->response->type('json');
    $this->response->body(json_encode(['fileName'=> $arquivo, 'success' => true]));

    return $this->response;
}

VIEW:

<?php if ($action == 'perdasPdf'): ?>
                <div id="chart_imagem" class="div-chart" style="width: 100%;">
                    <img src="<?= realpath('img/graph_cache/' . $arquivo) ?>" border=0 alt="" align="center"></div>
            <?php endif; ?>