Hey Guys,
I attached my code. It is supposed to load the Json-file and output a
Timeline, but i jus get an error: Invalid data table format: must have 3 or
4 data columns.
Changing the Json-File didnt help.
Can anyone help me?
thank you in advanced
My .JSON:
{
"cols": [
{"id":"Room","label":"Room","pattern":"","type":"string"},
{"id":"Name","label":"Name","pattern":"","type":"string"},
{"id":"Title","label":"Title","pattern":"","type":"string"}
{"id":"Start","label":"Start","pattern":"","type":"date"},
{"id":"End","label":"End","pattern":"","type":"date"}
],
"rows": [
{"c":[{"v":"WATCH","f":null},{"v":"TODAY","f":null},{"v":"XY","f":null},{"v":
"Date(2013,10,10,01,46,0)","f":null},{"v":
"Date(2013,10,10,06,31,0)","f":null}]},
{"c":[{"v":"WATCH","f":null},{"v":"AVERAGE","f":null},{"v":"XY","f":null},{"v":
"Date(2013,10,10,01,52,0)","f":null},{"v":
"Date(2013,10,10,06,37,0)","f":null}]},
{"c":[{"v":"WATCH","f":null},{"v":"TODAY","f":null},{"v":"XY","f":null},{"v":
"Date(2013,10,10,01,46,0)","f":null},{"v":
"Date(2013,10,10,06,31,0)","f":null}]},
{"c":[{"v":"WATCH","f":null},{"v":"AVERAGE","f":null},{"v":"XY","f":null},{"v":
"Date(2013,10,10,01,52,0)","f":null},{"v":
"Date(2013,10,10,06,37,0)","f":null}]}
]
}
My .php:
<?php
// This is just an example of reading server side data and sending it to
the client.
// It reads a json formatted text file and outputs it.
$string = file_get_contents("sampleData.json");
echo $string;
// Instead you can query your database and parse into JSON etc etc
?>
My .html:
<html>
<head>
<title>Timeline</title>
<!--Load the AJAX API-->
<script type="text/javascript"
src="https://www.gstatic.com/charts/loader.js";></script>
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
/*Google Timeline*/
// Load the Visualization API and the piechart package.
google.charts.load('current', {'packages':['timeline']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('timeline');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
var jsonData = $.ajax({
url: "getData.php",
dataType:"json",
async: false
}).responseText;
// var newData = JSON.parse(jsonData);
// 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('chart_div'));
chart.draw(dataTable);
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="timeline" style="height: 300px;"></div>
</body>
</html>
--
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 view this discussion on the web visit
https://groups.google.com/d/msgid/google-visualization-api/945d0baa-fc84-41f5-a9e9-e06bf5f6f6c1%40googlegroups.com.
