An adjustable Gantt chart
This goes in the documents header:
<script src="RGraph.common.core.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>
This is the code that generates the chart:
<script>
data = [
{start: 31, duration: 28, complete: 67, label: 'Richard'},
{start: 0, duration: 28, complete: 50, label: 'Rachel'},
{start: 12, duration: 28, complete: 45, label: 'Fred'},
{start: 59, duration: 14, complete: 0, label: 'Barney'},
{start: 59, duration: 21, complete: 5, label: 'Gloria'},
{start: 46, duration: 31, complete: 92, label: 'Paul'},
{start: 80, duration: 21, complete: 46, label: 'Harry'},
{start: 94, duration: 17, complete: 84, label: 'Shane'},
{start: 34, duration: 14, complete: 32, label: 'Kyle'},
{start: 64, duration: 14, complete: 28, label: 'Cynthia'},
{start: 13, duration: 61, complete: 74, label: 'Mabel'},
{start: 84, duration: 31, complete: 16, label: 'Paul'},
{start: 80, duration: 22, complete: 45, label: 'Kiffen'},
{start: 0, duration: 115, complete: 50, label: 'John'}
];
new RGraph.Gantt({
id: 'cvs',
data: data,
options: {
labels: ['January', 'February', 'March', 'April'],
xmax: 122,
labelsPercent: true,
backgroundGridAutofitNumvlines: 4,
adjustable: true
}
}).draw();
</script>