CODEWITHSUNDEEP
javascriptvis.js
Nick Stares
Nick Stares

Reputation: 45

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.

Upvotes: 1

Views: 4685

Answers (3)

Felipe Ferreira
Felipe Ferreira

Reputation: 131

Just do a foreach on all items and set the 'display' style according to your filter condition:

var currentStatusFilter = "scheduled";
//Get Timeline
var timeline = $(".timeline").data("timeline");
//Iterate for each item
timeline.itemsData.forEach(function(item) {
    //Filter condition 
    if(currentStatusFilter && currentStatusFilter != item.myPropertyStatus) {
        item.style = 'display: none;';
    } else {
        item.style = '';
    }
    timeline.itemsData.update(item);
});
timeline.redraw();

Upvotes: 0

jsanmarb
jsanmarb

Reputation: 936

In my case, in order to hide an item, I setted back the item by a year to hide, and then set original date and time to show the item again.

This is useful when the timeline setted a minimum date for the visible range and it is not be possible to move beyond this minimum, like in my case where the timeline can not move before a month ago.

Then the code may be something like this:

function item_hide(id)
{
    var item;

    item= dataSet_items.get(id);
    if(item === null)
        return;

    item.start= moment(item.start_original).subtract(1, 'y').format("YYYY-MM-DD HH:mm:ss");
    item.end= moment(item.end_original).subtract(1, 'y').format("YYYY-MM-DD HH:mm:ss");
    item.hidden= true;
    dataSet_items.update(item);

    return item;
}


function item_show(id)
{
    var item;

    item= dataSet_items.get(id);
    if(item === null)
        return;

    item.start= item.start_original;
    item.end= item.end_original;
    item.hidden= false;
    dataSet_items.update(item);

    return item;
}

Upvotes: 0

GriffoGoes
GriffoGoes

Reputation: 734

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.

Upvotes: 1

Related Questions