This is more or less a continuation of my post from the other day.

I'm trying to add a sum of the series as the last bar. It's supposed to go downward as opposed to up. A workaround I've used is adding a negative value as the sum, but that results in negative values being displayed as labels and the stacked bars being inverted (see attached pic).

Highcharts waterfall type has an isSum property that adds up all the preceding datapoints and makes the bar go downward (exactly what I want, since that makes the labels display positive numbers and doesn't cause inversion).

I've tried entering "{isSum: true}" and "{isIntermediateSum: true}" for the values of the last datapts in the series, but that gave an error ("decimal expected" with parentheses, "syntax error" without).


Hi Osacc,


I just realised something !  The highcharts version available in Outsystems is not the latest, so not everything you find on the documentation will work.

To test this out, I just replaced the highcharts.js and highcharts-more.js in my local copy of HighchartsInclude component, and now the IsSum actually works !

you can try out here


so I think a lot of the confusion and frustration comes from this difference in js script used between online examples you can find, and how it acts in OS.

Dorine Boudry wrote:

Hi Osacc,


I just realised something !  The highcharts version available in Outsystems is not the latest, so not everything you find on the documentation will work.

To test this out, I just replaced the highcharts.js and highcharts-more.js in my local copy of HighchartsInclude component, and now the IsSum actually works !

you can try out here


so I think a lot of the confusion and frustration comes from this difference in js script used between online examples you can find, and how it acts in OS.

Hello, Dorine, okay that makes sense. Didn't realize the version was that old. So then what could be a workaround for my scenario? The current chart is pretty unsightly and confusing (the inverted bars and negative values).

Also I'm assuming the labels not always being inside the bars and sometimes missing (like in case of the 3rd bar) also has to do with the Highcharts version?

BTW I'm pretty sure it's not allowed to log into someone else's environment. I've tried my credentials, and that didn't work.


Hi Osacc,


sorry, forgot to make screens anonymous, should be able to test now.  Is still work in progress, but you can see a working waterfall chart in it.

so, the workaround would be to make use of the new highcharts libraries the way I'm doing, instead of the chart widget of outsystems.

What I did was to install the highcharts include widget from the forge, and then modify it by going in and replacing the javascript of the includes with the latest version from the highcharts site.  This is just for testing purposes, though, If you intend to actually use this on a project, you'd have to find out about licensing of highcharts, as you are not using a standard outsystems chart component.


Notice also that the highcharts component in the Forge is deprecated, so for serious project, I'd try to find out why and what to use instead.

Dorine Boudry wrote:

Hi Osacc,


sorry, forgot to make screens anonymous, should be able to test now.  Is still work in progress, but you can see a working waterfall chart in it.

so, the workaround would be to make use of the new highcharts libraries the way I'm doing, instead of the chart widget of outsystems.

What I did was to install the highcharts include widget from the forge, and then modify it by going in and replacing the javascript of the includes with the latest version from the highcharts site.  This is just for testing purposes, though, If you intend to actually use this on a project, you'd have to find out about licensing of highcharts, as you are not using a standard outsystems chart component.


Notice also that the highcharts component in the Forge is deprecated, so for serious project, I'd try to find out why and what to use instead.

Do you happen to know why Outsystems won't update their Highcharts version? If there's a way to get them to do it that'd be awesome.

It's for a test at the moment, but we are planning on using it in an actual project.

Hi,

the component is not from Outsystems, it's from the 2 J's.  If you go to the Forge, you can find their information.

Dorine Boudry wrote:

Hi,

the component is not from Outsystems, it's from the 2 J's.  If you go to the Forge, you can find their information.

I was referring to the built-in charts functionality (which is a Highcharts wrapper at the end), not the Forge component. If the built-in functionality is outdated and buggy, Outsystems might wanna look into it.


BTW the chart from  the link looks great!

ah ok, of course.  But then again, I don't think they really intend you to take a column component an try to turn it into a waterfall   ;-)


Hi osacc,

If I had to guess, OutSystems licenses a certain version from Highcharts, so they can't readily use a new version. Also, I suspect that they change some of the JavaScript to suite their needs, so for every new version they need to put in some work. There's been a version update when they released P11 (from 4.1.4 to 6.1.4), so I hope they'll update Highcharts again for the next Platform version (I'll ask around to see if anyone knows).

Kilian Hekhuis wrote:

Hi osacc,

If I had to guess, OutSystems licenses a certain version from Highcharts, so they can't readily use a new version. Also, I suspect that they change some of the JavaScript to suite their needs, so for every new version they need to put in some work. There's been a version update when they released P11 (from 4.1.4 to 6.1.4), so I hope they'll update Highcharts again for the next Platform version (I'll ask around to see if anyone knows).


Kilian, that makes sense. I think I saw a forum post where one of the OS people (I think the username was J?) just updated the Highcharts version when a user asked about it, but I could be wrong.

And that would be so awesome of you if you could post an update some time in case anyone responds.

Dorine Boudry wrote:

Hi Osacc,


sorry, forgot to make screens anonymous, should be able to test now.  Is still work in progress, but you can see a working waterfall chart in it.

so, the workaround would be to make use of the new highcharts libraries the way I'm doing, instead of the chart widget of outsystems.

What I did was to install the highcharts include widget from the forge, and then modify it by going in and replacing the javascript of the includes with the latest version from the highcharts site.  This is just for testing purposes, though, If you intend to actually use this on a project, you'd have to find out about licensing of highcharts, as you are not using a standard outsystems chart component.


Notice also that the highcharts component in the Forge is deprecated, so for serious project, I'd try to find out why and what to use instead.

Hi Dorine, sorry for bothering you again, but I'm having trouble including the latest js from highcharts into the component.

After clicking the Javascript property (blue arrow) I get this screen (circled in red). The text on the screen is not editable though. Have you faced that problem?

Hi ossac,

You are including a Web Block, that has JavaScript included. You cannot edit it where you include the Web Block, you can only do that in the Web Block itself. That said, why would you want to use a Forge component, if you want to edit the JavaScript?

Kilian Hekhuis wrote:

Hi ossac,

You are including a Web Block, that has JavaScript included. You cannot edit it where you include the Web Block, you can only do that in the Web Block itself. That said, why would you want to use a Forge component, if you want to edit the JavaScript?

hi Kilian,

as far as I understand, the forge component lets you use the latest highcharts version by replacing the javascript.

Then I'm not sure what Dorine meant with "modify it by going in and replacing the javascript of the includes with the latest version from the highcharts site."

I think Dorine means open the Forge component, and replace it there.

Hi Osacc,

yes Kilian is right, i mean installing the forge component, and then edit it (make your own version of it) by replacing the javascript.

I'll make a little demo oml tomorrow


Solution

Hi Osacc,


i have created a little project for you.

what I've done :

1) create a clone of the highcharts component and replace all the old javascript with the most recent one (again, If you actually want to use it, find out about highcharts licensing !)



2) add this as a dependency in the module I want to use a chart, and add the HighchartInclude webblock on the screen I want to have the chart on



3) make a demo datamodel that I want to produce a chart for

  • a chart will be drafted of all budget items in a given budget year
  • each BudgetItemType will be a column in the chart
  • each PlaceOfSpending will be a series in the chart

4) make a server action to create a series string based on the datamodel


5) make a Screen with a dropdown to select the budget year, and execute a RenderChart Screen Action every time the dropdown changes value

  • execute the server action to create the series string
  • execute a RunJavascript server action to render the chart


I hope this can insprire you for your solution.  The bit that will take the most adjusting is step 4, where you have to create your own logic to turn your data into a series string.


See attached the updated clone of the Highcharts Component, and the example Consumer.


Dorine


Solution