chengnan
/
s202226701001


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
							<!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>