Waterfall Chart And Highcharts
Application Type
Reactive

Hello everyone ! 

I'm having trouble creating a Waterfall type chart.

I added the Highcharts-more.js to my webblock as a required script:


But i keep getting the same error from Outsystems:

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', {

        }],

        lineWidth: 0

    }]

}"


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.

QDR_HighchartsWaterfall.oml

Hi Paulo,

I checked with JSFiddle and it gave some errors.


This is a working example:

Highcharts.chart('container', {

    chart: {

        type: 'waterfall'

    },


    title: {

        text: 'Highcharts Waterfall'

    },


    xAxis: {

        type: 'category'

    },


    yAxis: {

        title: {

            text: 'USD'

        }

    },


    legend: {

        enabled: false

    },


    tooltip: {

        pointFormat: '<b>${point.y:,.2f}</b> USD'

    },


    series: [{

        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,

            color: Highcharts.getOptions().colors[1]

        }],

        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 

Best regards,

Paulo Rosário


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 ? 

Dorine

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.

QDR_HighchartsWaterfall.oml

Hello Dorine,

You are right I got it to work on my personal environment thanks ! :D

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