The problem is in the JSON; Date objects are not valid JSON. The
Visualization API uses a string format for passing dates via JSON. The
string format is "Date(year, month, day)" - it is a string that looks like
a Date object, without the "new" keyword. As an example, your first row of
data should look like this:
{"c":[{"v":"President","f":null},{"v":"Vamshi","f":null},{"v":
"Date(2014,09,23)","f":null},{"v": "Date(2014,09,31)","f":null}]},
On Thursday, October 23, 2014 5:19:33 AM UTC-4, Vamshi Krishna wrote:
>
> Hi,
>
> I am looking to generate a timeline chart using the json file, but below
> is the error I am getting. Please help me in fixing this.
>
>
> <https://lh6.googleusercontent.com/-8HAS_rxBE0Y/VEjHmyF6HcI/AAAAAAAAAG8/qSxG7Msnlu8/s1600/Capture.JPG>
> *JSON file used : *
>
> "cols": [
> {"id":"Room","label":"Room","pattern":"","type":"string"},
> {"id":"Name","label":"Name","pattern":"","type":"string"},
> {"id":"Start","label":"Start","pattern":"","type":"date"},
> {"id":"End","label":"End","pattern":"","type":"date"}
> ],
> "rows": [
> {"c":[{"v":"President","f":null},{"v":"Vamshi","f":null},{"v": new
> Date(2014,09,23),"f":null},{"v": new Date(2014,09,31),"f":null}]},
> {"c":[{"v":"President","f":null},{"v":"Vamshi","f":null},{"v": new
> Date(2014,09,23),"f":null},{"v": new Date(2014,09,31),"f":null}]},
> {"c":[{"v":"President","f":null},{"v":"Vamshi","f":null},{"v": new
> Date(2014,09,23),"f":null},{"v": new Date(2014,09,31),"f":null}]},
> {"c":[{"v":"Lab Admin","f":null},{"v":"krishna","f":null},{"v":
> new Date(2014,09,25),"f":null},{"v": new Date(2014,09,30),"f":null}]}
> ]
>
> }
>
> *html file :*
>
> <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>
> <script type="text/javascript">
>
> // Load the Visualization API and the piechart package.
> //google.load('visualization', '1', {'packages':['corechart']});
> google.load("visualization", "1", {packages: ["timeline"]});
>
> // Set a callback to run when the Google Visualization API is loaded.
> google.setOnLoadCallback(drawChart);
>
> function drawChart() {
> var jsonData = $.ajax({
> url: "getData.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('chart_div'));
> chart.draw(data, {width: 1000, height: 600})
> }
>
> </script>
> </head>
>
> <body>
> <!--Div that will hold the pie chart-->
> <div id="chart_div"></div>
> </body>
> </html>
>
> *getData.php file used:*
>
> <?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
>
> ?>
>
>
--
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/d/optout.
