21
Views
5
Comments
Solved
[Highcharts JS] Can I use the option horizontal-organization-chart with highchart component ?
highcharts-js
Reactive icon
Forge asset by Paulo Coelho
Application Type
Traditional Web

Hello,

I need to use horizontal-organization-chart type with Outsystems component "Outsystems Charts Web" (https://www.outsystems.com/forge/component-overview/4142/outsystems-charts-web-o11) in a Web Traditional App.

Based on the documentation (https://www.highcharts.com/demo/highcharts/horizontal-organization-chart) there are some extra dependencies on top of basic Highcharts.js:

https://code.highcharts.com/modules/sankey.js
https://code.highcharts.com/modules/organization.js
https://code.highcharts.com/modules/accessibility.js
https://code.highcharts.com/modules/exporting.js

I have tried to add those dependencies using AddJavaScriptTag from module HTTPRequestHandler in the preparation: 


But I´m getting the error:


Accessibility.js?297668:10  Uncaught TypeError: Cannot read properties of undefined (reading 'Core/Globals.js')    at Accessibility.js?297668:10:560    at Accessibility.js?297668:10:225    at Accessibility.js?297668:10:277

OSHighCharts.js?297668:7  Uncaught TypeError: Cannot read properties of undefined (reading 'Core/Utilities.js')    at OSHighCharts.js?297668:7:552    at OSHighCharts.js?297668:7:219    at OSHighCharts.js?297668:7:271

TesteChatFlow.aspx?_…749539743106264:177  Uncaught TypeError: outsystems.initChartCore is not a constructor    at HTMLDocument. (TesteChatFlow.aspx?_…539743106264:177:22)    at l (_osjs.js?11_31_0_43948:18:16833)    at Object.fireWith [as resolveWith] (_osjs.js?11_31_0_43948:18:17613)    at Function.ready (_osjs.js?11_31_0_43948:18:12372)    at HTMLDocument.mb (_osjs.js?11_31_0_43948:18:9803)

And I understand, if I'm not wrong, that this error is due to the fact that extra charts libraries are being loaded before the highcharts basic library is ready.

But if the basic library is ready automatically by Outsystems Charts Web component, how can I control the correct order of libraries loading process ?

Did anyone here succeeded in using this chart type ?

2024-06-24 15-21-58
Ahmed Hani
Solution

You have an outdated version of highcharts.js in your outsystems application v10.3.3 (2023-01-20)

and your traditional script.js file references highcharts from their website v12.1.2 (2024-12-21)
Updating the file fixed the issue.

TesteChartOrganizational-fixed.oml
2022-12-30 07-28-09
Navneet Garg

can you share the oml file? 

UserImage.jpg
Leo Santos

Yes.

Please check the scripts imported in Scripts Folder and also in screen "required script" where I tried to solve dependencies.

https://code.highcharts.com/modules/sankey.js
https://code.highcharts.com/modules/organization.js
https://code.highcharts.com/modules/accessibility.js
https://code.highcharts.com/modules/exporting.js 


TesteChartOrganizational.oml
UserImage.jpg
Leo Santos

Just to add some addtional information.

In the ZIP you can find the chart working using HTML5, CSS and Javascript.

I just need to make the same work in Outsystems.

And the issue is that I always get script error as if some dependencies are missing, although I have imported the scripts in Outsystems.

I have tried both using Outsystems Charts Web component and also without it using Javascript code direct into Outsystems as in the OML sample in my last post.

organizational.zip
2024-06-24 15-21-58
Ahmed Hani
Solution

You have an outdated version of highcharts.js in your outsystems application v10.3.3 (2023-01-20)

and your traditional script.js file references highcharts from their website v12.1.2 (2024-12-21)
Updating the file fixed the issue.

TesteChartOrganizational-fixed.oml
UserImage.jpg
Leo Santos

Thanks a lot !

It solved the issue !!

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.