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>
var data = [
[3, 2, null, 'Barney','red'],
[7, 5, null, 'Harry','blue'],
[14, 3, null, 'Cynthia','pink'],
[[14, 5, null, 'Kiffen','#aaf'], [21, 5, null, 'Kiffen','#aaf']],
[14, 5, null, 'John', 'cyan'],
[21, 5, null, 'Jenny', 'green'],
[21, 5, null, 'Ken', 'black'],
[21, 5, null, 'Richard', 'pink'],
[[14, 5, null, 'Lucy','#fc7'], [21, 5, null, 'Lucy','#fc7']]
];
var gantt = 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');
var index = RGraph.Registry.get('chart.adjusting.gantt').index;
var subindex = RGraph.Registry.get('chart.adjusting.gantt').subindex;
if (typeof subindex === 'number') {
document.getElementById('eventStart').value = obj.data[index][subindex][0] + 1;
document.getElementById('eventduration').value = obj.data[index][subindex][1];
document.getElementById('name').value = obj.data[index][subindex][3];
} else {
document.getElementById('eventStart').value = obj.data[index][0] + 1;
document.getElementById('eventduration').value = obj.data[index][1];
document.getElementById('name').value = obj.data[index][3];
}
});
</script>