CODEWITHSUNDEEP
javascriptvis.js
Steve
Steve

Reputation: 266

vis.js timeline how to add mouse over event to vis-item box-box

I created a timeline chart by using vis.js. I have many vis-box items. Since I can display very limited information on the timeline. I therefore want to show the detail information for the item when a user mover over the item.

I check documentation for timeline event at this url http://visjs.org/docs/timeline/#Events. I see how to handle select event.

I am wondering how to add mouse over event for an item?

Thanks.

This is for select event

function onSelect (properties) {
   alert('selected items: ' + properties.nodes);
}

// add event listener
timeline.on('select', onSelect);

how to add mouse over event for an item?

timeline.on('mouseover', onMouseover)?

Here is the code https://jsfiddle.net/gbdjbdhv/17/

Thanks for your help!

Upvotes: 5

Views: 8058

Answers (1)

Jos de Jong
Jos de Jong

Reputation: 6809

You can attach a regular JavaScript event listener to the container DIV, and use the method timeline.getEventProperties(event) to see whether the event happened on top of an item or not.

var container = document.getElementById('visualization');

var items = new vis.DataSet([
  {id: 4, className:'item4', content: 'item 4', start: '2016-01-16'},
  {id: 5, className:'item5', content: 'item 5', start: '2016-02-23'},
  {id: 6, className:'item6', content: 'item 6', start: '2016-03-27'}
]);

var options = {
  showCurrentTime: true,
  orientation: {axis: 'both', item: 'top'}, 
  height: 400,
  margin: {
    axis: 100
  }
};
var timeline = new vis.Timeline(container, items, options);

function onMouseover (event) {
  var properties = timeline.getEventProperties(event);
  // properties contains things like node id, group, x, y, time, etc.
  console.log('mouseover properties:', properties);
}
container.addEventListener('mouseover', onMouseover)

docs: http://visjs.org/docs/timeline/#Methods -> getEventProperties

Upvotes: 7

Related Questions