Cannot render PDF with Chart.js and data passed through JSON input

pierfreeman

Hi everyone,

I installed JSreport on my server, where I use it as report service for my Angular 4 Application.

I currently designed a client service that sends JSreport HTTP request to the server. These requests wrap the data to be displayed in report, including information (data and options) to be passed to Chart.js in order to render a bar chart inside the pdf. These Chart.js information are the same as my application, which render perfectly.

Unforunately, I am not able to render the PDF with the chart, if the data and options are passed as input, giving me a Timeout error.
I am able to render a simple chart with simple data defined in the template, but no way if I try to bind it with the input data.
The problem occurs only with the chart, since if I try to render the pdf with only the tabular data, it successes.

Everything is set up as the docs say: PhantomPDF config set for waiting the trigger, chart animation callback option set to true, helper function toJSON defined. No results.

Here a playground with the example:
https://playground.jsreport.net/studio/workspace/H14q_Nndb/6

jan_blaha

Hi,

try to turn off waiting for the printing trigger option and run the template with debug button. You will see some javascript errors you need to solve

+186 TypeError: undefined is not an object (evaluating 'a.data.datasets')

jan_blaha

At the first glance... you should use {{{toJSON this}}}. Three curly brackets.

pierfreeman

I'm sorry, checking what you said made me realize that I haven't set the sample data binding property...but also setting it, it still gives me the error (even with the three curly brackets).

Now in debug mode it gives me:
TypeError: 'undefined' is not an object (evaluating 'l.getBasePixel')

I suspect it could be an error of Chart.js, what do you think?

jan_blaha

No problem and thanks for the verbose description.

Does it work for you now with html recipe? That is usually the first step. Then you try it with phantom and in the end with printing trigger.

pierfreeman

That's me that must thank you for your immediate reply :) It's not common to receive support within minutes.

Actually, I made it working.
Apparently the bug was in my chart data: I was setting options for the axis (yAxes and yAxisID) with a Chart.js version (2.1.6) that probably didn't not support them yet...I'll try to use a more recent version of chart.js and see if it works.