google.visualization.DataTable: Object new Date( 2013, 12, 14, 19, 53, 31, 0 ) has no method 'getTime'

Question

I have the code that should draw a chart, and another php script is sending it the json string. For some reason the Date object is not created, Am I using the wrong json string?

This is the code:

<script>
  var jsonData = $.ajax({ 
  url: "get_stat_data.php?ID=2811&CMD=watts", 
  dataType:"json", 
  async: false 
}).responseText;     

</script>
<script type="text/javascript">
  google.load('visualization', '1', {packages: ['annotatedtimeline']});
  function drawVisualization() {
    var data = new google.visualization.DataTable(jsonData);    
    var annotatedtimeline = new google.visualization.AnnotatedTimeLine(
    document.getElementById('visualization'));
    annotatedtimeline.draw(data, {'displayAnnotations': true});
  }
google.setOnLoadCallback(drawVisualization);
</script>

The json string:

{ "cols": [{"id":"0","label":"Time","type":"date"},{"id":"1","label":"Watts","type":"number"}], "rows":[{"c":[{"v":"new Date( 2013, 12, 14, 19, 53, 31, 0 )"},{"v":"109"}]},{"c":[{"v":"new Date( 2013, 12, 14, 19, 53, 31, 0 )"},{"v":"107"}]},{"c":[{"v":"new Date( 2013, 12, 14, 19, 53, 32, 0 )"},{"v":"109"}]}]}

Thank you!

That's not valid json. See http://stackoverflow.com/a/2316066/838733 for a proper example on how to handle dates. — nietonfir, Dec 30 '13 at 21:50

score 0 · Answer 1 · edited Oct 07 '21 at 06:31

You're assigning the responseText to your data variable which is just a string - even if you were to parse it yourself the dates are still strings which the Google API doesn't seem to resolve automatically. Without reading too much into it (that's your job...) you should ideally change your back-end code to pass the date string in an RFC-2822 compliant format that can be parsed easily by the Javascript Date object.

For now, I've just added a workaround - technically if you trust the source of the data you could eval the code but fearful of down votes I've opted for a regular expression instead. I've also tweaked the logic a little bit because frankly I can't bring myself to post a synchronous AJAX solution.

myVis = {
    data: {},
    googLoaded: false,
    dataLoaded: false,
    drawVisualization: function(){ 
        if(!this.googLoaded || !this.dataLoaded) return;
        var data = new google.visualization.DataTable(this.data),    
            line = new google.visualization.AnnotatedTimeLine(
                document.getElementById('visualization')
            );
        line.draw(data, {'displayAnnotations': true});
    },
    dateFromArgs: function($1, $2, $3, $4, $5, $6, $7){
        return new Date($1, $2, $3, $4, $5, $6, $7); // fugly
    }
};

$.ajax({ 
    url: 'get_stat_data.php?ID=2811&CMD=watts',
    dataType: 'json',
    success: function(json){
        $.each(json.rows, function(i, el){
            var args = el.c[0].v.match(/(\d+)/g);
            el.c[0].v = myVis.dateFromArgs.apply(null, args);
        });
        myVis.data = json;
        myVis.dataLoaded = true;
        myVis.drawVisualization();
    }
});

google.load('visualization', '1', { 
    packages: ['annotatedtimeline'],
    callback: function(){
        myVis.googLoaded = true;
        myVis.drawVisualization();
    }
});

^{Note: You can put this in a single <script></script> block - it's just separated above to avoid scrollbars.}

jsFiddle: demo

The graph looks a little sparse to me - I'm not sure if this resembles what you were looking for or if you've just given us a limited dataset to work with but it should be enough to point you in the right direction.

google.visualization.DataTable: Object new Date( 2013, 12, 14, 19, 53, 31, 0 ) has no method 'getTime'

1 Answers1