Skip to Content (Press Enter)
2012-03-02 13-17-21
Paulo Ramos
Staff
739Views
17Comments
Export charts (8.0) to PDF (with sample)
Discussion
Charts
How-to
PDF
So, you've built some nice detailed charts using platform's version 8 chart component (see NextStep presentation here). And now you want to export those charts to PDF.

As it can be a bit tricky, I'm sharing my recent experience:

  • Always enclose the chart webblock in a container with a fixed width. You can use the grid (don't use fill parent) or plain CSS, but if you don't specify a width, the chart is likely to be missing in the PDF (at least if you use one of the components below).
  • Which component to use? I'm aware of two in the Forge:
    • URL to PDF: based on winnovative-software.com (trial).
      • I couldn't make it work with the platform charts - they just aren't rendered.
      • However, I know that the component can render SVG, as I did a few tests (including rendering the platform's chart output as an unescaped expression). I suspect the platform's script generated for each chart may be the cause. If any of you makes this work, let us know!
    • Html to PDF/Image Converter: based on webkit rendering engine, and qt.
      • It works!
 
See attached a sample (it requires the 2nd component above) with a few example charts.

Sample screenshots:


ChartToPdf.oml
12
0
17 Oct 2013
Copy Link
2024-01-22 15-21-29
Pedro Cardoso
Ni Paulo :)

Thanks for the topic! Exporting to PDF is always a request, and we were missing a great topic like this.

The only think missing is a great music band :P
2
0
18 Oct 2013
Copy Link
2012-03-02 13-17-21
Paulo Ramos
Staff
You're obviously suffering from jet lag Cardoso, so I'll let this one pass.

PS: I misspelled Achtung Baby. Unforgivable. Thinking about harakiri now.
0
0
18 Oct 2013
Copy Link
2024-01-22 15-21-29
Pedro Cardoso
AHAHAHAHA!!!


0
0
20 Oct 2013
Copy Link
2011-06-15 10-51-22
Joop Stringer
HighCharts itself has a possibility to export the chart (not the whole page) to PDF, png/jpeg
Howeverrrrr .... this is not implemented in the outsystems implementation of HighCharts ... check this https://www.highcharts.com/demo/ and use the "bar-button" on tyhe right.
It all depends on a single js that needs to be added :-)
0
0
07 Jan 2014
Copy Link
UserImage.jpg
joshua siscar
would this still work with the lastest update of outsystems? I am having a hard time trying to make this work
0
0
22 Aug 2014
Copy Link
2012-03-02 13-17-21
Paulo Ramos
Staff
Hi Joshua,
If you add more details about the issue you're facing maybe someone is able to to help you...
0
0
25 Aug 2014
Copy Link
2023-08-19 05-23-29
Joshua Austin
I'm having trouble with this on version 9 as well.  For example, when I try to export a PDF with a highchart that looks like this:


It exports to the PDF looking like this:


The download issue is happening using the same user and the same input parameters to the webscreen as when I preview it in the browser.
1
0
07 Jun 2015
Copy Link
UserImage.jpg
Conwell Nkuna

I'm having trouble, 


I have charts on my pdf but they aren't showing even though i enclose them inside a container widget and give it a fixed width,


My screen looks like this

But when I download,


I get this page with no chart on it



I can't figure out what the problem might be, Please Help?

0
0
16 Sep 2016
Copy Link
UserImage.jpg
Bruno Paixao

Hi,


I'm basically facing the same issue (using bali), the charts are not shown in the generated PDF.  


Any way to make it work?


Thanks.



Edit: got it to work by closely following the attached example. Thanks.

0
0
20 Sep 2016
Copy Link
UserImage.jpg
Conwell Nkuna

Bruno Paixao wrote:

Hi,


I'm basically facing the same issue (using bali), the charts are not shown in the generated PDF.  


Any way to make it work?


Thanks.



Edit: got it to work by closely following the attached example. Thanks.


Which binaries did u download?..The MinGW or MSVC......am using MinGW but it isn't working at all

0
0
10 Oct 2016
Copy Link
UserImage.jpg
Bruno Paixao

Hi,


I downloaded the "wkhtmltox-0.12.3.2_msvc2013-win64.exe" file, from the Stable release download link.

I unzipped it and extracted the "wkhtmltopdf.exe" file, which I uploaded to the administration page as shown bellow:

Now, what really made a difference, in order to be able to print the charts, was having a fixed Grid Type in the theme applied to the page I wanted to print (I created a clone of the page with a custom theme, basically, only changed the grid type option)! 

Hope it helps.

0
0
10 Oct 2016
Copy Link
UserImage.jpg
Conwell Nkuna

Bruno Paixao wrote:

Hi,


I downloaded the "wkhtmltox-0.12.3.2_msvc2013-win64.exe" file, from the Stable release download link.

I unzipped it and extracted the "wkhtmltopdf.exe" file, which I uploaded to the administration page as shown bellow:

Now, what really made a difference, in order to be able to print the charts, was having a fixed Grid Type in the theme applied to the page I wanted to print (I created a clone of the page with a custom theme, basically, only changed the grid type option)! 

Hope it helps.

I resized the container that encloses the chart to be 11 columns. (Not Fill parent). which is what this documentation suggest. Is that what you mean by changing the grid type?

Then I set the height of the chart as well. But still I get a pdf that renders the container only. Chart invisible.





0
0
10 Oct 2016
Copy Link
UserImage.jpg
Bruno Paixao

Conwell Nkuna wrote:

Bruno Paixao wrote:

Hi,


I downloaded the "wkhtmltox-0.12.3.2_msvc2013-win64.exe" file, from the Stable release download link.

I unzipped it and extracted the "wkhtmltopdf.exe" file, which I uploaded to the administration page as shown bellow:

Now, what really made a difference, in order to be able to print the charts, was having a fixed Grid Type in the theme applied to the page I wanted to print (I created a clone of the page with a custom theme, basically, only changed the grid type option)! 

Hope it helps.

I resized the container that encloses the chart to be 11 columns. (Not Fill parent). which is what this documentation suggest. Is that what you mean by changing the grid type?

Then I set the height of the chart as well. But still I get a pdf that renders the container only. Chart invisible.





Hi,

Grid type is a theme property, see link below. 

https://www.outsystems.com/help/ServiceStudio/9.0/User_Interface/Theme_Properties.htm

I created a custom theme, based on the application theme, I was using dublin, and i changed grid type to fixed. 

I then applied that theme to the page I  wanted to print. I used a copy of the page, only for printing, basically I followed the example attached by the OP. Get it here: 

https://www.outsystems.com/NetworkForums/Public.Download_Attachment.aspx?AttachmentId=2812


Hope that makes it clear.


0
0
10 Oct 2016
Copy Link
UserImage.jpg
Conwell Nkuna

Bruno Paixao wrote:

Conwell Nkuna wrote:

Bruno Paixao wrote:

Hi,


I downloaded the "wkhtmltox-0.12.3.2_msvc2013-win64.exe" file, from the Stable release download link.

I unzipped it and extracted the "wkhtmltopdf.exe" file, which I uploaded to the administration page as shown bellow:

Now, what really made a difference, in order to be able to print the charts, was having a fixed Grid Type in the theme applied to the page I wanted to print (I created a clone of the page with a custom theme, basically, only changed the grid type option)! 

Hope it helps.

I resized the container that encloses the chart to be 11 columns. (Not Fill parent). which is what this documentation suggest. Is that what you mean by changing the grid type?

Then I set the height of the chart as well. But still I get a pdf that renders the container only. Chart invisible.





Hi,

Grid type is a theme property, see link below. 

https://www.outsystems.com/help/ServiceStudio/9.0/User_Interface/Theme_Properties.htm

I created a custom theme, based on the application theme, I was using dublin, and i changed grid type to fixed. 

I then applied that theme to the page I  wanted to print. I used a copy of the page, only for printing, basically I followed the example attached by the OP. Get it here: 

https://www.outsystems.com/NetworkForums/Public.Download_Attachment.aspx?AttachmentId=2812


Hope that makes it clear.


Thanks for your help bud, unfortunately it didn't work for me.

I'm using two themes in one app, Tokyo and LondonFixed and I just checked the property Grid Type is fixed as well. The printable report flow uses LondonFixed since it doesn't work with SILK UI themes, Its just strang because it does render all the other Elements excepts the charts. No JavaScript error, no nothing man.


Something is just wrong with the binaries am using. Guess I just have to figure it out.




0
0
11 Oct 2016
Copy Link
UserImage.jpg
Bruno Paixao

Yeah, this one wasn't easy to get it to work, I basically tried to copy every small detail from the example the OP gave us.


He did give special attention to this:

"Always enclose the chart webblock in a container with a fixed width. You can use the grid (don't use fill parent) or plain CSS, but if you don't specify a width, the chart is likely to be missing in the PDF (at least if you use one of the components below)."


Also there's one detail that might do the trick. He uses a specific layout in the print page: it's a layout with one single placeholder for main content. Try to copy or create a similar layout, and apply it to the print page.




I any case, I made it work, and all I did was to copy every little detail in the example.

good luck

1
0
11 Oct 2016
Copy Link
UserImage.jpg
Prajjwal Rai

Hello all

I am trying to generate charts in my pdf but they are not being rendered

I tried the fixed width of the container approach but it didn't work

Any suggestions?

0
0
21 Jun 2018
Copy Link
UserImage.jpg
Prajjwal Rai

Prajjwal Rai wrote:

Hello all

I am trying to generate charts in my pdf but they are not being rendered

I tried the fixed width of the container approach but it didn't work

Any suggestions?

If anyone is facing the same problem, just enclose the chart in a container and assign the width and min height in pixels only

No need to change the grid type 

It worked for me

Cheers

Prajjwal

0
0
25 Jun 2018
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.