In outsystem line chart Need to show loading image before graph rendering

Dynamic line take some time for plotting , Meanwhile we need to add loading script. But to add in outsystemUI Line chart

Hi Aarti,

Outsustems Chart is running on Highcharts, so you can use all the Highchart options in the API reference

In outsystems, you can use these options in chart's advanced property "HighchartJson", as shown below:

To show/hide loading animation visit this API reference https://api.highcharts.com/highcharts/loading

For online demo, please have a look at the below link (found while googling).

https://codepen.io/iamandrewluca/pen/VmoOzm

Hope this helps.

Regards,

Karthik

Hi Karthik,


Thanks for reply, But I don't want on button click. I want at the time of data rendering

Aarti Salunkey wrote:

Hi Karthik,


Thanks for reply, But I don't want on button click. I want at the time of data rendering

Hi Aarti,

Buttons given in the demo is just for an example, but you can call "chart.showLoading()" or "chart.hideLoading()" whenever required. 

In Javascript you can do something like below:

Highcharts.charts[0].showLoading

Regards,

Karthik

Hi Can you please help me in AdvanceProperty Highchartjson how to call showloading function for particular duration on chart object, Need code snippet 

Aarti Salunkey wrote:

Hi Can you please help me in AdvanceProperty Highchartjson how to call showloading function for particular duration on chart object, Need code snippet 

Hi, are you building a reactive app or traditional? How the data being rendered, on page load or on any event? I will try to create a simple demo app based on your use-case.


Hi Karthik,


Its a mobile mobile and we are using out-system line chart , In back-end we prepare data and pass it to line chart as a source,  This is our flow, It takes 2 3 sec to show a chart so we need to show in that time loading images 

Karthik Nataraj wrote:

Aarti Salunkey wrote:

Hi Can you please help me in AdvanceProperty Highchartjson how to call showloading function for particular duration on chart object, Need code snippet 

Hi, are you building a reactive app or traditional? How the data being rendered, on page load or on any event? I will try to create a simple demo app based on your use-case.




Hi Karthik,


Its a mobile mobile and we are using out-system line chart , In back-end we prepare data and pass it to line chart as a source,  This is our flow, It takes 2 3 sec to show a chart so we need to show in that time loading images 

Hi Aarti,


just to offer a different perspective on this, you would have to know if your 3 second delay is in the fetching or the rendering of the datapoints.  I had a quick test where I create a list of 10000 datapoints and then show it in a line chart, this takes half a minute to fetch and only 1 second to render.  

If that is the case for you, your animation can be built as a widget and shown in the else branch of a IsDataFetched IF widget.  No need in that case to also add waiting animation to the chart itself.


Succes with it,

Dorine


see attached oml for example

Aarti Salunkey wrote:

Karthik Nataraj wrote:

Aarti Salunkey wrote:

Hi Can you please help me in AdvanceProperty Highchartjson how to call showloading function for particular duration on chart object, Need code snippet 

Hi, are you building a reactive app or traditional? How the data being rendered, on page load or on any event? I will try to create a simple demo app based on your use-case.




Hi Karthik,


Its a mobile mobile and we are using out-system line chart , In back-end we prepare data and pass it to line chart as a source,  This is our flow, It takes 2 3 sec to show a chart so we need to show in that time loading images 

Thanks Doraine

Hi Aarti,

I have tweaked Doraine's module to make it 2-3 secs delay and added some client actions to show/hide "Loading" message on refresh, and animation on page load for the first time.

See attached module for demo.

Regards,

Karthik


Dorine Boudry wrote:

Hi Aarti,


just to offer a different perspective on this, you would have to know if your 3 second delay is in the fetching or the rendering of the datapoints.  I had a quick test where I create a list of 10000 datapoints and then show it in a line chart, this takes half a minute to fetch and only 1 second to render.  

If that is the case for you, your animation can be built as a widget and shown in the else branch of a IsDataFetched IF widget.  No need in that case to also add waiting animation to the chart itself.


Succes with it,

Dorine


see attached oml for example

Thanks Dorine

For your reply , Loading script and idea looks good , But I also want one more to show Max Datapoint show on chart

Karthik Nataraj wrote:

Aarti Salunkey wrote:

Karthik Nataraj wrote:

Aarti Salunkey wrote:

Hi Can you please help me in AdvanceProperty Highchartjson how to call showloading function for particular duration on chart object, Need code snippet 

Hi, are you building a reactive app or traditional? How the data being rendered, on page load or on any event? I will try to create a simple demo app based on your use-case.




Hi Karthik,


Its a mobile mobile and we are using out-system line chart , In back-end we prepare data and pass it to line chart as a source,  This is our flow, It takes 2 3 sec to show a chart so we need to show in that time loading images 

Thanks Doraine

Hi Aarti,

I have tweaked Doraine's module to make it 2-3 secs delay and added some client actions to show/hide "Loading" message on refresh, and animation on page load for the first time.

See attached module for demo.

Regards,

Karthik


Thanks Karthik

For your reply , Loading script and idea looks good , But I also want one more to show Max Datapoint show on chart