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> data = [ [ {start: 5, duration: 10, label: 'Maths', background: 'Gradient(#fdd:red)'}, {start: 16, duration: 8, background: 'Gradient(#fdd:red)'} ], [ {start: 0, duration: 10, label: 'French', background: 'Gradient(#dfd:green)'}, {start: 14, duration: 10, background: 'Gradient(#dfd:green)'} ], [ {start: 0, duration: 5, label: 'German', background: 'Gradient(pink:#ff69b4)'}, {start: 6, duration: 5, background: 'Gradient(pink:#ff69b4)'}, {start: 12, duration: 5, background: 'Gradient(pink:#ff69b4)'}, {start: 18, duration: 5, background: 'Gradient(pink:#ff69b4)'} ], {start: 5, duration: 15, label: 'Polish', background: 'Gradient(#ffffbb:orange)'}, [ {start: 5, duration: 5, label: 'Dutch', background: 'Gradient(#faa:pink)'}, {start: 11, duration: 5, background: 'Gradient(#faa:pink)'} ] ]; new RGraph.Gantt({ id: 'cvs', data: data, options: { tooltips: ['A','B','C','D','E','F','G','H','I','J','K','L','M'], hmargin: 10, xaxisScaleMax: 24, xaxisLabels: ['A','B','C','D'], labelsInbar: [ 'Maths', 'Maths', 'French', 'French', 'German','German','German','German', 'Polish', 'Dutch','Dutch' ], labelsInbarAlign: 'center', labelsInbarFont: 'Arial', labelsInbarSize:22, labelsInbarColor: '#333', vmargin: 10 } }).draw(); </script>