<!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-23 12:00:00', end: '2014-01-26 12:00:00', group:'group1', subgroup:'sg_1' }, { id: 2, content: 'item 1 (actual time)', start: '2014-01-24 12:00:00', end: '2014-01-27 12:00:00', group:'group1', subgroup:'sg_1' }, // subgroup 2 { id: 3, content: 'item 2 (expected time)', className: 'expected', start: '2014-01-13 12:00:00', end: '2014-01-16 12:00:00', group:'group1', subgroup:'sg_2' }, { id: 4, content: 'item 2 (actual time)', start: '2014-01-14 12:00:00', end: '2014-01-17 12:00:00', group:'group1', subgroup:'sg_2' } ]); 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>