RGraph: HTML5 Javascript charts library - 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 onadjustend event, and in that you can look at the RGraph registry - RGraph.Registry.Get('chart.adjusting.gantt') The returned array consists of:

• The numerical index of the event being adjusted (corresponding to the chart.events array that you set).
• The chart object
• The starting X position of the bar (before the chart was adjusted)
• The starting Y position of the bar (before the chart was adjusted)
• The original numerical value (in relation to your chart.xmax) that the bar started at

When adjusting is complete the chart.events array is updated. So you can use the numerical index that you find in the registry (as above) with the chart.events 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>
    window.onload = function (e)
    {
        gantt_events = [
                  [31, 28, null, 'Richard'],
                  [0, 120, null, 'Bob'],
                  [84, 16, null, 'Fred'],
                  [35, 45, null, 'Charles'],
                  [0, 35, null, 'Kev'],
                 ];
        var gantt = new RGraph.Gantt('myc');
        gantt.Set('chart.xmax', 120);
        gantt.Set('chart.events', gantt_events);
        gantt.Set('chart.defaultcolor', '#0c0');
        gantt.Set('chart.labels', ['January', 'February', 'March', 'April']);
        gantt.Set('chart.borders', false);
        gantt.Set('chart.adjustable', true);
        gantt.Draw();
    
        /**
        * This is how to get notified once adjusting has ended
        */
        RGraph.AddCustomEventListener(gantt, 'onadjustend',function (obj)
        {
                var idx = RGraph.Registry.Get('chart.adjusting.gantt')[0];
        });
        
        /**
        * This is how to get notified during the adjusting
        */
        RGraph.AddCustomEventListener(gantt, 'onadjust',function (obj)
        {
            var events = obj.Get('chart.events');
            var conf   = RGraph.Registry.Get('chart.adjusting.gantt');
            var idx    = conf[0];                

            document.getElementById("eventID").value       = conf[0];
            document.getElementById("eventStart").value    = events[conf[0]][0];
            document.getElementById("eventDuration").value = events[conf[0]][1];
        });
    }
</script>