Page with google chart showing blank on navigation through panel or navbar

[Anil Sagar]

A page with google chart shows perfectly fine if set as startup page for my app during testing. But when any other app page is setup as startup page and then I try to go to the google chart page (called Usage_prepaid), it shows blank. I have tried placing 'navigate to - on click' both in navbar and in side-panel (as 'my usage' button navbar or listitem in panel). None of them work.

App link is http://appery.io/app/view/177c5783-d9...

Chart looks as following if setup as startup page for the app.

[Maryna Brodina]

Hello!

Please check are there any errors in console while page loading?

[Anil Sagar]

No errors at all

[Evgene Karachevtsev]

Hello Anil,

Could you please try to use the page show instead of load.

[Anil Sagar]

Even that is not working. When I refresh the page then I can see the chart though. Not sure what is wrong.

[Yurii Orishchuk]

Hi Anil,

The problem you have faced out - js "google.load" code should be load before page loaded.

You can find more details about this issue by following links:

http://stackoverflow.com/questions/95...

http://stackoverflow.com/questions/53...

Here is solution for you:

1 Open your "Usage_prepaid" page.

2 Delete your "page show" js event handler where you invoke the "drawChart" method.

3 Activate your HTML component. And edit HTML code with following:

pre

<script type="text/javascript"
var onLoad = function(){
drawChart();
};
google&#46;load('visualization', '1&#46;0', {'packages':['corechart'], callback: onLoad });
</script

<div id="chart_div"<

/pre

That's all.

Regards.

[Anil Sagar]

Thanks Yurii. Nice trick.