Charting with flask, rgraph and custom "timeseries database"

1 files changed, 333 insertions, 0 deletions

diff --git a/schall/static/RGraph/libraries/RGraph.skeleton.js b/schall/static/RGraph/libraries/RGraph.skeleton.js
new file mode 100644
index 0000000..fd93edc
--- /dev/null
+++ b/schall/static/RGraph/libraries/RGraph.skeleton.js
@@ -0,0 +1,333 @@
+    /**
+    * o------------------------------------------------------------------------------o
+    * | This file is part of the RGraph package - you can learn more at:             |
+    * |                                                                              |
+    * |                          http://www.rgraph.net                               |
+    * |                                                                              |
+    * | This package is licensed under the RGraph license. For all kinds of business |
+    * | purposes there is a small one-time licensing fee to pay and for non          |
+    * | commercial  purposes it is free to use. You can read the full license here:  |
+    * |                                                                              |
+    * |                      http://www.rgraph.net/LICENSE.txt                       |
+    * o------------------------------------------------------------------------------o
+    */
+
+
+
+
+    /**
+    * This is the RGraph.skeleton.js file which you can use as a base for creating new graph types.
+    */
+
+
+
+    
+    /**
+    * Having this here means that the RGraph libraries can be included in any order, instead of you having
+    * to include the common core library first.
+    */
+    if (typeof(RGraph) == 'undefined') RGraph = {};
+
+
+
+
+    /**
+    * The chart constructor. This function sets up the object. It takes the ID (the HTML attribute) of the canvas as the
+    * first argument and the data as the second. If you need to change this, you can.
+    * 
+    * @param string id    The canvas tag ID
+    * @param array  data  The chart data
+    */
+    RGraph.Skeleton = function (id, data)
+    {
+        /**
+        * Set these as object properties so they don't have to be constantly retrieved. Note that using a dollar
+        * function - $() - can cause conflicts with popular javascript libraries, eg jQuery. It's therefore best
+        * to stick to document.getElementById(). Setting the canvas and context as object properties means you
+        * can reference them like this: myObj.canvas
+        *                               myObj.context
+        */
+        this.id      = id;
+        this.canvas  = document.getElementById(id);
+        this.context = this.canvas.getContext ? this.canvas.getContext("2d") : null;
+
+        /**
+        * This puts a reference to this object on to the canvas. Useful in event handling.
+        */
+        this.canvas.__object__ = this;
+
+        /**
+        * This defines the type of this graph type and should be a one word description.
+        */
+        this.type = 'skeleton';
+
+        /**
+        * This facilitates easy object identification, and should be true
+        */
+        this.isRGraph = true;
+
+        /**
+        * This does a few things, for example adding the .fillText() method to the canvas 2D context when
+        * it doesn't exist. This facilitates the graphs to be still shown in older browser (though without
+        * text obviously). You'll find the function in RGraph.common.core.js
+        */
+        RGraph.OldBrowserCompat(this.context);
+
+
+        /**
+        * Some example background properties, as used by the method RGraph.background.Draw()
+        */
+        this.properties = {
+            'chart.gutter.left':            25,
+            'chart.gutter.right':           25,
+            'chart.gutter.top':             25,
+            'chart.gutter.bottom':          25,
+            'chart.colors':                 ['red','blue'],
+            'chart.background.barcolor1':   'rgba(0,0,0,0)',
+            'chart.background.barcolor2':   'rgba(0,0,0,0)',
+            'chart.background.grid':        true,
+            'chart.background.grid.color':  '#ddd',
+            'chart.background.grid.width':  1,
+            'chart.background.grid.hsize':  20,
+            'chart.background.grid.vsize':  20,
+            'chart.background.grid.vlines': true,
+            'chart.background.grid.hlines': true,
+            'chart.background.grid.border': true,
+            'chart.background.grid.autofit':false,
+            'chart.background.grid.autofit.align':false,
+            'chart.background.grid.autofit.numhlines': 7,
+            'chart.background.grid.autofit.numvlines': 20,
+            'chart.zoom.factor':            1.5,
+            'chart.zoom.fade.in':           true,
+            'chart.zoom.fade.out':          true,
+            'chart.zoom.hdir':              'right',
+            'chart.zoom.vdir':              'down',
+            'chart.zoom.frames':            25,
+            'chart.zoom.delay':             16.666,
+            'chart.zoom.shadow':            true,
+            'chart.zoom.mode':              'canvas',
+            'chart.zoom.thumbnail.width':   75,
+            'chart.zoom.thumbnail.height':  75,
+            'chart.zoom.background':        true,
+            'chart.contextmenu':            null,
+            'chart.labels':                 null,
+            'chart.labels.ingraph':         null,
+            'chart.labels.above':           false,
+            'chart.labels.above.decimals':  0,
+            'chart.labels.above.size':      null,
+            'chart.scale.decimals':         0,
+            'chart.scale.point':            '.',
+            'chart.scale.thousand':         ',',
+            'chart.crosshairs':             false,
+            'chart.crosshairs.color':       '#333',
+            'chart.crosshairs.hline':       true,
+            'chart.crosshairs.vline':       true,
+            'chart.annotatable':            false,
+            'chart.annotate.color':         'black',
+            'chart.units.pre':              '',
+            'chart.units.post':             '',
+            'chart.key':                    null,
+            'chart.key.background':         'white',
+            'chart.key.position':           'graph',
+            'chart.key.shadow':             false,
+            'chart.key.shadow.color':       '#666',
+            'chart.key.shadow.blur':        3,
+            'chart.key.shadow.offsetx':     2,
+            'chart.key.shadow.offsety':     2,
+            'chart.key.position.gutter.boxed': true,
+            'chart.key.position.x':         null,
+            'chart.key.position.y':         null,
+            'chart.key.color.shape':        'square',
+            'chart.key.rounded':            true,
+            'chart.key.linewidth':          1,
+            'chart.title':                  '',
+            'chart.title.background':       null,
+            'chart.title.hpos':             null,
+            'chart.title.vpos':             null,
+            'chart.title.bold':             true,
+            'chart.title.font':             null,
+            'chart.title.xaxis':            '',
+            'chart.title.xaxis.bold':       true,
+            'chart.title.xaxis.size':       null,
+            'chart.title.xaxis.font':       null,
+            'chart.title.yaxis':            '',
+            'chart.title.yaxis.bold':       true,
+            'chart.title.yaxis.size':       null,
+            'chart.title.yaxis.font':       null,
+            'chart.title.xaxis.pos':        null,
+            'chart.title.yaxis.pos':        null,
+            'chart.title.yaxis.position':   'left',
+            'chart.text.color':             'black',
+            'chart.text.size':              10,
+            'chart.text.angle':             0,
+            'chart.text.font':              'Verdana',
+            'chart.resizable':              false,
+            'chart.resize.handle.background': null,
+            'chart.adjustable':             false,
+            'chart.hmargin':                5,
+            'chart.shadow':                 false,
+            'chart.shadow.color':           '#666',
+            'chart.shadow.offsetx':         3,
+            'chart.shadow.offsety':         3,
+            'chart.shadow.blur':            3,
+            'chart.tooltips':               null,
+            'chart.tooltips.effect':        'fade',
+            'chart.tooltips.css.class':     'RGraph_tooltip',
+            'chart.tooltips.event':         'onclick',
+            'chart.tooltips.highlight':     true
+        }
+
+        /**
+        * A simple check that the browser has canvas support
+        */
+        if (!this.canvas) {
+            alert('[SKELETON] No canvas support');
+            return;
+        }
+
+        /**
+        * Store the data that was passed to this constructor
+        */
+        this.data = data;
+        
+        /**
+        * This can be used to store the coordinates of shapes on the graph
+        */
+        this.coords = [];
+        
+        
+        /**
+        * If you add a .get*(e) method to ease getting the shape that's currently being hovered over
+        * or has been clicked on (in the same vein as the Bar charts .getBar() method or the Line charts
+        * .getPoint() method) then you should set this so that common methods have a common function
+        * name to call - for example the context menu uses the common name .getShape(e) to add the
+        * details to the context menu.
+        */
+        this.getShape = this.getXXX;
+    }
+
+
+
+
+    /**
+    * A setter method for setting graph properties. It can be used like this: obj.Set('chart.background.grid', false);
+    * 
+    * @param name  string The name of the property to set
+    * @param value mixed  The value of the property
+    */
+    RGraph.Skeleton.prototype.Set = function (name, value)
+    {
+        this.properties[name.toLowerCase()] = value;
+    }
+
+
+
+
+    /**
+    * A getter method for retrieving graph properties. It can be used like this: obj.Get('chart.background.grid');
+    * This can be used inside your methods that draw the graph.
+    * 
+    * @param name  string The name of the property to get
+    */
+    RGraph.Skeleton.prototype.Get = function (name)
+    {
+        return this.properties[name.toLowerCase()];
+    }
+
+
+
+
+    /**
+    * The function you call to draw the chart after you have set all of the graph properties
+    */
+    RGraph.Skeleton.prototype.Draw = function ()
+    {
+        /**
+        * This draws the background image, which when loaded draws the graph, hence the return
+        */
+        if (typeof(this.Get('chart.background.image')) == 'string' && !this.__background_image__) {
+            RGraph.DrawBackgroundImage(this);
+            return;
+        }
+
+        /**
+        * Fire the custom RGraph onbeforedraw event (which should be fired before the chart is drawn)
+        */
+        RGraph.FireCustomEvent(this, 'onbeforedraw');
+
+        /**
+        * Clear all of this canvases event handlers (the ones installed by RGraph)
+        */
+        RGraph.ClearEventListeners(this.id);
+
+
+
+
+        /*************************
+        * Draw the chart here... *
+        *************************/
+
+
+
+
+        /**
+        * These call common functions, that facilitate some of RGraphs features
+        */
+
+
+        /**
+        * Setup the context menu if required
+        */
+        if (this.Get('chart.contextmenu')) {
+            RGraph.ShowContext(this);
+        }
+
+        /**
+        * Draw "in graph" labels
+        */
+        if (this.Get('chart.labels.ingraph')) {
+            RGraph.DrawInGraphLabels(this);
+        }
+        
+        /**
+        * Draw crosschairs
+        */
+        if (this.Get('chart.crosshairs')) {
+            RGraph.DrawCrosshairs(this);
+        }
+        
+        /**
+        * If the canvas is annotatable, do install the event handlers
+        */
+        if (this.Get('chart.annotatable')) {
+            RGraph.Annotate(this);
+        }
+        
+        /**
+        * This bit shows the mini zoom window if requested
+        */
+        if (this.Get('chart.zoom.mode') == 'thumbnail' || this.Get('chart.zoom.mode') == 'area') {
+            RGraph.ShowZoomWindow(this);
+        }
+
+        
+        /**
+        * This function enables resizing
+        */
+        if (this.Get('chart.resizable')) {
+            RGraph.AllowResizing(this);
+        }
+
+
+        /**
+        * This function enables adjusting
+        */
+        if (this.Get('chart.adjustable')) {
+            RGraph.AllowAdjusting(this);
+        }
+
+        /**
+        * Fire the custom RGraph ondraw event (which should be fired when you have drawn the chart)
+        */
+        RGraph.FireCustomEvent(this, 'ondraw');
+    }