Need help with TimeLine visualization - data from JSON file.

2,843 views
Skip to first unread message

Sandeep Ambekar

unread,
Nov 7, 2013, 11:21:46 AM11/7/13
to google-visua...@googlegroups.com
Hi..

I am looking to pull data for timeline from a JSON file. I get below error. Please help in fixing this.

ERROR:

Uncaught Error: Invalid JSON string:


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":"WATCH","f":null},{"v":"TODAYS","f":null},{"v": new Date(2013,10,10,01,46,0),"f":null},{"v": new Date(2013,10,10,06,31,0),"f":null}]},
        {"c":[{"v":"WATCH","f":null},{"v":"AVERAGE","f":null},{"v": new Date(2013,10,10,01,52,0),"f":null},{"v": new Date(2013,10,10,06,37,0),"f":null}]}
        
      ]
}

asgallant

unread,
Nov 7, 2013, 11:35:27 AM11/7/13
to google-visua...@googlegroups.com
Date objects are not valid inside JSON strings.  The Visualization API uses a custom string format for handling dates; you need to remove the "new" keyword and wrap the "Date(...)" in quotes:

{"v":"Date(2013,10,10,01,46,0)","f":null}

Sandy

unread,
Nov 7, 2013, 11:38:50 AM11/7/13
to google-visua...@googlegroups.com
more details:

html:

<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':['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;
     // var newData = JSON.parse(jsonData);
     
      // Create our data table out of JSON data loaded from server.
      var data = new google.visualization.DataTable(JSON.parse(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>

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

?>




--
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/DhqFqPJQQv0/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/groups/opt_out.

Sandy

unread,
Nov 7, 2013, 11:43:28 AM11/7/13
to google-visua...@googlegroups.com
asgallant,

I made changes as you mentioned. I still get the same error. Please suggest.

  1. Uncaught Error: Invalid JSON string: { "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":"WATCH","f":null},{"v":"TODAYS","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": "Date(2013,10,10,01,52,0)","f":null},{"v": "Date(2013,10,10,06,37,0)","f":null}]} ] } dygraph,format+en,default,timeline.I.js:95
    4. drawChart


asgallant

unread,
Nov 7, 2013, 1:27:10 PM11/7/13
to google-visua...@googlegroups.com
You are missing a comma after the "name" column's object:

{"id":"Name","label":"Name","pattern":"","type":"string"}, <-- missing this comma
To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.

Sandy

unread,
Nov 7, 2013, 1:33:11 PM11/7/13
to google-visua...@googlegroups.com
asgallant!!!!!!!!!!!!!!

Thank you very much..!! not sure how I missed it!! *not good*!!


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

Ákos Kovács

unread,
Aug 14, 2014, 4:12:24 AM8/14/14
to google-visua...@googlegroups.com
How can I generate a json file like that you have pasted?

Andrew Gallant

unread,
Aug 14, 2014, 8:41:03 AM8/14/14
to google-visua...@googlegroups.com
Do you want to generate the JSON dynamically (like from a database query)?  If you do, what is your server environment like (database, scripting or programming language, etc)?

Gurpreet Nagi

unread,
Jan 16, 2016, 3:38:51 AM1/16/16
to Google Visualization API
Thank you ! this worked for me too !

{"v":"Date(2013,10,10,01,46,0)","f":null}

jshea...@gmail.com

unread,
Jan 27, 2016, 5:05:26 PM1/27/16
to Google Visualization API
Hi,

Did you receive these errors?

The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol. exampleUsingPHP.html

ReferenceError: $ is not defined
drawChart()

Any help on this would be great.

Thanks,
Jess
To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.
Reply all
Reply to author
Forward
0 new messages