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!
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit
https://groups.google.com/d/msgid/google-visualization-api/5735065d-a102-4f4a-ae4f-2d4956dc7efd%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
