How to create DataTable for ColumnChart by JSON object?

Question

I'm trying to create a DataTable, with JSON as parameter, for a ColumnChart from the Google visualization api.

I generated the following JSON object:

{
 "cols": [
 {"id":"date", "label":"date","pattern":"", "type":"date"},
 {"id":"jobsonstatus", "label":"jobsonstatus", "pattern":"", "type":"number"}
 ],
 "rows": [
 {
 "c": [
 {"v": "01-02-2013", "f": null},
 {"v": 128, "f": null}
 ]
 },
 {
 "c": [
 {"v": "08-02-2013", "f": null},
 {"v": 185, "f": null}
 ]
 },
 {
 "c": [
 {"v": "15-02-2013", "f": null},
 {"v": 142, "f": null}
 ]
 },
 {
 "c": [
 {"v": "22-02-2013", "f": null},
 {"v": 86, "f": null}
 ]
 }
 ]
}

What's wrong with this?

Maybe it's something else. The rest of the code is:

 var chart; //The chart
var options; //The options for the chart
var data; //The data inside the chart
//This function will set up the actual chart but doesn't draw it. 
function init(){
 chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
 options = {
 width:600, height:450, 
 legend: {'position': 'top'},
 allowHtml: true
 }; 
}
function changeData(dataPar){
 data = new google.visualization.DataTable(dataPar);
 drawChart(); 
}
function drawChart(){ 
 chart.draw(data, options);
} 

The JSON object is thrown in the function changeData().

And i've got this in the ajax part:

 dataType: "json", 
 success: function(res, textStatus, jqXHR){
 changeData(res);
 }

I'm getting an error with a red background:

a[dc] is not a function

Does anybody know what's going wrong and what should be the solution?

• MmynameStackflow: I found out that the "null" in the json object has to be null without the quotes. But now I get a new error: b[ya] is not a function

Answer 1

Allright, I figured it out myself.

In the cols I had set the type of the column "date" to date but it had to be a string because the given value is a string.

So if you get strange errors from the google visualization charts then you probably have an error in your json part wich seems to be valid by JSONLint.

My suggestion to debug the json part is to first make a dummy DataTable by using the functions addColumn() and addRows() and then do

console.log([DataTable var].toJSON()).

Compare this output with the JSON you've created with your previous script and debug.

I've got the following JSON object:

{
 "cols": [
 {"id": "date", "label": "date","pattern": "","type": "string"},
 {"id": "newjobs","label": "newjobs","pattern": "","type": "number"}
 ],
 "rows": [
 {"c": [
 {"v": "01-02-2013","f": null},
 {"v": 132,"f": null}
 ]},
 {"c": [
 {"v": "08-02-2013","f": null},
 {"v": 78,"f": null}
 ]},
 {"c": [
 {"v": "15-02-2013","f": null},
 {"v": 105,"f": null}
 ]
 },
 {"c": [
 {"v": "22-02-2013","f": null},
 {"v": 8,"f": null}
 ]}
 ]
}