Hello everyone !
I'm having trouble creating a Waterfall type chart.
I added the Highcharts-more.js to my webblock as a required script:
In using this JS as the advanced format :
"{
chart: {
type: 'waterfall'
},
xAxis: {
type: 'category'
plotOptions: {
series: {
stacking: 'normal'
}
series: [{
data: ['1', '1', {
}, '1', '2', {
}]
}, {
data: ['2', '3', {
}, '3','3', {
}],
lineWidth: 0
data: ['3', '3', {
}, '3', '13', {
}"
Best regards,
Paulo Rosário
I had a look,
and it is related to the default highcharts.js of Outsystems not playing together well with the waterfall in highcharts-more.js
So what works for me is importing your own copy of both highcharts.js and highcharts-more.js and making sure the outsystems version of highcharts is not loaded first. I don't know why, I don't know enough about javascript and how things get loaded etc. to understand this :-(
See atttached oml to demonstrate this, if you start on screen with the 2 scripts, it is showing the waterfall, if you go to the screen with an OS chart, refresh that, and then come back to the waterfall screen, you'll get that error you are talking about. Refreshing it will solve that.
Dorine
PS: if you import your own versions of the highcharts js files, make sure you are licensed to do so.
Hi Paulo,
I checked with JSFiddle and it gave some errors.
This is a working example:
Highcharts.chart('container', {
title: {
text: 'Highcharts Waterfall'
yAxis: {
text: 'USD'
legend: {
enabled: false
tooltip: {
pointFormat: '<b>${point.y:,.2f}</b> USD'
upColor: Highcharts.getOptions().colors[2],
color: Highcharts.getOptions().colors[3],
data: [{
name: 'Start',
y: 120000
name: 'Product Revenue',
y: 569000
name: 'Service Revenue',
y: 231000
name: 'Positive Balance',
isIntermediateSum: true,
color: Highcharts.getOptions().colors[1]
name: 'Fixed Costs',
y: -342000
name: 'Variable Costs',
y: -233000
name: 'Balance',
isSum: true,
dataLabels: {
enabled: true,
formatter: function () {
return Highcharts.numberFormat(this.y / 1000, 0, ',') + 'k';
style: {
fontWeight: 'bold'
pointPadding: 0
});
Perhaps you can check if this works and then eliminate the diffferences one by one?
My guess its in the stacking (plotoptions)
Hello Stefano,
Thanks for the reply and sorry for the delay!
I tried your code , still got the same error :(
I talked with the client and we agreed to use another graph but I would still like to know why I can't get this to work
Did you use exact the same code? including the datalabel etc.?
it worked in jsfiddle.
by the way: your error: missing module for waterfall": that's because waterfall is not in ''.
Hi,
I don´ t have time to try it out right now, but I vaguely remember that including your own highcharts scripts might not work as long as you still also have the outsystems charts as a dependency in the same module.
Something with name clash on ´ highcharts´ being defined twice and the one from OS widget without waterfall blocking the other from loading ???
Could that be the case here ?
Hello Dorine,
You are right I got it to work on my personal environment thanks ! :D