This is a Highcharts Demo for Reactive Applications.

Please note here i have used Highcharts version 10.3.3 library.

You can refer to the Highcharts samples in the following document (index.htm).

https://www.highcharts.com/blog/download/ (Download Highcharts 10.3.3 Library)

Steps to Build a Highcharts based on Sample Data.

1. Download the HighCharts 10.3.3 library here, Use Below Link. https://www.highcharts.com/blog/download/

2. Open up the downloaded folder, expand the ‘examples’ folder, then select appropriate graph folder and open it and double click the html file inside to view it in the browser.

3. If the graph meets what you are looking for, right click in the browser and select ‘View page source’ or view the html. For this I am using HighChart example, we will use the ‘network-graph’ folder as seen below.

4. Scroll down past the CSS and you should see script tags importing HighChart.js files.

5. Navigate back to the downloaded HighChart folder, and locate each of these files.

Check Below image for folder path.

6. Within Service Studio, you will import these scripts by right clicking on ‘Scripts’ within the ‘Interface’ tab as shown below:

Import Following JS Files

1. Accessibility.js

2. Exporting.js

3. Highcharts.js

4. Networkgraph.js (Here i am creating Network Gargh so imported this you can import as per your preference)

the screen where you would like to display your graph, you need to add each required script displayed in the html file so that they will all load when the screen is loaded.

You should see this option to add when you click once on the screen then scroll down in the properties as shown below:

Just Select Scripts import in Last Step One bye One.

8. Next let’s create the container where the chart will show up.

All you do is drag and drop a container element onto the screen.

Then in the name property, call it ‘ChartContainer.’ This will later be referenced to in our javascript.

You will also need the CSS located at the top of the html file and before the HighChart script tags. Within the ChartContainer,

 open the CSS editor by clicking inside ‘Style Classes’ as shown below:

Within the CSS editor paste all the CSS from the network-graph index.html file. (Refer Step 3 and Copy CSS) Refer below image to Copy CSS with refeence to Step 3.

9. Navigate back to the screen properties. Here you need to add an OnRender client action.This action will load the script at the same time the page is loading the rest of the visual elements. If the page reloads, the OnRender function will run again causing this graph to update with the latest data if it is populating its data from an API.

The OnRender will have the custom javascript that creates your line graph. You will need to drag and drop the javascript widget into the OnRender client action as shown in two steps below:1

10.Once complete, go to the html and locate the javascript (Refer Step 3 ). It should begin on line 74 if you selected ‘View Page Source’ after opening it in the browser. Begin copying from line 74 to 279 and paste this code into the javascript widget inside Service Studio.

11. Now in JavaScript Line 47, that starts with ‘Highcharts.chart(‘container,’ will need to be edited for it to work.

12. Because the id or name field in terms of the OutSystems Service Studio is labeled ‘ChartContainer’, the javascript will need to reference it on line 47 of the JS editor.

13.To demonstrate how we can pass data to the JS script, we are going to pass this ChartContainer as a parameter. To do this, just right click on parameters inside the JS editor and select ‘Input Parameter.’ For the name field type ‘ContainerId’, IsMandatory field select ‘Yes’ and for the data type select ‘Text.’ In line 47, reference the parameter the following way ‘Highcharts.chart($parameters.ContainerId, {.’ Your JS editor should look like the image below:

14. After pressing done, the last tie to make the graph appear will be to set the input parameter, ContainerId, to ChartContainer.Id on the JS script like below:

15. Tht's ot Publish the and See Graph in Browser.

Reference : https://www.outsystems.com/blog/posts/advanced-highcharts-demo/