KoolReport's Forum

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

Chart Appears in Web Page but does not Appear in the Exported PDF #1417

Closed Patrick Vermont opened this topic on on May 2, 2020 - 6 comments

Patrick Vermont commented on May 2, 2020

I experience the same behavior whether or not I define 'assets' path/url in Setup so I'm at a loss. The assets are exactly where they are supposed to be which is why the webpage finds them but the PDF export does not find the widgets.

  • I have the Export sample running on my site.
  • The chart and table draw properly on the webpage
  • I press "Download PDF" and the PDF downloads as expected
  • When I view the PDF, there is a blank space where the chart is supposed to be (I increased resourceWaiting but it did not help)
  • I had to change the CSS HREFs to absolute URLS because the relative URLs were not finding the CSS

I'm guessing that widgets may need an URL change. Again, even when setting 'assets' path/url, it worked on website but not PDF.

Thanks in advance!

Pat

KoolReport commented on May 2, 2020

Hi Patrick,

May I know a little more about your project environment:

  1. Do you use with Laravel? or any other frameworks?
  2. Do you host project with php web server? (running command [php -S])
  3. Does your url containing port? for example: http://localhost:8181
Patrick Vermont commented on May 2, 2020

Thanks for your help!

  • I've tried even the simplest of examples using arrays but no matter which charting approach I choose, same thing. Tables draw. Charts don't. I tried Google and chart.js. I'd like to see it working with Chart.js.
  • this is a link to the slightly modified Export example. I am just trying to get it to function predictably before I integrate further so I need the download to draw the chart: https://proteamedge.com/wp-content/themes/memberlite-child-master/kr/pte/reports/client_1/sakila_rental/
  • I used composer to install the full PRO version
  • I installed phantomjs using these instructions and verified that it is running: https://www.vultr.com/docs/how-to-install-phantomjs-on-ubuntu-16-04
  • I added a simlink to phantomjs in the specified directory to make sure it was there per your instructions: sudo ln -s /usr/local/share/phantomjs-2.1.1-linux-x86_64/bin/phantomjs /var/www/html/proteamedge/public/wp-content/themes/memberlite-child-master/vendor/koolreport/export/bin
  • I'm not sure how to debug this so need your help. Thanks!

Here is my pdf.view:

<?php

use \koolreport\widgets\koolphp\Table;
use \koolreport\widgets\google\ColumnChart;

?> <html>

<body style="margin:0.5in 1in 0.5in 1in">
    <link rel="stylesheet" href="https://proteamedge.com/wp-content/themes/memberlite-child-master/kr/pte/assets/bs3/bootstrap.min.css" />
    <link rel="stylesheet" href="https://proteamedge.com/wp-content/themes/memberlite-child-master/kr/pte/assets/bs3/bootstrap-theme.min.css" />	

    <div class="page-header" style="text-align:right"><i>Sakila Rental Report</i></div>
    <div class="page-footer" style="text-align:right">{pageNum}</div>
    <div class="text-center">
        <h1>Cash In Report Yo</h1>
        <h4>This report show the cash-in report per month</h4>
    </div>
    <hr/>

    <?php
    ColumnChart::create(array(
        "dataStore"=>$this->dataStore('sale_by_month'),  
        "columns"=>array(
            "payment_date"=>array(
                "label"=>"Month",
                "type"=>"datetime",
                "format"=>"Y-n",
                "displayFormat"=>"F, Y",
            ),
            "amount"=>array(
                "label"=>"Amount",
                "type"=>"number",
                "prefix"=>"$",
            )
        ),
        "width"=>"100%",
    ));
    ?>
    <?php
    Table::create(array(
        "dataStore"=>$this->dataStore('sale_by_month'),
        "columns"=>array(
            "payment_date"=>array(
                "label"=>"Month",
                "type"=>"datetime",
                "format"=>"Y-n",
                "displayFormat"=>"F, Y",
            ),
            "amount"=>array(
                "label"=>"Amount",
                "type"=>"number",
                "prefix"=>"$",
                        )
        ),
        "cssClass"=>array(
            "table"=>"table table-hover table-bordered"
        )
    ));
    ?>
</body>

</html>

Patrick Vermont commented on May 2, 2020

OK, I reduced the example by removing all koolreport demo framework and thought I had it working but actually discovered where it is failing:

HTTPS fails: https://proteamedge.com/wp-content/themes/memberlite-child-master/kr/pte/reports/client/c1/

HTTP succeeds: http://proteamedge.com/wp-content/themes/memberlite-child-master/kr/pte/reports/client/c1/

Same code.

Any thoughts as why that could be?

Thanks,

Pat

Patrick Vermont commented on May 3, 2020

Instead of exporting to pdf, I ran the PDF view to screen and it renders fine. So this has something to do with export, it appears.

Patrick Vermont commented on May 3, 2020

Resolved. I was able to create absolute paths through 'assets' which did the trick.

KoolReport commented on May 4, 2020

That's great Patrick :)

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

Export