Line Chart Error: google.visualization.datatable is null or not an object

[TheInnovator]

I am trying to create a line chart but I get the following error 

'google.visualization.DataTable' is null or not an object

Why is the line chart different from others?

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

<script type="text/javascript">

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

//Line Chart

var dataValues = [

['Oct', 0, 0],

['Nov', 0, 0],

['Dec', 0, 0],

['Jan', 0, 0],

['Feb', 0, 0],

['Mar', 0, 0],

['Apr', 0, 0],

['May', 0, 0],

['Jun', 0, 0],

['Jul', 0, 0],

['Aug', 0, 0],

['Sep', 0, 0]

];

var data = new google.visualization.DataTable();

data.addColumn('string', 'Month');

data.addColumn('Number', 'Webpages');

data.addColumn('Number', 'Documents');

var monthIndex=0;

$().SPServices({

operation: "GetListItems", 

async: false,

listName: "508 Monthly Score",

CAMLViewFields: "<ViewFields><FieldRef Name='Title'></FieldRef><FieldRef Name='Year'></FieldRef><FieldRef Name='Month'></FieldRef><FieldRef Name='Score'></FieldRef></ViewFields>",

CAMLQuery: "<Query><OrderBy><FieldRef Name=Month></FieldRef></OrderBy></Query>",

completefunc: function (xData, Status) {

alert(xData.responseXML.xml);

 $(xData.responseXML).SPFilterNode("z:row").each(function() {

  monthIndex = getMonthIndex($(this).attr("ows_Month"));

if ($(this).attr("ows_Title") = "Webpages")

{

dataValues[monthIndex][1] = $(this).attr("ows_Score");

}

else

{

dataValues[monthIndex][2] = $(this).attr("ows_Score");

}

 });

}

 });

 //Data for table chart

 $.each(dataValues, function (index, value) {

        data.addRow([dataValues[index][0], dataValues[index][1], dataValues[index][2]]);

}); 

        var options = {

          title: 'Overall 508 Compliance Monthly Score Trend Analysis'

        };

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

        chart.draw(data, options);

</script>

[Andrew Gallant]

Your code isn't inside a callback from the google loader, so the code is executing like this:

start loading API -> try to create DataTable (code fails, because API isn't loaded yet) -> finish loading API

You need to wrap that code in a function that is called from the google loader callback:

function myCallback {
    // chart code here
}
google.load('visualization', '1', {packages: ['corechart'], callback: myCallback});

[Isaac Sogunro]

I modified my code to the below and not I get this error

"Script error

 format+en,default+en,ui+en......"

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

<script type="text/javascript">

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

 

 // Set a callback to run when the Google Visualization API is loaded.

 google.setOnLoadCallback(buildChartFunc);

 

function buildChartFunc()

{

var dataValues = [

['Oct', 0, 0],

['Nov', 0, 0],

['Dec', 0, 0],

['Jan', 0, 0],

['Feb', 0, 0],

['Mar', 0, 0],

['Apr', 0, 0],

['May', 0, 0],

['Jun', 0, 0],

['Jul', 0, 0],

['Aug', 0, 0],

['Sep', 0, 0]

];

var monthIndex=0;

$().SPServices({

operation: "GetListItems", 

async: false,

listName: "508 Monthly Score",

CAMLViewFields: "<ViewFields><FieldRef Name='Title'></FieldRef><FieldRef Name='Year'></FieldRef><FieldRef Name='Month'></FieldRef><FieldRef Name='Score'></FieldRef></ViewFields>",

CAMLQuery: "<Query><OrderBy><FieldRef Name=Month></FieldRef></OrderBy></Query>",

completefunc: function (xData, Status) {

 $(xData.responseXML).SPFilterNode("z:row").each(function() {

  monthIndex = getMonthIndex($(this).attr("ows_Month"));

if ($(this).attr("ows_Title") = "Webpages")

{

dataValues[monthIndex][1] = $(this).attr("ows_Score");

}

else

{

dataValues[monthIndex][2] = $(this).attr("ows_Score");

}

 });

}

 });

 

function getMonthIndex(month)

{

switch(month) {

case "Jan":

monthIndex = 3;

break;

case "Feb":

monthIndex = 4;

break;

case "Mar":

monthIndex = 5;

break;

case "Apr":

monthIndex = 6;

break;

case "May":

monthIndex = 7;

break;

case "Jun":

monthIndex = 8;

break;

case "Jul":

monthIndex = 9;

break;

case "Aug":

monthIndex = 10;

break;

case "Sep":

monthIndex = 11;

break;

case "Oct":

monthIndex = 0 ;

break;

case "Nov":

monthIndex = 1 ;

break;

case "Dec":

monthIndex = 2 ;

break;

}

return monthIndex;

}

var data = new google.visualization.DataTable();

data.addColumn('string', 'Month');

data.addColumn('Number', 'Webpages');

data.addColumn('Number', 'Documents');

 //Data for table chart

 $.each(dataValues, function (index, value) {

        data.addRow([dataValues[index][0], dataValues[index][1], dataValues[index][2]]);

}); 

        var options = {

          title: 'Overall 508 Compliance Monthly Score Trend Analysis'

        };

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

        chart.draw(data, options);

}

</script>

<div id="chart_div"></div>

--
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/7TApq3Vb6Jc/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.

--
-Isaac-

http://twitter.com/#!/feedy0urmind
You are today where your thoughts have brought you; you will be tomorrow where your thoughts take you.
- James Allen

[Isaac Sogunro]

I also took the getMonthIndex() function out of the buildchartfunc() function but still get the same error.

[Andrew Gallant]

That error doesn't tell me anything.  Run it in Chrome and open the developer's console (ctrl+shift+j to open in Windows).  There should be a more descriptive debug dump there.

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@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.

--
-Isaac-

http://twitter.com/#!/feedy0urmind
You are today where your thoughts have brought you; you will be tomorrow where your thoughts take you.
- James Allen

[Isaac Sogunro]

How do I get the data dump in Chrome?

Here's my site with the error

http://isaac.issharepoint.com/Web%20Part%20Page/LineChart.aspx

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.

[Andrew Gallant]

The error I see is related to these lines:

data.addColumn('Number', 'Webpages');
data.addColumn('Number', 'Documents');

The type should be "number" not "Number".

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsubscr...@googlegroups.com.

[Isaac Sogunro]

Thank You!

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.