KoolReport's Forum

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

PDF Export not showing Google charts #3052

Closed Martin Parkes opened this topic on on May 19, 2023 - 18 comments

Martin Parkes commented on May 19, 2023

Hi, I've searched the forum for anything about this and have tried what I've found but nothing seems to be working. I'm running PHP 8.1.4 on a Windows Server and that charts are displayed on the screen ok, but not when I export to PDF and I'm using the latest version 5.3.0.

This is my export code and I've tried with or without the localtemp folder. I've checked the tmp files that are created and renamed them to html and they also don't display the chart:

$report->export('manupskillingpdf')
    ->settings([
        "useLocalTempFolder" => true,
        //"autoDeleteTempFile" => true,
        //"resourceWaiting"=>2000,
    ])
    ->pdf(array(
        "format"=>"A4",
        "orientation"=>"portrait",
        "margin"=>"0.5in",
        "zoom"=>1
    ))
    ->toBrowser($fileName, true); //add ,true to view in browser first

In my class file I've also tried setting the assets paths and still no luck, so just put it back to normal:

public function settings() {
        return array(
            /*"assets"=>array(
                "path"=>_ROOT_PATH."_reports_output/",
                "url"=>"/_reports_output/"
            ),*/
            "dataSources"=>array(
                "data"=>array(
                    "connectionString"=>"mysql:host="._SERVER.";dbname="._DATABASE,
                    "username"=>_USER,
                    "password"=>_PASS,
                    "charset"=>"utf8"
                )
            )
        );
    }

This is the code it produces in the tmp file for the chart and everything is pointing to the correct locations:

<krwidget widget-name='gchart64672b1bb5ab12' widget-type='koolreport/widgets/google/PieChart'><div id="gchart64672b1bb5ab12" style="width:100%;height:400px;"></div>
<script type="text/javascript">
    KoolReport.widget.init({"js":["\/_includes\/vendor\/koolreport\/core\/src\/clients\/jquery\/jquery.min.js",["\/_includes\/vendor\/koolreport\/core\/src\/widgets\/google\/clients\/googlechart.js"]],"css":[]},function(){
        gchart64672b1bb5ab12 = new KoolReport.google.chart("PieChart","gchart64672b1bb5ab12",["programme","worked"],[["programme","worked"],["40242 | Prog1",{"v":915,"f":"15:15 hrs"}],["40243 | Prog2",{"v":4620,"f":"77:00 hrs"}],["40248 | Prog3",{"v":120,"f":"02:00 hrs"}],["40540 | Prog4",{"v":120,"f":"02:00 hrs"}],["40880 | Prog5",{"v":37560,"f":"626:00 hrs"}]],{"is3D":true},{"package":"corechart","stability":"current","language":"en","mapsApiKey":""});
                            });
</script></krwidget>

There are also no errors being displayed either when I press F12 for the developer console. Tried everything I can think of and various combinations of the above, and still nothing. Any other suggestions?

Sebastian Morales commented on May 22, 2023

Which web/http server did you use, is it PHP built-in one or a production server like Apache, Nginx, etc? If it's the former one pls try one of the production ones and see how it goes. Rgds,

Martin Parkes commented on May 22, 2023

Everything runs on Window Server 2019 Standard. All necessary folders have the relevant read/write access. Temp files are being created, etc

Sebastian Morales commented on May 22, 2023

Thank you. I meant your web server software which is used to serve your PHP/html project, not the operating system.

Martin Parkes commented on May 22, 2023

I use PHP manager 1.5 within IIS 10

Sebastian Morales commented on May 22, 2023

Can you please open the .tmp file and view your web's page source (Ctrl + U) to compare their KoolReport.js src paths? Tks,

Martin Parkes commented on May 22, 2023

I've already done that and mentioned it above. They are all pointing to the correct location and I get no errors when pressing F12 either

Sebastian Morales commented on May 24, 2023

Would you pls rename the .tmp file to .html, open it in a browser with Dev tool's Network tab opened (reload the page after opening dev tool if needed) to see if all resource files (js, css) are loaded?

Martin Parkes commented on May 25, 2023

Hi, I get this error "KoolReport.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND", but it is pointing to the correct location to load the file.

<script  type='text/javascript'  src='/_includes/vendor/koolreport/core/src/clients/core/KoolReport.js'></script>

This is where the file is actually located, so not sure why it cannot locate it. This is all the javascript code:

<script type="text/javascript">
KoolReport.widget.init({"js":["\/_includes\/vendor\/koolreport\/core\/src\/clients\/jquery\/jquery.min.js",["\/_includes\/vendor\/koolreport\/core\/src\/widgets\/koolphp\/table\/table.js"]],"css":["\/_includes\/vendor\/koolreport\/core\/src\/widgets\/koolphp\/table\/table.css"]},function(){
    ktable646f336aafc091 = new KoolReport.koolphp.table('ktable646f336aafc091',{"cKeys":["wrk"],"removeDuplicate":[],"paging":null});
        });
</script></krwidget></div>

<div style="border:solid 1px #ccc;margin-top:12px">
    <h2 class="text-center">Upskilling breakdown by Programme</h2>
<krwidget widget-name='gchart646f336ac275c2' widget-type='koolreport/widgets/google/PieChart'><div id="gchart646f336ac275c2" style="width:100%;height:400px;"></div>
<script type="text/javascript">
    KoolReport.widget.init({"js":["\/_includes\/vendor\/koolreport\/core\/src\/clients\/jquery\/jquery.min.js",["\/_includes\/vendor\/koolreport\/core\/src\/widgets\/google\/clients\/googlechart.js"]],"css":[]},function(){
        gchart646f336ac275c2 = new KoolReport.google.chart("PieChart","gchart646f336ac275c2",["programme","worked"],[["programme","worked"],["40242 | Prog1",{"v":915,"f":"15:15 hrs"}],["40243 | Prog2",{"v":4620,"f":"77:00 hrs"}],["40248 | Prog3",{"v":120,"f":"02:00 hrs"}],["40540 | Prog4",{"v":120,"f":"02:00 hrs"}],["40880 | Prog5",{"v":37560,"f":"626:00 hrs"}]],{"is3D":true},{"package":"corechart","stability":"current","language":"en","mapsApiKey":""});
                            });
</script></krwidget>
Sebastian Morales commented on May 25, 2023

Did this happen on your local dev machine or your server? That url's full path is:

http(s)://localhost/_includes/vendor/koolreport/core/src/clients/core/KoolReport.js

http(s)://{server name}/_includes/vendor/koolreport/core/src/clients/core/KoolReport.js

Pls try to use a setting called "serverLocalAddress" like this:

$report->export(...)
->settings(array(
    ...
    "serverLocalAddress" => "ServerName", // or "localhost"
))
->pdf(array(
    ...
))
->toBrowser("report.pdf"); 

https://www.koolreport.com/docs/export/get_started/#settings

Martin Parkes commented on May 25, 2023

I've added that code and still nothing, doesn't look like it's used the server address.

    ->settings([
        //"autoDeleteTempFile" => true,
        "useLocalTempFolder" => true,
        "serverLocalAddress" => "http://www.applink1.sir/",
        "resourceWaiting"=>2000
    ])

Have also tried setting the assets locations:

"assets"=>array(
                "path"=>_ROOT_PATH."_reports_output/",
                "url"=>"/_reports_output/"
            ),

In the renamed tmp file, the javascript at the top of the page is this and is in the correct file location:

<script  type='text/javascript'  src='/_reports_output/4199708146/KoolReport.js'></script>

Code of the bottom of the page:

<script type="text/javascript">
KoolReport.widget.init({"js":["\/_reports_output\/\/1585769140\/jquery.min.js",["\/_reports_output\/\/1338980318\/table.js"]],"css":["\/_reports_output\/\/1338980318\/table.css"]},function(){
    ktable646f3c5c66f941 = new KoolReport.koolphp.table('ktable646f3c5c66f941',{"cKeys":["wrk"],"removeDuplicate":[],"paging":null});
        });
</script></krwidget></div>

<div style="border:solid 1px #ccc;margin-top:12px">
    <h2 class="text-center">Upskilling breakdown by Programme</h2>
<krwidget widget-name='gchart646f3c5c7a0bf2' widget-type='koolreport/widgets/google/PieChart'><div id="gchart646f3c5c7a0bf2" style="width:100%;height:400px;"></div>
<script type="text/javascript">
    KoolReport.widget.init({"js":["\/_reports_output\/\/1585769140\/jquery.min.js",["\/_reports_output\/\/2790836649\/googlechart.js"]],"css":[]},function(){
        gchart646f3c5c7a0bf2 = new KoolReport.google.chart("PieChart","gchart646f336ac275c2",["programme","worked"],[["programme","worked"],["40242 | Prog1",{"v":915,"f":"15:15 hrs"}],["40243 | Prog2",{"v":4620,"f":"77:00 hrs"}],["40248 | Prog3",{"v":120,"f":"02:00 hrs"}],["40540 | Prog4",{"v":120,"f":"02:00 hrs"}],["40880 | Prog5",{"v":37560,"f":"626:00 hrs"}]],{"is3D":true},{"package":"corechart","stability":"current","language":"en","mapsApiKey":""});
                            });
</script></krwidget>
Martin Parkes commented on May 25, 2023

Bit of an update, when I rename the .tmp file to html and run that through the browser using the full url http://www.applink1.sir/tmp/646f3c5c7a4e03.html it displays the graph, however the PDF file still doesn't.

Sebastian Morales commented on May 26, 2023

Pls try:

    ->settings([
        ...
        "serverLocalAddress" => "www.applink1.sir", // remove protocol part: "http://"
    ])
Martin Parkes commented on May 26, 2023

Still doesn't work

Sebastian Morales commented on May 26, 2023

How about using localhost instead:

    ->settings([
        ...
        "serverLocalAddress" => "localhost"
    ])
Martin Parkes commented on May 26, 2023

Still nothing, the renamed .tmp file still produces the chart just not the actual PDF file

Sebastian Morales commented on May 26, 2023

Ok, let's test the phantomjs.exe file inside koolreport/export/bin with the following examples:

https://phantomjs.org/screen-capture.html

Replace the examples' url with your report's web page url that includes charts:

//report.js
var page = require('webpage').create();
page.open('http://www.applink1.sir/myReport.php', function() {
  page.render('report.png');
  phantom.exit();
});

In command line run:

...koolreport/export/bin/phantomjs.exe report.js

Let us know whether the generated image shows charts.

Martin Parkes commented on May 26, 2023

Have managed to sort it. Thinking it may be a DNS issue, I've changed the url to http://ts2.rtcnorth.info/, which is globally controlled via our server and not using the local host file as the other url was. Changed the "serverLocalAddress" => "ts2.rtcnorth.info" and everything now works.

Think this is an issue purely for Windows Servers. Thanks for all your help with this matter and sorry that after everything it was my side of things.

Sebastian Morales commented on May 29, 2023

Martin, it's great to know you solved the chart export problem. And no need to sorry at all. We are always happy to help customers debug any problem with using our products regardless of its origin. Cheers,

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