[Google Charts] Google charts do not like loading after the initial page load

Forge Component
(11)
Published on 2014-02-11 by André Vieira
11 votes
Published on 2014-02-11 by André Vieira
I've encountered a problem with the Google Charts component when it comes to tabs, specifically tabs that load on click.

Tabs that load with the rest of the page will show the google charts graphs they contain, however, if you change them to load after the rest of the page, like using SilkUi's tabs "loadonclick" feature, they fail to work.

I also have this problem with the RichWidgets tabs when i click to another tab that loads content later, then come back to a previously working GoogleCharts tab my chart is no longer displayed. (Meaning this is not an issue unique to or caused by SilkUI.)


To recreate:
1) Have a working Google Chart graph contained on it's own inside a web block.
Put it inside a SilkUI tab other than #1, with no ActiveTab set.

2) Leave load on click set to False, verify that it does indeed work.
3) Change load on click to True, click your tab, let it load, and verify that graphs do NOT load on click...



Does anyone have a workaround or solution that would allow us to show these graphs ONLY when necessary, speeding up load time and decreasing network load the rest of the time?


Thanks,
Braxton Bragg

Hello,


I know that this is an old topic, but I was implementing google charts on my current project and I got the same problem. The main problem resides on these lines of code


SyntaxEditor Code Snippet

google.load('visualization', '1',{'packages':['"+ GetGChartTypeById.List.Current.GChartType.Package+"']});
google.setOnLoadCallback(drawChart);

Because when you do an ajax refresh the Load event is not triggered again.


I solved the issue by manually invoke the "drawChart()" after the ajax refresh. I actually used an expression on the screen to guarantee that the action was the last thing being called.



regards,

Davide Periquito wrote:

Hello,


I know that this is an old topic, but I was implementing google charts on my current project and I got the same problem. The main problem resides on these lines of code


SyntaxEditor Code Snippet

google.load('visualization', '1',{'packages':['"+ GetGChartTypeById.List.Current.GChartType.Package+"']});
google.setOnLoadCallback(drawChart);

Because when you do an ajax refresh the Load event is not triggered again.


I solved the issue by manually invoke the "drawChart()" after the ajax refresh. I actually used an expression on the screen to guarantee that the action was the last thing being called.



regards,

Davide, could you provide a simple espace showing how you did that?  We have moved away from google charts and are now using high charts but would love to see this.


At this point is not easy for me to provide an espace...


I just took this printscreen, if you actually need an espace give me some more time to build it.