javascriptvis.js

vis.js Timeline show/hide items (and dot and line)


I have written some code to show/hide an item by classname. I accomplish this by changing the opacity of the vis-box to 0. However, when I hide the vis-box, the vis-dot and the vertical line extending from the timeline still show. I would like to hide those as well.

Image of hidden boxes with lines showing

So far I have been able to hide all of the lines and dots for the whole timeline (using chrome inspector) by changing the border-color css property to white. However I would like to only hide the dots and lines that belong to items of a specific class.


Solution

  • One solution is to change the dataset used with the timeline, removing and adding items as needed.

    From the doc (http://visjs.org/docs/data/dataset.html):

    dataset.add(data [, senderId]) - Add one or multiple items to the DataSet. data can be a single item or an array with items. Adding an item will fail when there already is an item with the same id. The function returns an array with the ids of the added items. See section Data Manipulation.

    remove(ids [, senderId]) - remove one or multiple items by id or by the items themselves. Returns an array with the ids of the removed items. See section Data Manipulation.

    You will only need to keep the list of items to hide/show in variable.