By using nested arrays you can show multiple events per row (with tooltips).
This goes in the documents header:<script src="RGraph.common.core.js"></script> <script src="RGraph.common.dynamic.js"></script> <script src="RGraph.common.tooltips.js"></script> <script src="RGraph.common.resizing.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>
window.onload = function ()
{
var data = [
// First row
[
[5, 10, null, 'Maths', 'Gradient(#fdd:red)'],
[16, 8, null, 'Maths', 'Gradient(#fdd:red)']
],
// Second row
[
[0, 10, null, 'French', 'Gradient(#dfd:green)'],
[14, 10, null, 'French', 'Gradient(#dfd:green)']
],
// Third row
[
[0, 5, null, 'German', 'Gradient(pink:#ff69b4)'],
[6, 5,null, 'German', 'Gradient(pink:#ff69b4)'],
[12, 5,null, 'German', 'Gradient(pink:#ff69b4)'],
[18, 5,null, 'German', 'Gradient(pink:#ff69b4)']
],
// Fourth row - only one event on this row
[5, 15,null, 'Polish', 'Gradient(#ffffbb:orange)'],
// Fifth row
[
[5, 5,null, 'Dutch', 'Gradient(#faa:pink)'],
[11, 5,null, 'Dutch', 'Gradient(#faa:pink)']
]
];
var gantt = new RGraph.Gantt({
id: 'cvs',
data: data,
options: {
tooltips: ['A','B','C','D','E','F','G','H','I','J','K','L','M'],
hmargin: 10,
xmax: 24,
resizable: true,
textAccessible: true,
textAccessiblePointerevents: false,
labelsInbar: [
'Maths', 'Maths',
'French', 'French',
'German','German','German','German',
'Polish',
'Dutch','Dutch'
],
labelsInbarAlign: 'center',
labelsInbarFont: 'Arial',
labelsInbarSize:22,
labelsInbarColor: '#333',
vmargin: 10
}
}).draw();
};
</script>