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

RGraph: HTML5 Javascript charts library - Integrating RGraph with external libraries

+ + + + + + [No canvas support] + +

+ This page shows you how you can easily integrate the charts with other external Javascript libraries. This particular example + adds a context menu to the chart, of which the only option is to show a login dialog. This could, for example, be used to + allow logging in to an admin area. +

+ +

+ The dialog doesn't need to require user input - it could just be a static "Please wait..." type dialog, which is shown while a + subsequent page loads that takes a few seconds. +

+ +

+ The ModalDialog was originally an external library, however it's now part of the RGraph package. It's also covered by the + RGraph license - so if you have an RGraph license, then the ModalDialog is part of that. +

+ +

+ + 
+<script src="RGraph.common.core.js">
+<script src="RGraph.common.context.js">
+<script src="RGraph.line.js">
+<script src="RGraph.modaldialog.js">
+
+<script>
+    window.onload = function ()
+    {
+        /**
+        * Draw the line chart
+        */
+        var line = new RGraph.Line('myLine', [45,12,16,18,44,54,23,21,56,58,33,47]);
+        line.Set('chart.background.barcolor1', 'white');
+        line.Set('chart.background.barcolor2', 'white');
+        line.Set('chart.tickmarks', null);
+        line.Set('chart.hmargin', 10);
+        line.Set('chart.linewidth', 3);
+        line.Set('chart.shadow', true);
+        line.Set('chart.shadow.offset', 2);
+        line.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
+        line.Set('chart.title', 'A line chart with context menu');
+        
+        // This defines a context menu which calls the given function. This function in turn shows the dialog
+        line.Set('chart.contextmenu', [['Login to admin area...', function () {ModalDialog.Show('myDialog', 300);}}]]);
+        
+        line.Draw();
+    }
+</script>
+
+<!-- This is the popup dialog-->
+    <div id="myDialog" class="modalDialog" style="display: none">
+        <b>Please login</b>
+        <p>
+            <table border="0">
+                <tr>
+                    <td align="right" style="padding-top: 4px">Email</td>
+                    <td><input type="text" size="20" name="email" style="width: 150px" /></td>
+                </tr>
+                <tr>
+                    <td align="right" style="padding-top: 4px">Password</td>
+                    <td><input type="password" size="20" name="password" style="width: 150px" /></td>
+                </tr>
+                <tr>
+                    <td colspan="2" align="right">
+                        <input type="reset" value="Cancel" onclick="ModalDialog.Close()">
+                        <input type="submit"
+                                  name="submit"
+                                  value="Login »"
+                                  onclick="alert('This is just an example'); event.stopPropagation()">
+                    </td>
+                </tr>
+            </table>
+        </p>
+    </div>
+<!-- End of dialog -->
+ +

+ If you're interested in using this modal dialog, then you'll probably also want the CSS that styles it. This can be found in the + "css" directory. +

+ + +

Note about Microsoft Internet Explorer 8 and the ModalDialog

+ +

+ Microsoft Internet Explorer 8 only supports fixed positioning in strict rendering mode, therefore you must specify a DTD + when using this browser. Eg: +

+ + 
+<!DOCTYPE html >
+
+ + +

Hiding the ModalDialog

+

+ To hide the ModalDialog (from a "Cancel" button for example), you can use the Close() method: +

+ + 
+<input type="reset" value="Cancel" onclick="ModalDialog.Close()">
+
+ + +

Customising the ModalDialog

+

+ You can customise the appearance of the ModalDialog by using three CSS classes, which are documented here. + This page customises the dialog slightly by changing the shadow X/Y offsets: +

+ + 
+<style>
+    /*
+    * These are the CSS classes that you can use to customise the appearance of the ModalDialog. If you're trying to
+    * override something which the scripts set, then because of the ordering you may need to use the "! important"
+    * modifier.
+    */
+    
+    /**
+    * This is the semi-opaque background
+    */
+    .ModalDialog_background {
+    }
+
+
+    /**
+    * This is the dialog itself
+    */
+    .ModalDialog_dialog {
+        -webkit-box-shadow: gray 0 0 15px ! important;
+        -moz-box-shadow: 0 0 15px gray ! important;
+        box-shadow: 0 0 15px gray ! important;
+    }
+
+
+    /**
+    * This is gray bar at the top of the dialog
+    */
+    .ModalDialog_topbar {
+    }
+</style>
+
+ + +

ModalDialog integration

+

+ To integrate the ModalDialog look at the sample code above (the key line is where the context menu is defined). The method you should call is ModalDialog.Show(id, width). + The id is the id of the layer to use. Only the .innerHTML is used, not the layer itself, so it can be hidden by + setting the display CSS display property to none. The width is a number which is used as the width of the dialog. +

+ +

+ The only library needed for the ModalDialog to work is RGraph.modaldialog.js - you do not need to use + RGraph.common.js. This makes for far smaller download requirements. +

+ + +

Covering the scroll bars

+

+ Normally, a regular DIV lives inside the browser and cannot cover the scroll bars. There is however a way to achieve + this but it does mean that restructuring your website may be necessary, and it's done by using an IFRAME. The following + steps are involved: +

+ +
    +
  1. The index page of your website creates an IFRAME and sets it to cover the entire window.
    2. +
  2. This IFRAME then loads the website.
    3. +
  3. The DIV then covers the top-most window.
    4. +
+ +

+ There is an example of this technique here +

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