A basic 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', linewidth: 0, color: 'red', background: 'pink'},
{start: 0, duration: 28, complete: 50, label: 'Rachel', linewidth: 0, color: 'red', background: 'pink'},
{start: 12, duration: 28, complete: 45, label: 'Fred', linewidth: 0, color: 'red', background: 'pink'},
{start: 59, duration: 14, complete: 0, label: 'Barney', linewidth: 0, color: 'red', background: 'pink'},
{start: 59, duration: 21, complete: 5, label: 'Gloria', linewidth: 0, color: 'red', background: 'pink'},
{start: 46, duration: 31, complete: 92, label: 'Paul', linewidth: 0, color: 'red', background: 'pink'},
{start: 80, duration: 21, complete: 46, label: 'Harry', linewidth: 0, color: 'red', background: 'pink'},
{start: 94, duration: 17, complete: 84, label: 'Shane', linewidth: 0, color: 'red', background: 'pink'},
{start: 34, duration: 14, complete: 32, label: 'Kyle', linewidth: 0, color: 'red', background: 'pink'},
{start: 64, duration: 14, complete: 28, label: 'Cynthia', linewidth: 0, color: 'red', background: 'pink'},
{start: 13, duration: 61, complete: 74, label: 'Mabel', linewidth: 0, color: 'red', background: 'pink'},
{start: 34, duration: 31, complete: 16, label: 'Paul', linewidth: 0, color: 'red', background: 'pink'},
{start: 80, duration: 22, complete: 45, label: 'Kiffen', linewidth: 0, color: 'red', background: 'pink'},
{start: 0, duration: 115, complete: 50, label: 'John', linewidth: 0, color: 'red', background: 'pink'}
];
gantt = new RGraph.Gantt({
id: 'cvs',
data: data,
options: {
xaxisLabels: ['January', 'February', 'March', 'April'],
xaxisScaleMax: 122,
labelsPercent: true,
backgroundGridVlinesCount: 4
}
}).draw();
</script>