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/zoom.html | 332 ++++++++++++++++++++++++++++++++++++ 1 file changed, 332 insertions(+) create mode 100644 schall/static/RGraph/docs/zoom.html (limited to 'schall/static/RGraph/docs/zoom.html') diff --git a/schall/static/RGraph/docs/zoom.html b/schall/static/RGraph/docs/zoom.html new file mode 100644 index 0000000..bda5490 --- /dev/null +++ b/schall/static/RGraph/docs/zoom.html @@ -0,0 +1,332 @@ + + + + + + RGraph: HTML5 Javascript charts library - Zooming your charts + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Mention RGraph on Twitter + +
+ + + +
+ + +
+ + + + +

RGraph: HTML5 Javascript charts library - Zooming your charts

+ + + + + + + + +

Canvas mode

+ + + + + + + + + + + +
+

+ As of November 2009 RGraph has had the ability to provide a zoom facility. It's designed to be used in + conjunction with a context menu as in the example to the right. +

+ +

+ You can control the zoom using these properties: +

+ +
    +
  • chart.zoom.modeDefault: canvas
    • +
  • chart.zoom.factorDefault: 1.5
    • +
  • chart.zoom.fade.in Default: true
    • +
  • chart.zoom.fade.out Default: true
    • +
  • chart.zoom.hdir Default: right
    • +
  • chart.zoom.vdir Default: down
    • +
  • chart.zoom.delay Default: 50
    • +
  • chart.zoom.frames Default: 10
    • +
  • chart.zoom.shadow Default: true
    • +
  • chart.zoom.mode Default: canvas
    • +
  • chart.zoom.thumbnail.width Default: 75
    • +
  • chart.zoom.thumbnail.height Default: 75
    • +
  • chart.zoom.background Default: true
    • +
+ 		+ [No canvas support] +
+ The possible values of chart.zoom.hdir are: left, center, right. + The possible values of chart.zoom.vdir are: up, center, down. chart.zoom.delay + is the delay in between frames (in milliseconds) and chart.zoom.frames is the number of frames in the zoom. chart.zoom.shadow + is whether the zoomed canvas has a shadow or not. The possible values of chart.zoom.mode are canvas (default) + and thumbnail. +
+ + + +
+ + 
+<script>
+    var graph = new RGraph.Line('myc', [4,6,8,7,9,4,3,8,7,4,5,5,5]);
+    graph.Set('chart.labels', ['Fry','Hav','Jim','Moo','Io','Olga','Tim','Gaz','Jake','Pippa','Lou','Fred','John']);
+    graph.Set('chart.contextmenu', [
+                                    ['Clear annotations', function () {RGraph.Clear(graph.canvas); graph.Draw();}],
+                                    ['Zoom in', RGraph.Zoom]
+                                   ]);
+    graph.Set('chart.title', 'Chart with zoom (context, annotatable)');
+    graph.Set('chart.shadow', true);
+    graph.Set('chart.annotatable', true);
+    graph.Draw();
+</script>
+
+ + + +

Thumbnail mode

+ + [No canvas support] + +

+ The zoom has an alternative thumbnail mode, which displays a small thumbnail zoom instead of zooming the entire canvas. + The chart to the left shows an example of this. +

+ +

+ It uses some of the same properties as the regular zoom, eg chart.fade.in, chart.fade.out, chart.zoom.shadow +

+ +
+ + 
+<script>
+    var myLine = new RGraph.Line('myc2', [40,48,45,64,34,22,23,56,56,54,84,44], [4,5,6,7,20,21,1,9,9,8,5,4]);
+    myLine.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
+    myLine.Set('chart.hmargin', 10);
+    myLine.Set('chart.linewidth', 3);
+    myLine.Set('chart.title', 'A sample line chart');
+    myLine.Set('chart.zoom.mode', 'thumbnail');
+    myLine.Set('chart.zoom.vdir', 'center');
+    myLine.Set('chart.zoom.thumbnail.width', 100);
+    myLine.Set('chart.zoom.thumbnail.height', 100);
+    myLine.Set('chart.colors', ['red', 'black']);
+    myLine.Set('chart.shadow', true);
+    myLine.Set('chart.contextmenu', [['Zoom entire chart', RGraph.Zoom]]);
+</script>
+
+ +

+ Making the zoom circular

+ A circular zoom window + It is possible to make the zoom in area mode circular by utilising the border-radius CSS property. Currently support for + this is limited to FireFox 4b7+ and MSIE9, so it's not part of the main RGraph software. The CSS ncessary to achieve this is + thus: +

+ + 
+<style>
+    .RGraph_zoom_window {
+        border-radius: 50px ! important;
+    }
+</style>
+
+ + This a chart demonstrating this technique here. Note that browser support for this technique is limited. + +
+ + + +

Area mode

+ + [No canvas support] + +

+ Another type of zoom available is area. This is somewhat similar to thumbnail, but allows you to draw a rectangle around + the specific area that you want to zoom. +

+ +

+ Again, this uses some common zoom properties, such as chart.zoom.factor. +

+ +

+ Once visible, you can drag the zoomed area around with the left mouse button (a left drag), and drag the zoomed canvas around + within the zoom by using the right mouse button (a right-drag). And a double click will expand the zoomed area to cover the + whole canvas. +

+ +
+ + 
+<script>
+    var myLine = new RGraph.Line('myc3', [15,30,62,26,46,86,48,51,51,35,32, 35]);
+    myLine.Set('chart.zoom.mode', 'area');
+    myLine.Set('chart.hmargin', 10);
+    myLine.Set('chart.linewidth', 1);
+    myLine.Set('chart.title', 'A chart with zoom in area mode');
+    myLine.Set('chart.tickmarks', 'endcircle');
+    myLine.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
+    myLine.Draw();
+<script>
+
+ + + \ No newline at end of file -- cgit v1.2.1