You have some syntax problems and a possible issue with trying to draw
charts before the API finishes loading. First the syntax: you have a
couple of lines like this:
$("#responsecontainer").load('USCharts.jsp',0,makeRequest("Repeat"));
The makeRequest("Repeat") call in there will execute immediately and return
null. The AJAX load call will return later and there won't be a callback
fired. If you want to call makeRequest("Repeat") when the load call
returns, you need to do so like this:
$("#responsecontainer").load('USCharts.jsp',0,function () {
makeRequest("Repeat");
});
Next, you have some AJAX calls inside a document ready event handler, which
chain to more AJAX calls, which eventually draw your chart. The problem
here is that it is possible for the document ready event to fire, the AJAX
calls to complete, and the visualization code to run before the
Visualization API has finished loading. If you move the code from your
document ready event handler to a callback from the google loader, your
timing issues will go away:
function init () {
makeRequest("Repeat");
if(document.getElementById("Report").value=="Minutes"){
if(document.getElementById("EnterpriseCode").value=="NIKEUS"){
instantTrigger( function() {
$("#responsecontainer").load('USCharts.jsp',0,function () {
makeRequest("Repeat");
});
}, (document.getElementById("refreshRate").value*1000));
}else{
instantTrigger( function() {
$("#responsecontainer").load('Charts.jsp',0,function () {
makeRequest("Repeat");
});
}, (document.getElementById("refreshRate").value*1000));
}
}
}
google.load('visualization', '1.1', {callback: init, packages:
['corechart', 'geomap', 'gauge']});
On Friday, November 15, 2013 9:18:09 PM UTC-5, ganesh s wrote:
>
> Hi,
> I am trying to do a real time statistical sales chart as and
> when we get orders. I have got the chart working properly in IE8 to IE10.
> but the charts are not showing up in Chrome or firefox. I see the below
> error in Chrome firebug console.
>
> 1. Uncaught Error: Invalid type: undefined.
>
> format+en,default+en,geomap+en,gauge+en,corechart+en.I.js:180<http://www.google.com/uds/api/visualization/1.1/65974efe0434ea30c762e76f9f1da7b2/format+en,default+en,geomap+en,gauge+en,corechart+en.I.js>
>
>
> 1. XHR finished loading: "
> http://nke-lnx-dom-d001:8080/DOMS/USCharts.jsp";. firebug-lite.js:18994
> 1. sendfirebug-lite.js:18994
> 2.
> sendjquery.js:8706<http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js>
> 3.
> x.extend.ajaxjquery.js:8136<http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js>
> 4.
> x.fn.loadjquery.js:7745<http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js>
> 5. (anonymous function)
>
>
> Please find below the code that is working in IE but showing blank pages
> in Chrome or firefox.
>
>
>
> <script type="text/javascript" language="javascript" src="
> http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
> "></script>
> <script type="text/javascript" src="http://www.google.com/jsapi
> "></script>
>
> <script type="text/javascript">
> {
> google.load('visualization', '1.1', { callback: function() {
> makeRequest("Repeat"); },packages: ['corechart', 'geomap','gauge']});
> }
> </script>
> <script>
> function instantTrigger( fn, delayTrigger ) {
> setInterval( fn, delayTrigger );
> }
> </script>
> <script type="text/javascript">
> $(document).ready(function() {
> if(document.getElementById("Report").value=="Minutes"){
> if(document.getElementById("EnterpriseCode").value=="NIKEUS"){
> instantTrigger( function() {
> $("#responsecontainer").load('USCharts.jsp',0,makeRequest("Repeat"));
> }, (document.getElementById("refreshRate").value*1000));
>
> }else{
> instantTrigger( function() {
> $("#responsecontainer").load('Charts.jsp',0,makeRequest("Repeat"));
> }, (document.getElementById("refreshRate").value*1000));
> }
> }
>
> <body>
> <form>
> <div id="responsecontainer" onload="makeRequest("First")" >
> </div>
> <div>
> </body>
>
>
> <script>
> function makeRequest(calculateTimeDifference) {
> var xmlHttpRequest = getXMLHttpRequest();
> xmlHttpRequest.onreadystatechange = getReadyStateHandler(xmlHttpRequest);
> xmlHttpRequest.open("POST", "ajaxServlet.do", true);
> xmlHttpRequest.setRequestHeader("Content-Type",
> "application/x-www-form-urlencoded");
>
> xmlHttpRequest.send("action=InvokePieChart&startDate="+document.getElementById("startDate").value
>
> +"&endDate=" + document.getElementById("endDate").value + "&fastRate="
> +document.getElementById("fastRate").value + "&refreshRate="
> +document.getElementById("refreshRate").value
> + "&productId=" +document.getElementById("ProductId").value +
> "&enterpriseCode=" +document.getElementById("EnterpriseCode").value +
> "&report=" +document.getElementById("Report").value + "&currTime="
> +document.getElementById("currTime").value);
>
>
> var xmlHttpRequest1 = getXMLHttpRequest();
> xmlHttpRequest1.onreadystatechange =
> getReadyStateHandler(xmlHttpRequest1,"lineVisualization");
> xmlHttpRequest1.open("POST", "ajaxServlet.do", true);
> xmlHttpRequest1.setRequestHeader("Content-Type",
> "application/x-www-form-urlencoded");
>
> xmlHttpRequest1.send("action=InvokeLineChart&startDate="+document.getElementById("startDate").value
>
> +"&endDate=" + document.getElementById("endDate").value + "&fastRate="
> +document.getElementById("fastRate").value + "&refreshRate="
> +document.getElementById("refreshRate").value
> + "&productId=" +document.getElementById("ProductId").value +
> "&enterpriseCode=" +document.getElementById("EnterpriseCode").value +
> "&report=" +document.getElementById("Report").value + "&currTime="
> +document.getElementById("currTime").value);
>
> }
>
>
> function drawVisualization(xmlCollection) {
> After loading the data from db to the data object
> var formatter = new
> google.visualization.NumberFormat({pattern:'$###,###' , prefix: '$'});
> formatter.format(data, 1);
>
> var wrapGeoChart = new google.visualization.ChartWrapper();
>
> wrapGeoChart.setChartType('GeoChart');
> wrapGeoChart.setDataTable(data);
> wrapGeoChart.setContainerId('geovisualization');
> wrapGeoChart.setRefreshInterval(5);
> wrapGeoChart.setOptions({'title':'Test Geo Chart',
> 'width':800,'region':'US' ,'resolution':'provinces','displayMode':'regions',
> 'height':600,'legend':'none',colorAxis: {minValue:
> 0,colors:['#00FF00','#006400','#000000']}});
>
> wrapGeoChart.draw();
> }
> function getReadyStateHandler(xmlHttpRequest,test) {
> return function() {
> if (xmlHttpRequest.readyState == 4) {
> if (xmlHttpRequest.status == 200) {
> xmlDoc=xmlHttpRequest.responseText;
> if(test== 'lineVisualization'){
> drawLineVisualization(xmlDoc);
> }else{
> drawVisualization(xmlDoc);
> }
> } else {
> }
> }
> };
> }
> </script>
>
> Can you please tell me what is missing here?
>
>
> Thanks,
> S.Ganesh
>
>
--
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/groups/opt_out.
