<!DOCTYPE HTML> <html> <head> <title>Timeline | expected vs actual times items</title> <script src="../../../dist/vis.js"></script> <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> <style> body, html { font-family: arial, sans-serif; font-size: 11pt; } .vis-item.expected { background-color: transparent; border-style: dashed!important; z-index: 0; } .vis-item.vis-selected { opacity: 0.6; } .vis-item.vis-background.marker { border-left: 2px solid green; } </style> </head> <body> <div id="visualization"></div> <script> // create a dataset with items // we specify the type of the fields `start` and `end` here to be strings // containing an ISO date. The fields will be outputted as ISO dates // automatically getting data from the DataSet via items.get(). var items = new vis.DataSet({ type: { start: 'ISODate', end: 'ISODate' } }); var groups = new vis.DataSet([ { id: 'group1', content:'group1' } ]); // add items to the DataSet items.add([ // group 1 { id: 'background1', start: '2014-01-21', end: '2014-01-22', type: 'background', group:'group1' }, // subgroup 1 { id: 1, content: 'item 1 (expected time)', className: 'expected', start: '2014-01-23T12:00:00', end: '2014-01-26T12:00:00', group:'group1', subgroup:'sg_1' }, { id: 2, content: 'item 1 (actual time)', start: '2014-01-24T12:00:00', end: '2014-01-27T12:00:00', group:'group1', subgroup:'sg_1' }, // subgroup 2 { id: 3, content: 'item 2 (expected time)', className: 'expected', start: '2014-01-13T12:00:00', end: '2014-01-16T12:00:00', group:'group1', subgroup:'sg_2' }, { id: 4, content: 'item 2 (actual time)', start: '2014-01-14T12:00:00', end: '2014-01-17T12:00:00', group:'group1', subgroup:'sg_2' }, // subgroup 3 { id: 5, content: 'item 3 (expected time)', className: 'expected', start: '2014-01-17T12:00:00', end: '2014-01-19T12:00:00', group:'group1', subgroup:'sg_3' }, { id: 6, content: 'item 3 (actual time)', start: '2014-01-17T12:00:00', end: '2014-01-18T12:00:00', group:'group1', subgroup:'sg_3' } ]); var container = document.getElementById('visualization'); var options = { start: '2014-01-10', end: '2014-02-10', editable: true, stack: false, stackSubgroups: false }; var timeline = new vis.Timeline(container, items, groups, options); </script> </body> </html>