Openui5: DonutChart is not rendered properly

[Myge91]

Hello there,

when I route from View1 to View2 the DonutChart on View2 will not be rendered properly when the chart is inside a DynamicPageHeader .

I am using the latest SAPUI5 version.

Here is a running example: https://drive.google.com/open?id=182je3ETEmFdP8ebgLjrpQ9I-NdFMxErc

To reproduce it:

open my example and click on the button

You will see the second page with the DonutCharts:

You can see the legend has 2 items but the legend is not rendered properly. On the bottom of the page there is a button named "hallo".
When you click on it the DonutCharts will be rebind. After that the DonutCharts are rendered properly.

I have the latest Google Chrome installed.

Regards

Jan

[Shtilianova]

Hello @Myge91 ,
Could you please made an reproducible example here: http://jsbin.com/fotetomeji/edit?html,js,output
Regards,
Diana

[Myge91]

I was not able to made a running example at jsbin. I already gave you a running example in the link on my comment above.

[esjewett]

Did something go horribly wrong with Github's username autocomplete? :D @Shtilianova

[LidiaBobeva]

Hello @Myge91,
Please provide us an isolated example of the issue you described - URL (minimal example if possible)
Regards,
Lidiya

[Myge91]

Hi,

feel free to download my sample, import it into WEBIDE and run it:
https://drive.google.com/open?id=182je3ETEmFdP8ebgLjrpQ9I-NdFMxErc

Regards,

Jan

[LidiaBobeva]

Hello @Myge91,
If the reported issue is bug in openui5 it will be dispatched to the responsible developers and in the case with your sample everyone should download and import it.
Please make sure that the issue is caused by the control itself and not by the application it is used in.
Check if the behavior is the same in the Demokit. Please provide us an isolated usage case of the control in jsbin/codepen/etc. This will significantly speed up the processing. Thank you in advance!
Regards,
Lidiya

[Myge91]

https://plnkr.co/edit/ikruBMfetiOygAVtm2nD?p=preview

[stephania87]

@Myge91
Thank you for the example. It appears data is not set at the time the page is navigated to. Using onBeforeRendering causes the charts to be loaded.
The issue is logged internally with ticket #1880204298. My colleagues will follow up in this thread as well.

[dhanwin89]

@Myge91
I am from suite controls team responsible for InteractiveDonutChart control.
Thanks you for sharing the example and sorry for the delay in response.

Its always suggested to use a flexbox container around InteractiveDonutChart control it helps in calculating dimensions for the control.
Also I noticed in chrome alone while navigating to second view InteractiveDonutChart.js file is not loaded in correct sequence which has disturbed the rendering process but in other browsers IE,FireFox its working fine.
Its seems like a chrome bug I am working on it.

But you can overcome this by declaring InteractiveDonutChart.js file in view1 so that js file is loaded before the view2 is called and rendering happens in correct way.

I have corrected you example and its working now.Please check the link https://plnkr.co/edit/J40TxRhjAxsgGdQxy4Cv?p=preview

or You can use the below zip file in webide.
routingAppFire.zip.