[OS10] HighCharts: Initial Animation

Hi all,


Following my initial thread on using Highcharts in OS10, I'm now having trouble getting the animation effect to display when the OS page is launched in the browser. I have tested it with multiple browsers, but none work.

I'm now running into issues getting the initial start up animation of the chart to run. When it's run in jsfiddle, it works perfectly, but when using the exact code from jsfiddle in OutSystems, the animation fails to play out and it acts as though the animation parameter has been set to false.

My code is as follows, put into the AdvancedFormat_Init server action in my preparation:

"chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie'
    },
    title: {
        text: 'Browser market shares in January, 2018'
    },
    tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {

        pie: {
            allowPointSelect: true,
            animation: {
                duration: 1500
                },
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b>: {point.percentage:.1f} %'
            }
        }
    },
    series: [{
        name: 'Brands',
        colorByPoint: true,
        data: [{
            name: 'Chrome',
            y: 61.41,
            sliced: true,
            selected: true
        }, {
            name: 'Internet Explorer',
            y: 11.84
        }, {
            name: 'Firefox',
            y: 10.85
        }, {
            name: 'Edge',
            y: 4.67
        }, {
            name: 'Safari',
            y: 4.18
        }, {
            name: 'Sogou Explorer',
            y: 1.64
        }, {
            name: 'Opera',
            y: 1.6
        }, {
            name: 'QQ',
            y: 1.2
        }, {
            name: 'Other',
            y: 2.61
        }]
    }]"

I've highlighted the animation properties in yellow above. As stated, this works in jsfiddle, but not in OutSystems.

Additionally, I also get problems trying to set the slice border colour to white (https://api.highcharts.com/highcharts/plotOptions.pie.borderColor). It doesn't matter whether I include the property as part of the HighchartsJSON code, or whether I leave it at default (which is apparently white), it fails to actually render either way.

Can anyone help clarify the above issues?

Thanks,

Jordan.

Hi,

Sorry I do not have an Outsystems 10 version environment but I tried your json in my personal environment in v11 and it worked like charm

Did you see any error in console? can you upload a sample OML?

Regards.

Prasad Rao wrote:

Hi,

Sorry I do not have an Outsystems 10 version environment but I tried your json in my personal environment in v11 and it worked like charm

Did you see any error in console? can you upload a sample OML?

Regards.

Hi Prasad,

Thanks for the response. 

I'm unable to share the .OML, sorry, but the code in my OP is pretty much all there is to it.

You said in your post that it works for you; does this include the initial animation played out when the chart loads in the browser?

I'm still struggling to get this function to work in OutSystems configurations, yet it always plays out perfectly in jsfiddle - this makes me think i'm just adding the formatting options incorrectly within OutSystems, as the code itself seems to be fine.

UPDATE: I can get the default animation to play out by adding the following to the plotOptions:

plotOptions: {
        series: {
            animation: true
        }
    },

The trouble is getting the 'duration' property to work. No matter what number i put in the duration property, it will always play the default animation time, which in my opinion, is a bit too quick to even notice it's there. 

I want to change the animation to about 1500 so that it can actually be seen, like this:

plotOptions: {
        series: {
            animation: {
                duration: 1500
            }
        }
    },



If anyone can help me get to the bottom of this, I would be really grateful.


Hi,

The animation works but not able to change the duration. I tried it in JSfiddle with HighChart v6.1.4 and it works there, not sure why same version of Highcharts doesn't work in Outsystems. Will try to investigate more on why this is the case.

Regards.