KoolReport's Forum

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

Custom client-side Pie chart not showing at germany server #1745

Open Mukesh opened this topic on on Dec 3, 2020 - 61 comments

Mukesh commented on Dec 3, 2020

Hello Team,

We are using an export package to generate report PDF. Our code working on another server but the same code not working on the Germany server. PDF generating but image and pie chart won't display.

Sebastian Morales commented on Dec 3, 2020

Mukesh, pls give more information on your servers' environment (OS, http server, php version, etc.) Post your report pdf view code if you can. Sincerely,

Mukesh commented on Dec 3, 2020

Hello,

We are using: os amazon linux ami Server: Apache PHP Version: php 7.1

Sebastian Morales commented on Dec 4, 2020

Did our standard pdf export example work ok on your Germany server (copy the example code to your server)

https://www.koolreport.com/examples/reports/export/sakila_rental/

You could also try to increase export's "resourceWaiting" setting:

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

Mukesh commented on Dec 4, 2020

The report is generating but the pie chart and image won't display in PDF. Same code working on same server but location is different.

Sebastian Morales commented on Dec 8, 2020

Pls be more specific. Which report (yours or our Sakila example) didn't show chart? And did you increase "resourceWaiting" to more than the default value which is 1000 microseconds. Don't be general or we can't help you in detail.

Mukesh commented on Dec 8, 2020

Already checked with "resourceWaiting" option but the same result. This code working well on local and AWS servers, Same code does not work on the AWS Germany location server. The report is generating thing is image and chart won't show in the report. This is my PHP Code

$report->export('Template_First')
			->pdf(array(
					"format"=>"A4",
					"orientation"=>"portrait"
				)
			)->saveAs($pdfPath);

Below is js code

<script>
	// Pie Chart 1
	var chartNo = 1;
	var dataArray = ['40', '39', '55', '20'];
	var labelArray = ["Extreme", "High", "Medium", "Low"];
	var bgArray = ["#5a9bd5", "#ed7d31", "#a5a5a5", "#ffc000"];
	drowPieChart(dataArray, labelArray, bgArray, 1);
	
	function drowPieChart(dataArray, labelArray, bgArray, chartNo){
		var data = {
			datasets: [{
				data: dataArray,
				backgroundColor: bgArray,
				borderColor: ['#666666', '#666666', '#666666', '#666666'],
				borderWidth: [1,1,1,1]
			}],
			labels: labelArray,
		};
		var pieOptions = {
			legend: {
				position: 'top',
	            display: true,
	            //fullWidth: true,
	            align:"center",
	            //boxWidth:20,
	            //itemWidth: 100,
	            labels: {
          			usePointStyle: false,
       			}
            },
			responsive: true,
			maintainAspectRatio: false,
			events: false,
			animation: {
				duration: 0,
				easing: "easeOutQuart",
				onComplete: function () {
					var ctx = this.chart.ctx;
					ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
					ctx.textAlign = 'center';
					ctx.textBaseline = 'bottom';
					//ctx.width=500;
					//ctx.height = 500;
					
					this.data.datasets.forEach(function (dataset) {
						for (var i = 0; i < dataset.data.length; i++) {
							var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model,
							total = dataset._meta[Object.keys(dataset._meta)[0]].total,
							mid_radius = model.innerRadius + (model.outerRadius - model.innerRadius)/2,
							start_angle = model.startAngle,
							end_angle = model.endAngle,
							mid_angle = start_angle + (end_angle - start_angle)/2;
							
							var x = mid_radius * Math.cos(mid_angle);
							var y = mid_radius * Math.sin(mid_angle);
							
							ctx.fillStyle = '#fff';
							var percent = (dataset.data[i]/total*100).toFixed(2);
							percent = String(percent)+"%";
							ctx.fillText(data.labels[i], model.x + x, model.y + y);
							// Display percent in another line, line break doesn't work for fillText
							ctx.fillText(percent, model.x + x, model.y + y + 15);
						}
					});
				}
			}
		};
		var pieChartCanvas = document.getElementById("myChart"+chartNo).getContext('2d');

		var pieChart = new Chart(pieChartCanvas, {
			type: 'pie', // or doughnut
			data: data,
			options: pieOptions
		});
	
	}
	</script>

Below is HTML Code

<div style="border:1px solid #cccccc; padding:10px 5px;">
	<canvas id="myChart1" width="300" height="300"></canvas>
</div>

Sebastian Morales commented on Dec 9, 2020

It looks like you use chart client control directly instead of our Chart packages. There could be a problem with loading your client chart library on your Germany server.

I see two options, either using our Chart packages (Google, Morris, Chartjs, D3, etc) or letting us know how you import the client Chart library and from which source so we could help you fix it?

Mukesh commented on Dec 11, 2020

Yes, we are using an external chart library JSChart. The same library we are using in our software so everything is working except this. This library calling from our server only.

Sebastian Morales commented on Dec 14, 2020

Ok, please use "useLocalTempFolder" => true in your pdf export setting. Then run export on your Germany server and check the report's local tmp folder to look for a .tmp file. Open it to verify the path to your chart js library file in that file is accessible from your server.

Mukesh commented on Dec 16, 2020

We tried with "useLocalTempFolder" => true, After that we run is giving error mkdir(): Permission denied

Sebastian Morales commented on Dec 17, 2020

Can you access your Germany server's system temporary directory? If you can, pls run export and open system temporary directory to read the the latest .tmp file which is indeed a html file. Then verify that its js chart library link can be accessible from your server.

Mukesh commented on Dec 21, 2020

We didn't find out any temp folder on the server. My report contains a header image, chart, and table it worked very well on screen, but when i try to export into pdf, the Report exporting but the image and chart not showing the image, and the chart section always blank. Same code with same configuration and same permission working on my other servers only not working on Germany server. Please advise ASAP.

David Winterburn commented on Dec 21, 2020

Hi Mukesh,

Please open the file koolreport/export/Handler.php on your Germany server and replace the following line:

    $output = $this->getTempFolder()."/".Util::getUniqueId().".pdf";

with:

    $output = $this->getTempFolder()."/".Util::getUniqueId().".pdf";
    echo "output = $output"; exit;

Then run export to see the output path. Go to it and open the latest .tmp file (html content) to verify that your chart js path is accessible from your server. Thanks!

Mukesh commented on Dec 21, 2020

We tried with your code it's giving output = /tmp/5fe05195a0e092.pdf but we didn't find out this path on the server. May I know any dependency for showing images in the report because the image also not showing.

David Winterburn commented on Dec 21, 2020

Hi Mukesh,

Obviously, your server's system temporary folder is "/tmp" and the .tmp file should be " /tmp/5fe05195a0e092.tmp". It's linux operating system, you would have to browse to your root "/" folder then to the "tmp" folder right under root. As to how to get to your root please contact your server admin/support. Normally it could be done by ssh or sftp to the server.

Mukesh commented on Dec 21, 2020

I have already checked the file on your given path but it's not there, please write me the dependency of the image in your plugin.

David Winterburn commented on Dec 21, 2020

Hi Mukesh,

The chart image is rendered dynamically by Phantomjs headless browser using js from your chart library. It certainly wasn't rendered at all because the pdf didn't show it. The cause might be your chart library path which I think your Germany server can not access. Try to access your chart library path from your Germany server and let us know the result.

Mukesh commented on Dec 21, 2020

For the time if we can forget the chart library issue but the logo image also not showing and the same code working on other servers.

Sebastian Morales commented on Dec 21, 2020

For image to be able to display in pdf page's header the web server must enable cache policy for image with timeout > 0. Depending your type of web server (apache, nginx, etc) pls enable cache policy for image type.

Lawrbit commented on Dec 22, 2020

Hi Sebastian,

'Cache-Control' => 'max-age=86400' is already set on the domain but the image is not working, As i checked the forced html page all image are coming (logo and graph image) but somehow its not rendering in pdf.

Sebastian Morales commented on Dec 22, 2020

Lawrbit, pls try moving the image to the report pdf view page's body to see if it shows in pdf? If it does, pls keep it in both header and body but hide it in body with css like this:

<body>
        <div class='page-header' style='height:30px'>
            <img src='path/to/image.jpg' />
        </div>
        
         <div style='display:none'>
            <img src='path/to/image.jpg' />
        </div>       
 </body>   

Anyway, please post your pdf view code for us to have an idea of your page.

Mukesh commented on Dec 22, 2020

Hi,

We already using both method to display image, Have look below code.

<img src="https://www.imageurl.com" style="float:right; width:80px; margin-right: 2px; display:none;">
	<div class="page-header" style="height:65px; margin-right: 0px; padding: 0px;">
		<div style="color:#333333; width:100%; font-size:11px; border-bottom:1px solid #666666; padding-bottom:5px; height: 40px;">
			<div style="float: left; text-align:left; width:70%; padding-top:8px;">
				<strong style="font-size:13px; color:#000000;"><?php echo $dataArray['company_name'];?></strong><br>
				<span style="font-size:8px; color:#333333; font-style: italic;">Compliance Status Report for <?php echo $dataArray['from'];?> to <?php echo $dataArray['to'];?></span>
			</div>
			<div style="float: right; width:30%; padding-top:8px;">
				<a style="float:right;"><img src="https://www.imageurl.com" style="float:right; width:80px; margin-right: 2px;"></a>
			</div>
		</div>
	</div>
Sebastian Morales commented on Dec 22, 2020

Pls ssh to your Germany server, run this command in terminal and let me know the result:

    curl -sSL -D - url/to/your/image -o /dev/null

Remember to replace url/to/your/image with your real url to the image you use in your pdf view.

Mukesh commented on Dec 22, 2020

I was run your command on my server below is result:

HTTP/2 200 
date: Tue, 22 Dec 2020 10:25:04 GMT
content-type: image/png
content-length: 3238
server: Apache/2.4.41 () OpenSSL/1.0.2k-fips PHP/7.1.20
x-powered-by: PHP/7.1.20
content-disposition: inline;
cache-control: max-age=86400, private
Sebastian Morales commented on Dec 22, 2020

If you remove "display:none" from the body's img tag, does it show in pdf body?

Mukesh commented on Dec 22, 2020

No, Image not displaying.

Sebastian Morales commented on Dec 22, 2020

Can you try to change your Apache's cache policy from:

    cache-control: max-age=86400, private

to:

    cache-control: max-age=86400, public

to see if the image could be shown in pdf header.

Mukesh commented on Dec 23, 2020

We have the same configuration, same setting, and same code on our test server. We did public image won't display.

Sebastian Morales commented on Dec 24, 2020

Pls try removing all content of your report pdf view and leave only this and run export to pdf:

    <img src="<?php echo $imageUrl; ?>" style="float:right; width:80px; margin-right: 2px;">
    Hello world

Let us know the result of the exported pdf.

Mukesh commented on Dec 28, 2020

We tried with your code, Image won't display, we also check image URL is correct.

Sebastian Morales commented on Dec 28, 2020

Ok, let's try this. Save the following content to a html file called image.html on your Germany server:

    <img src="<?php echo $imageUrl; ?>" >
    Hello world

Then open its Germany url on your browser and let us know if you could see the image. If it does, create the a js file called image.js on your Germany server with this content:

var page = require('webpage').create();
page.open("{UrlOfImageHtml}", function() { //replace {UrlOfImageHtml} with your url of image.html on your server
  page.render('webpage.png');
  phantom.exit();
});

Then run the following terminal command on your server:

    phantomjs image.js

Then check the generated webpage.png to see if your image shows.

Mukesh commented on Dec 28, 2020

We tried with the above code image file is generated but it's blank, below is generated image file.

Sebastian Morales commented on Dec 28, 2020

How about this: create phantomjs.js with this content:

var page = require('webpage').create();
page.open('https://phantomjs.org/screen-capture.html', function() {
  console.log('page open');
  page.render('phantomjs.jpg');
  phantom.exit();
});

Then run terminal command:

phantomjs phantomjs.js

Let us know the result of phantomjs.png.

Mukesh commented on Dec 28, 2020

We tried with the above code image file is generated but it's blank.

Sebastian Morales commented on Dec 28, 2020

I updated the js code to new url of phantomjs page because github page crashes phantomjs. Pls let us know the result of phantomjs.png.

Mukesh commented on Dec 28, 2020

The same result sir file is blank.

Sebastian Morales commented on Dec 28, 2020

Your phantomjs install has problem. Pls reinstall and test it untill "phantomjs phantomjs.js" produces result like this:

Mukesh commented on Jan 5, 2021

Hello,

We reinstalled phantoms now image is displaying but chart won't display.

Sebastian Morales commented on Jan 7, 2021

Please test it with our standard export example on your server:

https://www.koolreport.com/examples/reports/export/sakila_rental/

Let us know if this example can produce chart on your server or not. Thanks!

Mukesh commented on Jan 7, 2021

We did troubleshoot on our server and we removed charts for the timing but now issue is font showing defferent-2 on our all server.

Sebastian Morales commented on Jan 7, 2021

It's understandable with the font as export's browser engine relies on system fonts for rendering web page like many others do. Check your font family, font encoding and install the same font packages for all of your servers should solve the problem.

Mukesh commented on Jan 9, 2021

Hi, Thanks for the help. I call font through @import in CSS its working fine at local.

Mukesh commented on Jan 11, 2021

Hello,

We are importing font in css: @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap');

It's working very well on servers except the German server what should we do?

Sebastian Morales commented on Jan 11, 2021

Pls ssh to your German server, run this command to see if it returns correct content or error:

curl "https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap"

Mukesh commented on Jan 11, 2021

We run given command result is:

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UN_r8-VQ.ttf) format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-U1Ug.ttf) format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UNirk-VQ.ttf) format('truetype');
}
Sebastian Morales commented on Jan 11, 2021

The result looks good. Pls try another command:

curl "https://fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UN_r8-VQ.ttf"
Mukesh commented on Jan 12, 2021

We run the given command result is OK and downloading font.

Mukesh commented on Jan 21, 2021

We are waiting for your reply.

Sebastian Morales commented on Jan 21, 2021

Would you pls remind me again whether you are using Export or CloudExport package? Tks.

Mukesh commented on Jan 21, 2021

We are using export package.

Sebastian Morales commented on Jan 21, 2021

Pls try to add a direct link to the online font at the beginning of your pdf view:

<link href='https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap' rel='stylesheet' type='text/css'>

Try to test cases with both keeping and removing css @import.

Mukesh commented on Jan 21, 2021

We generate the report with @import. and without @import. no changes same result showing.

Mukesh commented on Jan 28, 2021

We are waiting for your reply.

David Winterburn commented on Jan 28, 2021

When you use @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap'); on your report web view, does it show the font correctly?

Mukesh commented on Jan 28, 2021

Yes

David Winterburn commented on Jan 28, 2021

Ok, so your web browser works fine. Please ssh to your German server terminal and try to run PhantomJS' screen capture like description in this link:

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

Replace the github url with the url of your report which uses Google font. Let us know if the rendered pdf shows the Google font correctly or not.

Mukesh commented on Jan 29, 2021

We already did this font not working.

Mukesh commented on Feb 5, 2021

Hello Team,

I am waiting for your reply, What we can do?

David Winterburn commented on Feb 5, 2021

Ok, there's one last test you could do. Please save the google font css together with the .woff2 font files to your German server:

https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap

Then edit the local Google font css file to use the local .woff2 and make your web and pdf view use the local Google font css file. Finally check your report web view to make sure the Google font style works, then try pdf export. Send us the screenshot of the report web view using local Google fonts.

Mukesh commented on Feb 11, 2021

We tested with same as per your guide but unfortunately, it's not working.

David Winterburn commented on Feb 12, 2021

Which isn't working, Google font in your report's web view or pdf export or both?

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