Export charts (8.0) to PDF (with sample)

Export charts (8.0) to PDF (with sample)

  
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:


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
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.
AHAHAHAHA!!!


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 http://www.highcharts.com/demo/ and use the "bar-button" on tyhe right.
It all depends on a single js that needs to be added :-)
would this still work with the lastest update of outsystems? I am having a hard time trying to make this work
Hi Joshua,
If you add more details about the issue you're facing maybe someone is able to to help you...
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.

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?

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.

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

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.

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.





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. 

http://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.


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. 

http://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.




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