Good day guys I'm not sure if this is the right section of the forum to ask this. But I am currently having trouble displaying a carousel of charts specifically a Line and Column chart. If both charts are outside the carousel they render properly but if both are inside the carousel as items. Both charts get default width: 0px but has height value. I tried to make the parent container have fixed height since that works for gallery but for carousel it doesn't seem to.

Also tried explicitly setting the width of the chart using advanced format still not working for me thank you in advance :D


Solution

Enclose the Carousel in a container. It's a known bug that when adding some widgets inside an if condition it won't take the full width of the parent. Enclosing the content in a container usually does the trick.

Let me know if this helps.

Cheers!

Solution

Armando Gomes wrote:

Enclose the Carousel in a container. It's a known bug that when adding some widgets inside an if condition it won't take the full width of the parent. Enclosing the content in a container usually does the trick.

Let me know if this helps.

Cheers!

Hi Armando that helped a bit but I'm experiencing a weird behavior where the chart is initially empty like this

but after i click inspect element the chart renders seems like there's a delay of rendering the chart


Hey Clintjie,

Without looking at the actual code or what has been made, it's difficult for me to understand the root cause of the issue. If you can send a MVO (minimum viable OML) with enough information to be reproducible - including bootstraps of data - that would be great.

Cheers!

Armando Gomes wrote:

Hey Clintjie,

Without looking at the actual code or what has been made, it's difficult for me to understand the root cause of the issue. If you can send a MVO (minimum viable OML) with enough information to be reproducible - including bootstraps of data - that would be great.

Cheers!

Alright will work on that but what I found out is that the charts render after screen is resized

https://stackoverflow.com/questions/16182935/responsive-highcharts-not-sizing-correctly-until-window-resize

Though I do not know how I can call $(window).resize(); through OutSystems

Assuming this is on Web, you can use an expression, don't escape it and you could do something like:

$(document).ready(function(){

      $(window).resize();

});

Once your webpage is ready, this piece of JS will run.

Hi armando what I did was upgrade the latest version of highcharts using the imported highcharts.js resource and addjavascripttag function and it worked for me the data renders properly now. But I'm definitely sure the carousel with a div helped as well thank you for the quick help response :D

No problem, glad I could help!

Happy low-coding!

Hi Clintjie Lo,

Wondering what do you mean by "upgrading to latest version of high charts".

I would love to use the latest version of high charts v7.1.1(2019-04-09) while outsystems chart have outdated version of v4.1.4 (2015-03-10).

Also need to understand the licensing model in-case if we upgrade to the current version? should we need to buy a license from highcharts?

Sree Natarajan wrote:

Hi Clintjie Lo,

Wondering what do you mean by "upgrading to latest version of high charts".

I would love to use the latest version of high charts v7.1.1(2019-04-09) while outsystems chart have outdated version of v4.1.4 (2015-03-10).

Also need to understand the licensing model in-case if we upgrade to the current version? should we need to buy a license from highcharts?

Hi Sree actually what I did was

1. Saved the latest version of Highcharts as a .js file.

2. Added that file as a resource

3. Added AddJavaScriptTag as dependency from HTTPRequestHandler

4. Used AddJavaScriptTag in the screen where I need it

*As for the license https://www.outsystems.com/forums/discussion/22566/purchase-highcharts-licence/ says here we need to purchase the license to use other Highcharts versions that is not shipped with the OS platform. Upgrading the Highcharts version fixed the problem for me regarding the topic but it adds the issue of licensing though the application I made is not for commercial use at this point.

Hi Clintjie Lo,

Thanks for you explanation and link to purchasing high charts license. It was very useful. I'm currently using the charts component in all my reports. I really don't want to revamp the code everywhere. I'm just curious if I can use both the '.js' file and somehow high charts component will pick the latest version?

If that is not possible then I might have clone the chart module and replace the javascript with the latest version and re-reference the chart module with my new chart module. It is a pain and hope outsystems can push this in there next release.