<div id="mytimeline"></div>

<button type="button" id="pall">All</button>

<button type="button" id="p1">Project 1</button>

<button type="button" id="p2">Project 2</button>

<br>

<button type="button" id="fall">All</button>

<button type="button" id="f1">Phase 1</button>

<button type="button" id="f2">Phase 2</button>

<button type="button" id="f3">Phase 3</button>

<button type="button" id="f4">Phase 4</button>

var groups = new vis.DataSet([

    {id: 1, content: 'Phase 1'},

    {id: 2, content: 'Phase 2'},

    {id: 3, content: 'Phase 3'},

    {id: 4, content: 'Phase 4'}

]);

​

var items = new vis.DataSet();

​

var start = new Date('2015-09-16');

var end = new Date('2015-09-25');

items.add({

  id: 1,

  group: 1,

  start: start,

  end: end,

  className: 'p1',

  content: 'Project 1'

});

​

start = new Date('2015-09-25');

end = new Date('2015-10-05');

items.add({

  id: 2,

  group: 2,

  start: start,

  end: end,

  className: 'p1',

  content: 'Project 1'

});

​

start = new Date('2015-10-01');

end = new Date('2015-11-15');

items.add({

  id: 3,

  group: 3,

  start: start,

  end: end,

  className: 'p1',

  content: 'Project 1'

});

​

start = new Date('2015-11-15');

end = new Date('2015-12-25');

items.add({

  id: 4,

  group: 4,

  start: start,

  end: end,

  className: 'p1',

  content: 'Project 1'

});

​

start = new Date('2015-09-25');

end = new Date('2015-10-25');

items.add({

  id: 5,

  group: 1,

  start: start,

  end: end,

  className: 'p2',

  content: 'Project 2'

});

​

var options = {

    stack: false,

    min: new Date('2015-01-01'),                // lower limit of visible range

    max: new Date('2015-12-31'),                // upper limit of visible range

   hiddenDates: [

    {start: '2013-10-26 00:00:00', end: '2013-10-28 00:00:00', repeat: 'weekly'} // hide weekends

    ],

    zoomMin: 1000 * 60 * 60 * 24 * 7,             // one week in milliseconds

    editable: false,

    margin: {

      item: 10, // minimal margin between items

      axis: 5   // minimal margin between items and the axis

    },

    orientation: 'top'

};

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

timeline = new vis.Timeline(container, null, options);

timeline.setGroups(groups);

timeline.setItems(items);

​

$('#p1').on('click',function(){

  $('.p1').show();

  $('.p2').hide();  

});

$('#p2').on('click',function(){

  $('.p1').hide();

  $('.p2').show();

});

$('#pall').on('click',function(){

  $('.p1').show();

  $('.p2').show();  

});

​

$('#f1').on('click',function(){

  var groups = new vis.DataSet([

    {id: 1, content: 'Phase 1'}

  ]);

  timeline.setGroups(groups);

});

$('#f2').on('click',function(){

  var groups = new vis.DataSet([

    {id: 2, content: 'Phase 2'}

  ]);

  timeline.setGroups(groups);

});

$('#f3').on('click',function(){

  var groups = new vis.DataSet([

    {id: 3, content: 'Phase 3'}

  ]);

  timeline.setGroups(groups);

});

$('#f4').on('click',function(){

  var groups = new vis.DataSet([

    {id: 4, content: 'Phase 4'}

  ]);

  timeline.setGroups(groups);

});

$('#fall').on('click',function(){

  var groups = new vis.DataSet([

    {id: 1, content: 'Phase 1'},

    {id: 2, content: 'Phase 2'},

    {id: 3, content: 'Phase 3'},

    {id: 4, content: 'Phase 4'}

  ]);

  timeline.setGroups(groups);

});