Hi Viktor,
You can set up a document onload handler and wait until then to call
google.load(). That should allow the initial page load to complete before
starting the chart rendering.
But then you also have to change your callbacks that you set up with
google.setOnLoadCallbackI(). Instead of those calls, create one drawCharts
function, and pass it to the google.load() call using the 'callback'
property, like this:
function onloadHandler() {
google.load("visualization", "1", {packages: ["corechart"], callback:
drawCharts});
var t1 = 'IndexTitle'
var t2 = 'IndicatorTitle'
function drawCharts() {
drawChart1(t1);
drawChart2(t2);
}
}
document.onload = onloadHandler;
On Wed, Jul 1, 2015 at 9:02 PM, Viktor Ka <[email protected]> wrote:
> I have this google charts code which works fine:
>
> <script type="text/javascript" src="https://www.google.com/jsapi
> "></script>
> <script type="text/javascript" async>
> google.load("visualization", "1", {packages:["corechart"]});
> var t1 = 'IndexTitle'
> var t2 = 'IndicatorTitle'
> google.setOnLoadCallback(function(){drawChart1(t1)});
> google.setOnLoadCallback(function(){drawChart2(t2)});
> function drawChart1(t){
> var data = new google.visualization.DataTable();
> data.addColumn('string','Date');
> data.addColumn('number','Close');
> data.addColumn({type: 'string', role: 'tooltip'});
> data.addRows([ChartIndexData...........]);
> var options = {
> title: t,
> colors:['black'],
> legend: {position: 'none'},
> chartArea:{left:60,top:20,width:'90%',height:'90%'}
> };
> var chart = new
> google.visualization.LineChart(document.getElementById('chart1_div'));
> chart.draw(data, options);
> }
> function drawChart2(t){
> var data = new google.visualization.DataTable();
> data.addColumn('string', 'Date');
> data.addColumn('number', '');
> data.addColumn({type: 'string', role: 'tooltip'});
> data.addRows([ChartIndicatorData...................]);
> var options = {
> title: t,
> legend: {position: 'none'},
> chartArea:{left:60,top:20,width:'90%',height:'60%'}
> };
> var chart = new
> google.visualization.LineChart(document.getElementById('chart2_div'));
> chart.draw(data, options);
> }<%
> </script>
>
> The problem is when I test the page on Google PageSpeed insite the score
> is 49/100 because of the script above:
>
> Remove render-blocking
> JavaScript:https://www.google.com/jsapi
> https://www.google.com/…ile=visualization&v=1&packages=corechart
> https://www.google.com/…at+en,default+en,ui+en,corechart+en.I.js
> Optimize CSS Delivery of the following:
> https://www.google.com/…bdd6ab2d343a51d49841bf93d022fb/ui+en.css
> https://ajax.googleapis.com/…static/modules/gviz/1.0/core/tooltip.css
>
> As I understand I have to load javascript Asynchronous or defer the
> loading. How do I fix it.
>
> --
> You received this message because you are subscribed to the Google Groups
> "Google Visualization API" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to [email protected].
> To post to this group, send email to
> [email protected].
> Visit this group at
> http://groups.google.com/group/google-visualization-api.
> For more options, visit https://groups.google.com/d/optout.
>
--
Daniel LaLiberte <https://plus.google.com/100631381223468223275?prsrc=2> -
978-394-1058
[email protected] <[email protected]> 5CC, Cambridge MA
[email protected] <[email protected]> 9 Juniper Ridge
Road, Acton MA
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.
