# A Gantt chart showing multiple events per row

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>