How to Export from a HighCharts to PDF or image

How to Export from a HighCharts to PDF or image

  
How often you look into your beautifully rendered charts on your OutSystems enterprise applications and wonder how can you export it to print it later. In this How-to, I will try to explain how simple it is to create an application and export the Chart you created to a PDF document in OutSystems Platform.

Step 1 - Include the Chart Exporting library into your Application


OutSystems Platform includes the Charts Component built in so you can create Charts on your web applications. The Charts Component leverages the HighCharts freeware library APIs to render the charts, but it does not yet include support for the High Charts Export module, that allows exporting to PDF, PNG, JPG, SVG formats. You will need to include the Exporting library file from HighCharts on your OutSystems application.


To do this, you first need to check what version of HighCharts is being used on your OutSystems Platform:


  1. View the Page Source of any page of your application and look for the OSHighCharts.js script:



  1. Open the link, and check the version of the HighCharts being used. You should see something like this:


Then you need to go into HighCharts and download the correct version. In this case, 3.0.9:


  1. Open http://code.highcharts.com/

  2. As stated on the website, you'll find a specific HighCharts version by appending the version number to the root level. For the 3.0.9 version, this would be the link to open: http://code.highcharts.com/3.0.9/modules/exporting.js

  3. Save this file into your local drive.


Finally, you need to import the “exporting.js” file as a resource for your OutSystems application. Make sure you select the option to Deploy to Target Directory on the Deploy Action property. You should end up by have something like this:



Step 2 - Include the HighCharts Export context menu to your Chart


Now, on the screen where you have your Chart, we will include the HighCharts exporting library by creating a ‘script’ Expression, setting it like:


"<script type=""text/javascript"" src=""/" + GetEntryEspaceName() + "/exporting.js""></script>"


Make sure to set the “Escape Content” property of the Expression to No as the expression contains characters (e.g. “<”) that can not be escaped. Optionally, you can set the Example property of the Expression to describe what the script does.


The script will render a Context Menu on your Chart from where you will have the Export options.



Step 3 - Enable the Exporting feature on your Chart


On the screen where you have your Chart, create a Local Variable with the following type “Record<AdvancedFormat>” as displayed in the following picture.



On the Preparation Action, set the Options.AdvancedFormat.HighchartsJSON property to the following JSON code snippet to expose the Export action from the HighCharts component:


"
exporting: {
           enabled: true
       }
"


You can use this Property to set your own layout and design customizations as well. Some examples follow:


To further style or configure, the full list of HighChart Exporting options is fully described on HighCharts API Online Reference.


Step 4 - Bootstrap the Chart with our data

For this How-to, I’ve used an Excel spreadsheet with very simple data to bootstrap seed data into the chart. The spreadsheet is attached as a resource to the sample application. To know how to import from an MS-Excel check out this link.


Step 5 - Try it out and export your Chart to PDF

Launch the application, go to the context menu and select the Download PDF document option and there you go.



And that’s it!! Very simple, right?


Please check the attached file with the sample application used in this post. You can also try it out at https://nunoribeirobatista.outsystemscloud.com/ChartsExport/Charts.aspx


Feel free to comment, suggest or improve.