Adjusting your charts: Gantt chart

Summary: Information about adjusting the Gantt chart interactively. It can be used as part of an interactive scheduling application.

The Gantt chart can be adjusted by dragging the bars left or right, or the events can be resized if you place the cursor at the right edge of the event. To get the details of the bar being dragged you can use the adjust or adjustend events and inside the event handler you can look at the RGraph registry - RGraph.Registry.get('adjusting.gantt') The returned array consists of:

• index - The numerical index of the event being adjusted (corresponding to the data array that you set in the constructor).
• object - The Gantt chart object
• shape - The pertinent shape information
• mousex - The mouse X coordinate when adjusting began
• mousey - The mouse Y coordinate when adjusting began
• event_duration - The size of the event (when adjusting was commenced)
• mode - This can be either move or resize indicating what was done to the bar.

When adjusting is complete the obj.data array is updated. So you can use the numerical index that you find in the registry (as above) with the obj.data array to get up-to-date event information.

Note: The Gantt chart uses console.log to send notifications. Press CTRL+SHIFT+J in Chrome to see the console or use Firebug in Firefox. Other browsers will vary.

<script>
    gantt_events = [
        {start: 31, duration: 28,  label:'Richard'},
        {start: 0,  duration: 120, label:'Bob'},
        {start: 84, duration: 16,  label:'Fred'},
        {start: 35, duration: 45,  label:'Charles'},
        {start: 0,  duration: 35,  label:'Kev'},
        {start: 0,  duration: 28,  label:'Wayne'},
        {start: 31, duration: 28,  label:'John'}
    ];

    gantt = new RGraph.Gantt({
        id: 'cvs',
        data: gantt_events,
        options: {
            xaxisScaleMax: 120,
            backgroundGridVlinesCount: 4,
            borders: false,
            colorsDefault: '#0c0',
            xaxisLabels: ['January', 'February', 'March', 'April'],
            title: 'An adjustable Gantt chart',
            adjustable: true,
            backgroundVbars: [
                [0, 31, 'rgba(230,230,230,0.4)'],
                [59, 31, 'rgba(230,230,230,0.4)']
            ]
        }
    }).draw().on('adjust', function (obj)
    {
        var events = obj.data;
        var conf   = RGraph.Registry.get('adjusting.gantt');


        if (conf) {
            
            var index = conf.dataset;

            document.getElementById("eventID").value       = index;
            document.getElementById("eventStart").value    = events[index].start;
            document.getElementById("eventDuration").value = events[index].duration;
            
            console.log('Event ID: ' + index + ', Event start: ' + events[index].start + ' Event duration: ' + events[index].duration);
        }
    });
</script>