An adjustable Gantt chart showing a work schedule

[No canvas support]

Name:
Event start:
Event duration:

This goes in the documents header:
<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.gantt.js"></script>
Put this where you want the chart to show up:
<canvas id="cvs" width="800" height="350">[No canvas support]</canvas>

<br /><br />

<span style="display: inline-block; width: 125px">Name:</span> <input type="text" id="name" style="font-size: 16pt; padding: 5px"/><br />
<span style="display: inline-block; width: 125px">Event start:</span> <input type="text" id="eventStart"  style="font-size: 16pt; padding: 5px" /><br />
<span style="display: inline-block; width: 125px">Event duration:</span> <input type="text" id="eventduration"  style="font-size: 16pt; padding: 5px" />
This is the code that generates the chart:
<script>
    data = [
        {start: 3,  duration: 5, label: 'Barney', color: 'red'},
        {start: 7,  duration: 3, label: 'Harry', color: 'blue'},
        {start: 14, duration: 5, label: 'Cynthia', color: 'pink'},
        [
            {start: 14, duration: 5, label: 'Kiffen', color: '#aaf'},
            {start: 21, duration: 5, color: '#aaf'}
        ],
        {start: 21, duration: 5, label: 'John', color: 'cyan'},
        {start: 21, duration: 5, label: 'Jenny', color: 'green'},
        {start: 21, duration: 5, label: 'Ken', color: 'black'},
        {start: 14, duration: 5, label: 'Richard', color: 'pink'},
        [
            {start: 14, duration: 5, label: 'Lucy', color: '#fc7'},
            {start: 21, duration: 5, color: '#fc7'}
        ]
    ];

    new RGraph.Gantt({
        id: 'cvs',
        data: data,
        options: {
            borders: false,
            xaxisLabels: [
                'M','T','W','T','F','','',
                'M','T','W','T','F','','',
                'M','T','W','T','F','','',
                'M','T','W','T','F','',''
            ],
            xaxisScaleMax: 28,
            backgroundVbars: [
                [5, 2, 'rgba(240,240,240,0.75)'],
                [12, 2, 'rgba(240,240,240,0.75)'],
                [19, 2, 'rgba(240,240,240,0.75)'], 
                [26, 2, 'rgba(240,240,240,0.75)']
            ],
            adjustable: true
        }
    }).draw().on('adjust', function (obj)
    {
        var event    = RGraph.Registry.get('adjusting.gantt'); // Don't chain this line
        var index    = event.index,
            subindex = event.subindex;

        if (typeof subindex === 'number') {
            document.getElementById('eventStart').value    = obj.data[index][subindex].start + 1;
            document.getElementById('eventduration').value = obj.data[index][subindex].duration;
            document.getElementById('name').value          = obj.data[index][subindex].label;
        } else {
            document.getElementById('eventStart').value    = obj.data[index].start + 1;
            document.getElementById('eventduration').value = obj.data[index].duration;
            document.getElementById('name').value          = obj.data[index].label;
        }
    });
</script>