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:
View the Page Source of any page of your application and look for the OSHighCharts.js script:
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:
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
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:
Now, on the screen where you have your Chart, we will include the HighCharts exporting library by creating a ‘script’ Expression, setting it like:
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.
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:
You can use this Property to set your own layout and design customizations as well. Some examples follow:
Menu Item Styling
Combined Symbol and Text
To further style or configure, the full list of HighChart Exporting options is fully described on HighCharts API Online Reference.
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.
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