Column charts annotations

by heennkkee

HTML

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['controls', 'timeline']}]}"></script>
<div id="chart_div" style=""></div>
<div id="chart_div_2" style=""></div>

JavaScript

google.setOnLoadCallback(drawChart);

function drawChart() {
    var data = google.visualization.arrayToDataTable([
          ['Descr', 'Start', 'End'],
          ['Test', new Date(2016, 3, 0, 13, 21, 0), new Date(2016, 3, 0, 13, 21, 10)],
          ['Next Test', new Date(2016, 3, 0, 13, 21, 12), new Date(2016, 3, 0, 13, 21, 25)],
        ]);


    var timeline = new google.visualization.ChartWrapper({
        chartType: 'Timeline',
        containerId: 'chart_div',
        dataTable: data
    });
		timeline.draw();   
    
    google.visualization.events.addListener(timeline.getChart(), 'onmouseover', function(e) {
			alert('mouseover event fired');
    });
    
    google.visualization.events.addListener(timeline, 'onmouseout', function(e) {
			alert('mouseout event fired');
    });
    
    google.visualization.events.addListener(timeline, 'select', function(e) {
			alert('select event fired');
    });
}