Experiment

by TimunAb

HTML

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['timeline']}]}"></script>
<div id="customTime">&nbsp;</div>
<p></p>

<div id="mytimeline"></div>

JavaScript

google.setOnLoadCallback(drawVisualization);

// Called when the Visualization API is loaded.
        // Called when the Visualization API is loaded.
        function drawVisualization() {
            // Create and populate a data table.
    var container = document.getElementById('mytimeline');
    var chart = new google.visualization.Timeline(container);
    var data = new google.visualization.DataTable();
            data.addColumn('string', 'content');
           data.addColumn('datetime', 'start');
            data.addColumn('datetime', 'end');
             data.addRows([['Dynamic event',
                new Date((new Date()).getTime() - 60 * 1000),
                new Date()
                ]]);

            // specify options
            var options = {
                'showCustomTime': true
                'allowHtml': true
            };

            // Instantiate our timeline object.
 //           timeline = new links.Timeline(document.getElementById('mytimeline'));

            // Add event listeners
 //           google.visualization.events.addListener(timeline, 'timechange', onTimeChange);

            // Draw our timeline with the created data and options
            chart.draw(data, options);

        }
drawVisualization();