Search code examples
javascriptvis.jsvis.js-timeline

vis.js Dynamically create a new item on a timeline


I'm looking for a method to dynamically create new individual items on the timeline in vis.js

Looking at the documentation (http://visjs.org/docs/timeline/) I cannot see any method to do this.


Solution

  • DataSet.add allows you to modify the data set after its creation. The example linked in the question has code like:

    var items = new vis.DataSet([
        {id: 1, content: 'item 1', start: '2013-04-20'},
        ...
        {id: 6, content: 'item 6', start: '2013-04-27'}
    ]);
    

    This creates a DataSet. The examples on the DataSet page have this example using the add method:

    var options = {};
    var data = new vis.DataSet(options);
    
    // add items
    // note that the data items can contain different properties and data formats
    data.add([
      {id: 1, text: 'item 1', date: new Date(2013, 6, 20), group: 1, first: true},
      {id: 2, text: 'item 2', date: '2013-06-23', group: 2},
      {id: 3, text: 'item 3', date: '2013-06-25', group: 2},
      {id: 4, text: 'item 4'}
    ]);