Charting with flask, rgraph and custom "timeseries database"

1 files changed, 464 insertions, 0 deletions

diff --git a/schall/static/RGraph/libraries/RGraph.gauge.js b/schall/static/RGraph/libraries/RGraph.gauge.js
new file mode 100644
index 0000000..80a445e
--- /dev/null
+++ b/schall/static/RGraph/libraries/RGraph.gauge.js
@@ -0,0 +1,464 @@
+    /**
+    * 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
+    */
+    
+    if (typeof(RGraph) == 'undefined') RGraph = {};
+
+    /**
+    * The line chart constructor
+    * 
+    * @param object canvas The cxanvas object
+    * @param array  data   The chart data
+    * @param array  ...    Other lines to plot
+    */
+    RGraph.Gauge = function (id, min, max, value)
+    {
+        // Get the canvas and context objects
+        this.id                = id;
+        this.canvas            = document.getElementById(id);
+        this.context           = this.canvas.getContext ? this.canvas.getContext("2d") : null;
+        this.canvas.__object__ = this;
+        this.type              = 'gauge';
+        this.min               = min;
+        this.max               = max;
+        this.value             = value;
+        this.isRGraph          = true;
+        this.currentValue      = null;
+
+        /**
+        * Range checking
+        */
+        if (this.value > this.max) {
+            this.value = max;
+        }
+
+        if (this.value < this.min) {
+            this.value = min;
+        }
+
+
+
+        /**
+        * Compatibility with older browsers
+        */
+        RGraph.OldBrowserCompat(this.context);
+
+
+        // Various config type stuff
+        this.properties = {
+            'chart.gutter.left':   5,
+            'chart.gutter.right':  5,
+            'chart.gutter.top':    5,
+            'chart.gutter.bottom': 5,
+            'chart.border.width':  10,
+            'chart.title':         '',
+            'chart.title.font':    'Verdana',
+            'chart.title.size':    14,
+            'chart.title.color':   '#333',
+            'chart.title.bold':    false,
+            'chart.text.font':     'Verdana',
+            'chart.text.color':     '#666',
+            'chart.text.size':      10,
+            'chart.scale.decimals': 0,
+            'chart.units.pre':      '',
+            'chart.units.post':     '',
+            'chart.red.start':      0.9 * this.max,
+            'chart.red.color':      '#DC3912',
+            'chart.yellow.color':   '#FF9900',
+            'chart.green.end':      0.7 * this.max,
+            'chart.green.color':    'rgba(0,0,0,0)',
+            'chart.needle.tail':    false
+        }
+    }
+
+
+
+    /**
+    * An all encompassing accessor
+    * 
+    * @param string name The name of the property
+    * @param mixed value The value of the property
+    */
+    RGraph.Gauge.prototype.Set = function (name, value)
+    {
+        this.properties[name] = value;
+    }
+
+
+    /**
+    * An all encompassing accessor
+    * 
+    * @param string name The name of the property
+    */
+    RGraph.Gauge.prototype.Get = function (name)
+    {
+        return this.properties[name];
+    }
+
+
+    /**
+    * The function you call to draw the line chart
+    * 
+    * @param bool An optional bool used internally to ditinguish whether the
+    *             line chart is being called by the bar chart
+    */
+    RGraph.Gauge.prototype.Draw = function ()
+    {
+        /**
+        * Fire the onbeforedraw event
+        */
+        RGraph.FireCustomEvent(this, 'onbeforedraw');
+
+
+        /**
+        * Clear all of this canvases event handlers (the ones installed by RGraph)
+        */
+        RGraph.ClearEventListeners(this.id);
+
+
+        /**
+        * Store the value (for animation primarily
+        */
+        this.currentValue = this.value;
+
+
+        /**
+        * This is new in May 2011 and facilitates indiviual gutter settings,
+        * eg chart.gutter.left
+        */
+        this.gutterLeft   = this.Get('chart.gutter.left');
+        this.gutterRight  = this.Get('chart.gutter.right');
+        this.gutterTop    = this.Get('chart.gutter.top');
+        this.gutterBottom = this.Get('chart.gutter.bottom');
+        
+        this.centerx = ((this.canvas.width - this.gutterLeft - this.gutterRight) / 2) + this.gutterLeft;
+        this.centery = ((this.canvas.height - this.gutterTop - this.gutterBottom) / 2) + this.gutterTop;
+        this.radius  = Math.min(
+                                ((this.canvas.width - this.gutterLeft - this.gutterRight) / 2),
+                                ((this.canvas.height - this.gutterTop - this.gutterBottom) / 2)
+                               );
+        this.startAngle = (1.57 / 3) + 1.57;
+        this.endAngle   = 6.28 + 1.57 - (1.57 / 3);
+        
+        // This has to be in the constructor
+        this.centerpinRadius = (15/125) * this.radius;
+
+
+        /**
+        * Setup the context menu if required
+        */
+        if (this.Get('chart.contextmenu')) {
+            RGraph.ShowContext(this);
+        }
+
+
+
+        // DRAW THE CHART HERE
+        this.DrawBackGround();
+        this.DrawColorBands();
+        this.DrawSmallTickmarks();
+        this.DrawBigTickmarks();
+        this.DrawLabels();
+        this.DrawTitle();
+        this.DrawNeedle();
+        this.DrawCenterpin();
+
+
+
+
+        /**
+        * 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') {
+            RGraph.ShowZoomWindow(this);
+        }
+
+        /**
+        * This function enables the zoom in area mode
+        */
+        if (this.Get('chart.zoom.mode') == 'area') {
+            RGraph.ZoomArea(this);
+        }
+        
+        /**
+        * This function enables resizing
+        */
+        if (this.Get('chart.resizable')) {
+            RGraph.AllowResizing(this);
+        }
+
+        
+        /**
+        * Fire the RGraph ondraw event
+        */
+        RGraph.FireCustomEvent(this, 'ondraw');
+    }
+
+
+    /**
+    * Draw the background
+    */
+    RGraph.Gauge.prototype.DrawBackGround = function ()
+    {
+        var borderWidth = this.Get('chart.border.width');
+
+        this.context.beginPath();
+            this.context.fillStyle = 'white';
+
+            this.context.arc(this.centerx, this.centery, this.radius, 0, 6.28, 0);
+        this.context.fill();
+        
+        /**
+        * Draw the gray circle
+        */
+        this.context.beginPath();
+            this.context.fillStyle = '#ccc';;
+            this.context.arc(this.centerx, this.centery, this.radius, 0, 6.28, 0);
+        this.context.fill();
+        
+        /**
+        * Draw the light gray inner border
+        */
+        this.context.beginPath();
+            this.context.fillStyle = '#f1f1f1';
+            this.context.arc(this.centerx, this.centery, this.radius - borderWidth, 0, 6.28, 0);
+        this.context.fill();
+        
+        // Draw the white circle inner border
+        this.context.beginPath();
+            this.context.fillStyle = 'white';
+            this.context.arc(this.centerx, this.centery, this.radius - borderWidth - 4, 0, 6.28, 0);
+        this.context.fill();
+
+        this.context.beginPath();
+            this.context.strokeStyle = 'black';
+            //this.context.moveTo(this.centerx, this.centery)
+            this.context.arc(this.centerx, this.centery, this.radius, 0, 6.28, 0);
+        this.context.stroke();
+    }
+
+
+    /**
+    * This function draws the smaller tickmarks
+    */
+    RGraph.Gauge.prototype.DrawSmallTickmarks = function ()
+    {
+        var numTicks = 25;
+
+        for (var i=0; i<=numTicks; ++i) {
+            this.context.beginPath();
+                this.context.strokeStyle = 'black';
+                var a = (((this.endAngle - this.startAngle) / numTicks) * i) + this.startAngle;
+                this.context.arc(this.centerx, this.centery, this.radius - this.Get('chart.border.width') - 10, a, a + 0.00001, 0);
+                this.context.arc(this.centerx, this.centery, this.radius - this.Get('chart.border.width') - 10 - 5, a, a + 0.00001, 0);
+            this.context.stroke();
+        }
+    }
+
+
+    /**
+    * This function draws the large, bold tickmarks
+    */
+    RGraph.Gauge.prototype.DrawBigTickmarks = function ()
+    {
+        var numTicks = 5;
+        this.context.lineWidth = 3;
+        this.context.lineCap   = 'round';
+
+        for (var i=0; i<=numTicks; ++i) {
+            this.context.beginPath();
+                this.context.strokeStyle = 'black';
+                var a = (((this.endAngle - this.startAngle) / numTicks) * i) + this.startAngle;
+                this.context.arc(this.centerx, this.centery, this.radius - this.Get('chart.border.width') - 10, a, a + 0.00001, 0);
+                this.context.arc(this.centerx, this.centery, this.radius - this.Get('chart.border.width') - 10 - 10, a, a + 0.00001, 0);
+            this.context.stroke();
+        }
+    }
+
+
+    /**
+    * This function draws the centerpin
+    */
+    RGraph.Gauge.prototype.DrawCenterpin = function ()
+    {
+        var offset = 6;
+
+        var grad = this.context.createRadialGradient(this.centerx + offset, this.centery - offset, 0, this.centerx + offset, this.centery - offset, 25);
+        grad.addColorStop(0, '#ddf');
+        grad.addColorStop(1, 'blue');
+
+        this.context.beginPath();
+            this.context.fillStyle = grad;
+            this.context.arc(this.centerx, this.centery, this.centerpinRadius, 0, 6.28, 0);
+        this.context.fill();
+    }
+
+
+    /**
+    * This function draws the labels
+    */
+    RGraph.Gauge.prototype.DrawLabels = function ()
+    {
+        this.context.fillStyle = this.Get('chart.text.color');
+
+        this.context.beginPath();
+            // First label
+            RGraph.Text(this.context, this.Get('chart.text.font'), this.Get('chart.text.size'), this.centerx - Math.sin(0.52) * (this.radius - 25 - this.Get('chart.border.width')),this.centery + Math.cos(0.52) * (this.radius - 25 - this.Get('chart.border.width')), this.Get('chart.units.pre') + String(this.min.toFixed(this.Get('chart.scale.decimals'))) + this.Get('chart.units.post'),'bottom', 'left');
+            
+            // Second label
+            RGraph.Text(this.context, this.Get('chart.text.font'), this.Get('chart.text.size'), this.centerx - this.radius + 25 + this.Get('chart.border.width'), this.centery,this.Get('chart.units.pre') + String((((this.max - this.min) * 0.2) + this.min).toFixed(this.Get('chart.scale.decimals')) + this.Get('chart.units.post')),'center', 'left');
+
+            // Third label
+            RGraph.Text(this.context, this.Get('chart.text.font'), this.Get('chart.text.size'), this.centerx - Math.sin(0.52) * (this.radius - 25 - this.Get('chart.border.width')),this.centery - Math.cos(0.52) * (this.radius - 25 - this.Get('chart.border.width')),this.Get('chart.units.pre') + String((((this.max - this.min) * 0.4) + this.min).toFixed(this.Get('chart.scale.decimals'))) + this.Get('chart.units.post'),'top', 'center');
+
+            // Fourth label
+            RGraph.Text(this.context, this.Get('chart.text.font'), this.Get('chart.text.size'), this.centerx + Math.sin(0.52) * (this.radius - 25 - this.Get('chart.border.width')),this.centery - Math.cos(0.52) * (this.radius - 25 - this.Get('chart.border.width')),this.Get('chart.units.pre') + String((((this.max - this.min) * 0.6) + this.min).toFixed(this.Get('chart.scale.decimals'))) + this.Get('chart.units.post'),'top', 'center');
+            
+            // Fifth label
+            RGraph.Text(this.context, this.Get('chart.text.font'), this.Get('chart.text.size'), this.centerx + this.radius - 25 - this.Get('chart.border.width'), this.centery, this.Get('chart.units.pre') + String((((this.max - this.min) * 0.8) + this.min).toFixed(this.Get('chart.scale.decimals'))) + this.Get('chart.units.post'),'center', 'right');
+
+            // Sixth (last) label
+            RGraph.Text(this.context,this.Get('chart.text.font'), this.Get('chart.text.size'), this.centerx + Math.sin(0.52) * (this.radius - 25 - this.Get('chart.border.width')),this.centery + Math.cos(0.52) * (this.radius - 25 - this.Get('chart.border.width')),this.Get('chart.units.pre') + String(this.max.toFixed(this.Get('chart.scale.decimals'))) + this.Get('chart.units.post'),'bottom', 'right');
+        this.context.fill();
+    }
+
+
+    /**
+    * This function draws the title
+    */
+    RGraph.Gauge.prototype.DrawTitle = function ()
+    {
+        var title = this.Get('chart.title');
+
+        if (title) {
+
+            this.context.fillStyle = this.Get('chart.title.color');
+
+            this.context.beginPath();
+                RGraph.Text(this.context,
+                            this.Get('chart.title.font'),
+                            this.Get('chart.title.size'),
+                            this.centerx,
+                            this.centery - 30,
+                            String(this.Get('chart.title')),
+                            'center',
+                            'center',
+                            null,
+                            null,
+                            null,
+                            this.Get('chart.title.bold'));
+            this.context.fill();
+        }
+    }
+
+
+    /**
+    * This function draws the Needle
+    */
+    RGraph.Gauge.prototype.DrawNeedle = function ()
+    {
+        this.context.lineWidth   = 0.5;
+        this.context.strokeStyle = '#983724';
+        this.context.fillStyle   = '#D5604D';
+
+        var angle = (this.endAngle - this.startAngle) * ((this.value - this.min) / (this.max - this.min));
+            angle += this.startAngle;
+
+
+        this.context.beginPath();
+            this.context.arc(this.centerx, this.centery, this.radius - 25 - this.Get('chart.border.width'), angle, angle + 0.00001, false);
+            this.context.arc(this.centerx, this.centery, this.centerpinRadius * 0.5, angle + 1.57, angle + 0.00001 + 1.57, false);
+            
+            if (this.Get('chart.needle.tail')) {
+                this.context.arc(this.centerx, this.centery, this.radius * 0.2  , angle + 3.14, angle + 0.00001 + 3.14, false);
+            }
+
+            this.context.arc(this.centerx, this.centery, this.centerpinRadius * 0.5, angle - 1.57, angle - 0.00001 - 1.57, false);
+        this.context.stroke();
+        this.context.fill();
+
+        
+        //this.context.strokeStyle   = '#D5604D';
+
+        //this.context.beginPath();
+        //    this.context.lineWidth = 5;
+        //    this.context.arc(this.centerx, this.centery, 25, angle + 3.14, angle + 0.00001 + 3.14, false);
+        //    this.context.lineTo(this.centerx, this.centery);
+        //this.context.stroke();
+        //this.context.fill();
+        
+        /**
+        * Store the angle in an object variable
+        */
+        this.angle = angle;
+    }
+
+
+    /**
+    * This draws the green background to the tickmarks
+    */
+    RGraph.Gauge.prototype.DrawColorBands = function ()
+    {
+        /**
+        * Draw the GREEN region
+        */
+        this.context.strokeStyle = this.Get('chart.green.color');
+        this.context.fillStyle = this.Get('chart.green.color');
+        
+        var greenStart = this.startAngle;
+        var greenEnd   = this.startAngle + (this.endAngle - this.startAngle) * ((this.Get('chart.green.end') - this.min) / (this.max - this.min))
+
+        this.context.beginPath();
+            this.context.arc(this.centerx, this.centery, this.radius - 10 - this.Get('chart.border.width'), greenStart, greenEnd, false);
+            this.context.arc(this.centerx, this.centery, this.radius - 20 - this.Get('chart.border.width'), greenEnd, greenStart, true);
+        this.context.fill();
+
+
+        /**
+        * Draw the YELLOW region
+        */
+        this.context.strokeStyle = this.Get('chart.yellow.color');
+        this.context.fillStyle = this.Get('chart.yellow.color');
+        
+        var yellowStart = greenEnd;
+        var yellowEnd   = this.startAngle + (this.endAngle - this.startAngle) * ((this.Get('chart.red.start') - this.min) / (this.max - this.min))
+
+        this.context.beginPath();
+            this.context.arc(this.centerx, this.centery, this.radius - 10 - this.Get('chart.border.width'), yellowStart, yellowEnd, false);
+            this.context.arc(this.centerx, this.centery, this.radius - 20 - this.Get('chart.border.width'), yellowEnd, yellowStart, true);
+        this.context.fill();
+
+
+        /**
+        * Draw the RED region
+        */
+        this.context.strokeStyle = this.Get('chart.red.color');
+        this.context.fillStyle = this.Get('chart.red.color');
+        
+        var redStart = yellowEnd;
+        var redEnd   = this.startAngle + (this.endAngle - this.startAngle) * ((this.max - this.min) / (this.max - this.min))
+
+        this.context.beginPath();
+            this.context.arc(this.centerx, this.centery, this.radius - 10 - this.Get('chart.border.width'), redStart, redEnd, false);
+            this.context.arc(this.centerx, this.centery, this.radius - 20 - this.Get('chart.border.width'), redEnd, redStart, true);
+        this.context.fill();
+    }
\ No newline at end of file