From 770ba5201f5c60b2bb36602ff9d359f641e33125 Mon Sep 17 00:00:00 2001 From: Yves Fischer Date: Sun, 23 Oct 2011 21:14:40 +0200 Subject: Charting with flask, rgraph and custom "timeseries database" --- schall/static/RGraph/docs/adjusting_gantt.html | 228 +++++++++++++++++++++++++ 1 file changed, 228 insertions(+) create mode 100644 schall/static/RGraph/docs/adjusting_gantt.html (limited to 'schall/static/RGraph/docs/adjusting_gantt.html') diff --git a/schall/static/RGraph/docs/adjusting_gantt.html b/schall/static/RGraph/docs/adjusting_gantt.html new file mode 100644 index 0000000..2d19f20 --- /dev/null +++ b/schall/static/RGraph/docs/adjusting_gantt.html @@ -0,0 +1,228 @@ + + + + + + RGraph: HTML5 Javascript charts library - Adjusting your charts interactively - Gantt chart + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

+ +

+ +

+ + + +

+ + +

+ + + + +

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. +

+ +

+ Event ID: + Event start: + Event duration: + +

+<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>
+

+ + + \ No newline at end of file -- cgit v1.2.1