Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>SO Q#</title>
​
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['timeline']}]}"></script>
<script type="text/javascript">
google.setOnLoadCallback(drawChart);
​
function drawChart() {
    var container = document.getElementById("example1");
​
    var chart = new google.visualization.Timeline(container);
​
    var dataTable = new google.visualization.DataTable();
​
    dataTable.addColumn({ type: "string", id: "RowName" });
    dataTable.addColumn({ type: "string", id: "Label" });
    dataTable.addColumn({ type: "date", id: "Start" });
    dataTable.addColumn({ type: "date", id: "End" });
​
    dataTable.addRows([
      ["Row1", "Step 1", new Date(2013, 11, 4, 2, 45, 0), new Date(2013, 11, 4, 4, 5, 15)],
      ["Row1", "Step 2", new Date(2013, 11, 4, 4, 5, 15), new Date(2013, 11, 7, 8, 34, 55)],
      ["Row1", "Step 3", new Date(2013, 11, 7, 8, 34, 55), new Date(2013, 11, 12, 11, 28, 49)],
      ["Row1", "Step 4", new Date(2013, 11, 12, 11, 28, 49), new Date(2013, 11, 14, 9, 27, 17)]
    ]);
​
    var options = {
        timeline: {
            groupByRowLabel: true,
            showRowLabels: true
        }
    };
    
    // Note: Events will be available for Timelines starting with 
    // Google Charts version 36, expected to be released October 2013.
    google.visualization.events.addListener(chart, 'onmouseover', function (obj) {
        console.log(obj);
        var startDate = dataTable.getValue(obj.row, 2);
        var endDate   = dataTable.getValue(obj.row, 3);
        console.log(startDate);
        console.log(endDate);
        var timeDiff = Math.abs(startDate.getTime() - endDate.getTime());
        var diffDays = (timeDiff / (1000 * 3600 * 24)); 
        console.log(diffDays);
        
        var durationEl = document.getElementById('duration');
        durationEl.innerHTML = 'Duration: ' + diffDays.toFixed(4);
    });
​
    chart.draw(dataTable, options);
​
}
</script>
​
<script>
</script>
​
</head>
<body>
<div id="example1" style="width: 900px; height: 180px;"></div>
<div id='duration'></div>
​
<script>
</script>
  
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
antojurkovicpro
0viewers