An adjustable Gantt chart showing a work schedule
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,
labels: [
'M','T','W','T','F','','',
'M','T','W','T','F','','',
'M','T','W','T','F','','',
'M','T','W','T','F','',''
],
xmax: 28,
vbars: [
[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('chart.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>