Dear community,

I want to show a chart on screen with a maximum column width defined in an advanced format. In OutSystems 11, this works. In OutSystems 10 however it does not seem to work (our client uses version 10).

Maybe the error lies somewhere in the advanced format in JSON that is passed to the chart. How can I review the JSON that is passed to the chart? In this topic (link) it was suggested to inspect the generated JavaScript on the browser. But I don't know how.The highcharts component seems to be a hidden blackbox in the HTML / javascript. I cannot find any highcharts call in the javascript of my application.

The OMLs I used can be found in the attached zip (one for OS10 and one for OS11).


Kind regards, Jonathan

Hi Jonathan,

If you use Charts in a web application, just check the source via the browser. So left-click on the page to get the context menu, then select "View source" or equivalent. The Highcharts JSON will be in there somewhere. Note that inspecting the page with the devtools won't be of much help, as you'll only see the generated SVG, which is of little use.

Thanks for underlining that the code should be present somewhere. I see indeed some highcharts-relevant code in the main HTML (.aspx) file. I can now see what the JSON is that is passed to highcharts (see attachment).

The maxPointWidth property is applied in a module in OutSystems 11, but not in a similar module in OutSystems 10. I cannot find any error.

I tried to include the debugger script of Highcharts (https://www.highcharts.com/docs/advanced-chart-features/debugger-mode), but this fails because Highcharts seems to be initialized differently in OutSystems. I get the error message

debugger.src.js:31 Uncaught TypeError: Cannot read property 'parts/Globals.js' of undefined

Reloading (another) highcharts script lead to an error of having highcharts loaded twice.

How can I identify the problem that causes Highcharts to ignore the maxPointWidth property in OutSystems?



Hi Jonathan,

As far as I know, the Highcharts version in P10 and P11 is the same. Also, all JSON that you add via the Chart's Properties should be integrated into the final Highcharts JSON in the same way, I don't think there's any difference between P10 and P11 in that respect. So the maxPointWidth being seemingly ignored on P10, but not on P11 is something I cannot explain, unfortunately. Can you attach a simple P10 Module that exhibits this problem, but works in P11? That'll make troubleshooting easier.

Hi,

I uploaded an .oml file to the forge suitable for outsystems 10 or higher (link). In an environment with service studio version 10.0.1009.0 it does not work (nothing happens after clicking on the button) while the same oml does work in an environment with service studio version 11.0.511.0 (the maximum column width is decreased after clicking on the button). Any hints for resolving this issue would be appreciated!

Greetings, Jonathan

Hi Jonathan,

First, you can attach single files like OMLs to a post in the forum, please don't use the Forge for that! I've deactivated the component, and added the Module for reference to this post. I'll take a look at what's going on and report back later.

Solution

Hi Jonathan,

What I said earlier isn't true: P10 uses a very old version of Highcharts, 4.1.4, while P11 uses a more recent one, 6.1.4. Checking the Highcharts documentation, it seems that maxPointWidth is supported from version 4.1.8, so that perfectly explains why it doesn't work on P10.

As a workaround, you could use pointWidth, which fixes the column size instead of defining a maximum, and which does work for version 4.1.4 and hence P10.

Solution

Clear, I will communicate to the customer that setting a maximum column width requires a platform server update to 11. Besides I can apply a the pointWidth property for example if less then 10 columns are going to be displayed.

Sorry for messing up the Forge, I thought that that is the only way for you to easily deploy my sample oml because of intellectual property policy.

For now I conclude that there is no possibility of running the debugger of Highcharts in an OutSystems setup. However, it can be debugged with the Highcharts debugger by copying the JSON generated by OutSystems to a local html file. That html file should use the same Highcharts version as the OutSystems platform.