JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://www.google.com/jsapi"></script>
<div id="visualization">Loading...</div>

CSS

#visualization {
    height: 200px; /* required */
}

JavaScript

JSON_DATA = '{ "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"}]}]}';

// -----

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({ 
    type: 'POST',
    data: { json: JSON_DATA },
    url: '/echo/json/',
    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();
    }
});