KoolReport's Forum

Official Support Area, Q&As, Discussions, Suggestions and Bug reports.
Forum's Guidelines

Charts not displayed during PDF export using ChromeHeadless.io #2678

Open Kunal Hinduja opened this topic on on May 17, 2022 - 3 comments

Kunal Hinduja commented on May 17, 2022

Hi,

I am using ChromeHeadless.io to generate PDF files in Laravel. My app is deployed to Digital Ocean.

I am able to generate the pdf file, in which the text and the tables are displayed. However, the google charts (column, donut) are not being displayed. It is just blank there.

On my local dev machine, using Phantomjs on windows and using temp folder, I am able to see the charts after refreshing the page. However, locally using ChromeHeadless.io, I am not able to view the charts locally.

The same charts are displayed on the dashboard and working as expected.

PS: I am also trying to load phantomjs on the Digital Ocean droplet. I have downloaded in the vendor/koolreport/export/bin folder. However, not able to run phantomjs -- version. Any help.

Look forward to your help.

In MyReport.php

 use \koolreport\cloudexport\Exportable;

In MyReportPDF.view.pdf

<?php
Table::create([
    "dataSource"=>$this->dataStore("plant_group_score"),
    "showFooter"=>true,
    "columns"=>array(
        "plant"=>array(
            "label"=>"Plant"),
        "group_percent"=>array(
            "type"=>"percent",
            "label"=>"Scores",
            "footer"=>"avg",
            "footerText"=>"<b>Avg Score:</b> @value"
        ),
    ),
    "removeDuplicate"=>array("plant")
]);

google\ColumnChart::create(array(
    "title" => "Total MFG Safety Score (All Plant - All Weeks)",
    "dataSource" => $this->datastore('checklist_score_total_by_week'),
    "columns" => array(
        "start_date",
        "score" => array("label" => "Score", "type" => "number"),
    )
));

google\DonutChart::create(array(
    "title" => "All Plants By Finding Type",
    "dataSource" => $this->datastore('finding_by_type'),
    "columns" => array(
        "finding_type",
        "id" => array(
            "type" => "number",))));
?>

Calling the report

// Using Cloud Export
        $report->run()
        ->cloudExport("MyReportPDF")
        ->chromeHeadlessio("inserted my token")
        ->pdf()
        ->toBrowser("MyReport.pdf");
Sebastian Morales commented on May 17, 2022

Pls try the following "pageWaiting" settings when using cloud export with Google Chart:

        $report->run()
        ->cloudExport("MyReportPDF")
        ->chromeHeadlessio("inserted my token")
        ->settings([
            "pageWaiting" => "networkidle2", // add this for Google chart since its js library is loaded dynamically
        ])
        ->pdf()
        ->toBrowser("MyReport.pdf");
Kunal Hinduja commented on May 20, 2022

Hi Sebastian,

Thank you for your help.

I managed to install phantomjs on my DO server with the help of David.

I need help with the PDF output. My app is multlingual and needs to display reports in Thai language.

When I run the report in the browser on the local machine, I can view the thai text. However, on the DO server, I get only rectangle boxes instead of thai charcaters. The English characters are displayed correctly.

On the server, the data is being stored properly in the Thai characters and displayed properly on screen. The issue is only with the generated PDF using Phantomjs.

Can you please let me know how I can get the Thai characters output on the generated pdf.

Best Regards,

Sebastian Morales commented on May 23, 2022

From our email support, the solution is to install Thai fonts on Ubuntu server for pdf export to render Thai character correctly. Rgds,

Build Your Excellent Data Report

Let KoolReport help you to make great reports. It's free & open-source released under MIT license.

Download KoolReport View demo
help needed
solved

CloudExport