Adjusting your charts interactively - Gantt chart

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 onadjust or onadjustend events, and in that you can look at the RGraph registry - RGraph.Registry.get('chart.adjusting.gantt') The returned array consists of:

When adjusting is complete the array is updated. So you can use the numerical index that you find in the registry (as above) with the 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.

[No canvas support]
Event ID: Event start: Event duration:
    var 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'}

    var 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)']

    // This is how to get notified once adjusting has ended    
    RGraph.addCustomEventListener(gantt, 'onadjust',function (obj)
        var events =;
        var conf   = RGraph.Registry.get('chart.adjusting.gantt');
        if (conf) {
            var idx = conf['index'];
            document.getElementById("eventID").value       = idx;
            document.getElementById("eventStart").value    = events[idx].start;
            document.getElementById("eventDuration").value = events[idx].duration;
            console.log('Event ID: ' + idx + ', Event start: ' + events[idx].start + ' Event duration: ' + events[idx].duration);