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:
index
- The numerical index of the event being adjusted (corresponding to the data array that you set in the constructor).object
- The Gantt chart objectshape
- The pertinent shape informationmousex
- The mouse X coordinate when adjusting beganmousey
- The mouse Y coordinate when adjusting beganevent_duration
- The size of the event (when adjusting was commenced)mode
- This can be eithermove
orresize
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.
<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>
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.