Customizing onmouseover Event in Timeline

31 views
Skip to first unread message

Kerry Wahl

unread,
Jan 4, 2016, 12:13:19 PM1/4/16
to Google Visualization API
I am using the Timeline chart to create some timelines for my webpage.  I was able to render a basic version of the charts successfully, but I want to customize the onmouseover event to display certain block information.  I haven't been able to find any examples of how to customize this functionality though.  

Currently, my table code looks like this:

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

   
<script language="Javascript" type="text/javascript">

      google
.setOnLoadCallback(drawChart);
     
function drawChart() {
       
var container = document.getElementById('timeline');
       
var chart = new google.visualization.Timeline(container);
       
var dataTable = new google.visualization.DataTable();

        dataTable
.addColumn({ type: 'string', id: 'RowLabel' });
        dataTable
.addColumn({ type: 'string', id: 'BlockLabel' });
        dataTable
.addColumn({ type: 'date', id: 'Start' });
        dataTable
.addColumn({ type: 'date', id: 'End' });
        dataTable
.addRows([
       
["SAT 2B", "Task 1", new Date(2015,01,01), new Date(2015,01,02)],
       
["SAT 2B", "Task 1", new Date("2015-03-10 05:10:39.010000"), new Date("2015-03-15 05:10:39.010000")],
       
["SAT 2C", "Task 1", new Date("2015-04-10 05:10:39.010000"), new Date("2015-04-15 05:10:39.010000")],
       
]);

       
var formatter = new google.visualization.DateFormat({pattern:'yyyy/DDD-HH:mm:ss'});

        formatter
.format(dataTable,2);
        formatter
.format(dataTable,3);

       
var options = {
            timeline
: { colorByRowLabel: true }
         
};

        chart
.draw(dataTable,options);
     
}

       
</script>
       
<div>
           
<h4><p class="text-center">A Timeline</p></h4>
           
<div id="timeline" style="width: 95%;"></div>
       
</div>


I want to be able to display the BlockLabel, Start, and End date when the user mouses over a given block in the timeline.  I am also having trouble getting the date formatter to work.

Thanks!
Reply all
Reply to author
Forward
0 new messages