I am having trouble getting Google Charts Timeline working with JSON/PHP. Initially I got an error that said "3 or 4 columns is required" so I fixed up the data but now I am getting the following cryptic error message:
['undefined' is not an object (evaluating 'this.Vn[0].v')]
My guess is there is something wrong with my JSON. Here is the output of my PHP script which provides the data:
{ "cols":
[ {"id":"a","label":"Col1","pattern":"","type":"string"},
{"id":"b","label":"Col2","pattern":"","type":"string"},
{"id":"c","label":"Start","pattern":"","type":"date"},
{"id":"d","label":"Stop","pattern":"","type":"date"}
],
"rows":
[
{"c":[{"v":"test1","f":null},
{"v":"test2","f":null},
{"v":"2009-04-12T20:44:55","f":null},
{"v":"2009-04-12T20:45:55","f":null}
]
},
]
}
Here is part of the main page's HTML/JS in case it is relevant.
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart','table','timeline']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function drawChart() {
var jsonData = $.ajax({
url: "ar2_1_data.php",
dataType:"json",
async: false
}).responseText;
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(jsonData);
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.Timeline(document.getElementById('chart1_div'));
chart.draw(data, {width: 500, height: 320, title: 'Timeline'});
}
</script>
</head>
<body>
<div id="chart1_div"></div>
</body>
</html>
Can anyone help me figure out what this error message means?
