Error on load jsapi in another page

[Esteban orue]

I create a chart basing on user ranking that I get from database, I've a page where I list all the users (Users.jsp) and I load with ajax the user details (userDetails.jsp), in the user details I create the chart with the parameters that I receive depending the user:

String user = (request.getParameter("username") != null ) ? request.getParameter("username") : "";

String isWebUser = (request.getParameter("isWebUser") != null ) ? request.getParameter("isWebUser") : "";

<!--Here I fill the array with some values and I pass those values to the chart-->

<script type="text/javascript"

 src="https://www.google.com/jsapi?autoload={

   'modules':[{

     'name':'visualization',

     'version':'1',

     'packages':['corechart']

   }]

 }"></script>

<!-- <script type="text/javascript" src="https://www.google.com/jsapi"></script>-->

<script type="text/javascript">

//google.load('visualization', '1', {packages: ['corechart', 'line']});

//google.load('modules':[{'name':'visualization', 'version':'1', 'packages':['corechart']}]);

google.setOnLoadCallback(drawChart);

function drawChart() {

var data = google.visualization.arrayToDataTable([

 ['Notas','<%=user%>','<%=usuario7d %>'],

<% for ( int j=0; j < 7; j++) { %>

 [ <%=j %>, <%=vectFinal_7[j][1] %>, <%=vectFinal_7MR[j][1] %> ],

<% } %>

]);

var options = {

 title: '7 dias',

 curveType: 'function',

 legend: { position: 'bottom' }

};

var chart = new google.visualization.LineChart(document.getElementById('curve_chart_7'));

chart.draw(data, options);

}

</script>

<script type="text/javascript">

google.setOnLoadCallback(drawChart);

function drawChart() {

var data = google.visualization.arrayToDataTable([

 ['Notas','<%=user%>','<%=usuario30d %>'],

<% for ( int j=0; j < 30; j++) { %>

 [ <%=j %>, <%=vectFinal_30[j][1] %>, <%=vectFinal_30MR[j][1] %>],

<% } %>

]);

var options = {

 title: '30 dias',

 curveType: 'function',

 legend: { position: 'bottom' }

};

var chart = new google.visualization.LineChart(document.getElementById('curve_chart_30'));

chart.draw(data, options);

}

</script>

The point is that when I called this jsp the chart is rendered but when I called the first page where I list the users and then called one particular I have this error:

A call to document.write () from a loaded external script asynchronously was ignored.

I  really don't know why 

<!--Load the AJAX API -->

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

don't load correctly.

Can someone help me?

[Daniel LaLiberte]

I can't tell from the code you posted, but from your description, it sounds like you might be loading the charts code after the document has finished loading.  The consequence of doing that is that loading more code will try to write out more script tags, but that might overwrite your entire document instead, which could result in the message you are seeing.

There is a way to load the charts code even so, but you have to change how you load the code. Read about "dynamic loading" here: https://developers.google.com/chart/interactive/docs/library_loading_enhancements#enhancedloading which links to: https://developers.google.com/loader/#Dynamic

--
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 google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte  - 978-394-1058

dlaliberte@Google.com   5CC, Cambridge MA

daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

[Esteban orue]

Hi Daniel, thanks for your answer. I really want to do that:

You can load the Google API loader dynamically by creating a script element and setting its source to the same"https://www.google.com/jsapi" URL with an additional query callback parameter. The callback will be executed when the loader is ready.

Could you help me with that!

Thanks

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/I32Dsu5CXY0/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

--

Esteban Orue about.me/estebanorue

[Daniel LaLiberte]

The documentation already tells you how to do that:

function loadApi() {
  google.load("visualization", "1", {"callback" : pageLoaded});
}

Make sure the DOM is ready when you call google.load with the callback option. You need to do this because the loader may will to append an element to the DOM.

Hope that helps.