You'll need to reorganize your code a bit. First off, you don't want the
"()" after "drawChart" when you call the google.setOnLoadCallback function,
as that executes the drawChart function and passes the return value (null
in your case) as the callback. This is the primary reason why you are
getting those errors (the drawChart function is executing while the API is
only partially loaded). Second, calling google.load from inside other
functions is known to cause problems. Your best bet is to make your AJAX
requests inside the callback from the google loader, and use the drawChart
function as the callback from the AJAX:
function drawChart () {
var brandStatsAPI =
"http://10.1.10.132:9990/getGoogleChartTable?brand_ids=5,15,100";;
$.getJSON( brandStatsAPI, {
after: "2013-01-01",
before: "2014-04-30"
})
.done(function (jsonData) {
console.log(jsonData);
var data = google.visualization.arrayToDataTable(jsonData);
console.log(data);
var options = {
title: 'Brands presence'
};
var chart = new
google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
})
.fail(function( jqxhr, textStatus, error ) {
var err = textStatus + ", " + error + jqxhr;
console.log( "Request Failed: " + err );
console.log(jqxhr);
});
}
google.load("visualization", "1", {packages:["corechart"], callback:
drawChart});
On Wednesday, October 30, 2013 12:36:50 PM UTC-4, Arnaud Lamy wrote:
>
> Hi Guys,
>
> Here's my code:
>
> --------
>
> <!doctype html>
> <html lang="en">
> <head>
> <meta charset="utf-8">
> <title>Brand Monitoring stats</title>
> <script type="text/javascript" src="https://www.google.com/jsapi
> "></script>
> <script src="http://code.jquery.com/jquery-1.9.1.js";></script>
> <script type="text/javascript">
> (function() {
> var brandStatsAPI = "
> http://10.1.10.132:9990/getGoogleChartTable?brand_ids=5,15,100";;
> $.getJSON( brandStatsAPI, {
> after: "2013-01-01",
> before: "2014-04-30"
> })
> .done(function( jsonData ) {
> google.load("visualization", "1", {packages:["corechart"]});
> google.setOnLoadCallback(drawChart());
> function drawChart() {
> console.log(jsonData);
> var data = google.visualization.arrayToDataTable(jsonData);
> console.log(data);
> var options = {
> title: 'Brands presence'
> };
> var chart = new
> google.visualization.LineChart(document.getElementById('chart_div'));
> chart.draw(data, options);
> }
> })
> .fail(function( jqxhr, textStatus, error ) {
> var err = textStatus + ", " + error + jqxhr;
> console.log( "Request Failed: " + err );
> console.log(jqxhr);
> });
> })();
> </script>
> </head>
> <body>
> <div id="chart_div" style="width: 900px; height: 500px;"></div>
> </body>
> </html>
>
> --------
>
> Here's what I got in my console:
>
> Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2],
> Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2],
> Array[2], Array[2], Array[2], Array[2]]
> index.html:19
> V {Mb: "0.6", H: Array[2], J: Array[17], ab: null, Ma: Array[0]…}
> index.html:21
>
> 1. Uncaught Error: Container is not defined
>
> format+en,default,corechart.I.js:907<https://www.google.com/uds/api/visualization/1.0/d780f2951a73e815f003b2b487c1d0a3/format+en,default,corechart.I.js>
> 1.
> NCformat+en,default,corechart.I.js:907<https://www.google.com/uds/api/visualization/1.0/d780f2951a73e815f003b2b487c1d0a3/format+en,default,corechart.I.js>
> 2.
> SCformat+en,default,corechart.I.js:908<https://www.google.com/uds/api/visualization/1.0/d780f2951a73e815f003b2b487c1d0a3/format+en,default,corechart.I.js>
> 3.
> bDformat+en,default,corechart.I.js:915<https://www.google.com/uds/api/visualization/1.0/d780f2951a73e815f003b2b487c1d0a3/format+en,default,corechart.I.js>
> 4. drawChartindex.html:25
> 5. (anonymous function)index.html:17
> 6. firejquery-1.9.1.js:1037 <http://code.jquery.com/jquery-1.9.1.js>
> 7.
> self.fireWithjquery-1.9.1.js:1148<http://code.jquery.com/jquery-1.9.1.js>
> 8. donejquery-1.9.1.js:8074 <http://code.jquery.com/jquery-1.9.1.js>
> 9. callback
>
>
> I tried to move "google.load("visualization", "1",
> {packages:["corechart"]}); google.setOnLoadCallback(drawChart());" to the
> top but doesn't work neither (drawChart doesn't declared). Have you any
> idea how I can do that ?
>
> My use case is pretty simple, load a formatted json for google char and
> load it inside a line graph ! :)
>
> Best,
> Arnaud
>
--
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.
