Adjusting charts: 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 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:

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.

    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 =;
        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);

The RGraph adjusting events

There are three RGraph events associated with adjusting. The adjustbegin event fires when adjusting begins, much like the mousedown event. The adjust event fires during adjusting, much like the mousemove event. The adjustend event fires when adjusting is finished, much like the mouseup event.