diff --git a/var/www/static/js/FlexGauge.js b/var/www/static/js/FlexGauge.js
new file mode 100644
index 00000000..e7db3bd9
--- /dev/null
+++ b/var/www/static/js/FlexGauge.js
@@ -0,0 +1,438 @@
+/**
+ *  FlexGauge
+ *  Version: 1.0
+ *  Author: Jeff Millies
+ *  Author URI:
+ */
+(function ($) {
+    var FlexGauge = function (o) {
+        if (typeof o === 'object') {
+            this._extendOptions(o, false);
+            this._build();
+        }
+    };
+    FlexGauge.prototype = {
+        /**
+         *  {String} Element that you would like to append to. ie '#idname', '.classname', 'div#idname', etc..
+         */
+        appendTo: 'body',
+        /**
+         *  {String} Id of Canvas already created or Id of canvas that will be created automatically
+         */
+        elementId: 'canvas',
+        /**
+         *  {String} Class of canvas created
+         */
+        elementClass: 'canvas',
+        /**
+         *  {Int} Canvas Width & Height
+         */
+        elementWidth: 200,
+        elementHeight: 200,
+        /**
+         *  {Boolean|String} Generate Dial Value for the Gauge, true will use arcFillPercent or arcFillInt
+         *  depending on provided values and specified dialUnits, string will use specified value
+         */
+        dialValue: false,
+        /**
+         *  {String} Class applied to div when dial is generated.
+         */
+        dialClass: 'fg-dial',
+        /**
+         *  {string: %|$| } Type of unit to use for the dial
+         */
+        dialUnit: '%',
+        /**
+         *  {string: before|after} Where the dial unit will be displayed
+         */
+        dialUnitPosition: 'after',
+        /**
+         *  {Boolean|String} Generate Label for the Gauge, true will use default "FlexGauge", string will use specified
+         */
+        dialLabel: false,
+        /**
+         *  {String} Class applied to div when label is generated.
+         */
+        dialLabelClass: 'fg-dial-label',
+        /**
+         *  {Int} Radius of the arc
+         */
+        inc: 0.0,
+        incTot: 1.0,
+        /**
+         *  {Doule} Increment value
+         */
+        arcSize: 85,
+        /**
+         *  {double} Starting and Ending location of the arc, End always needs to be larger
+         *  arc(x, y, radius, startAngle, endAngle, anticlockwise)
+         */
+        arcAngleStart: 0.85,
+        arcAngleEnd: 2.15,
+        /**
+         *  {double} Percentage the arc fills
+         */
+        arcFillPercent: .5,
+        /**
+         *  {Int} Starting and Ending values that are used to
+         *  find a difference for amount of units
+         *  ie: 60 (arcFillEnd) - 10 (arcFillStart) = 50
+         */
+        arcFillStart: null,
+        arcFillEnd: null,
+        /**
+         *  {Int} Data used to find out what percentage of the
+         *  arc to fill. arcFillInt can be populated by
+         *  the difference of arcFillStart and arcFillEnd
+         */
+        arcFillInt: null,
+        arcFillTotal: null,
+        /**
+         *  {Int} Color lightness: 0 - 255, 0 having no white added, 255 having all white and no color
+         */
+        arcBgColorLight: 80,
+        /**
+         *  {Int} Color saturation: 0 - 100, 0 having no color, 100 is full color
+         */
+        arcBgColorSat: 60,
+        /**
+         *  {Int} Size of the line marking the percentage
+         */
+        arcStrokeFg: 30,
+        /**
+         *  {Int} Size of the container holding the line
+         */
+        arcStrokeBg: 30,
+
+        /**
+         *  {string: hex} Color of the line marking the percentage
+         */
+        colorArcFg: '#5bc0de',
+        /**
+         *  {string: hex} Color of the container holding the line, default is using the Fg color and lightening it
+         */
+        colorArcBg: null,
+
+        /**
+         *  {String} Instead of providing a color or hex for the color, you can provide a class from the style
+         *  sheet and specify what you would like to grab for the color in styleSrc
+         */
+        styleArcFg: null,
+        styleArcBg: null,
+        styleSrc: 'color',
+
+        /**
+         *  {Boolean} If set to false, then the graph will not be animated
+         */
+        animateEasing: true,
+        /**
+         *  {Int} Speed for the animation, 1 is fastest, higher the number, slower the animation
+         */
+        animateSpeed: 5,
+        /**
+         *  {Int} Math used in animation speed
+         */
+        animateNumerator: 12,
+        animateDivisor: 15,
+
+        /**
+         *  {double} Placeholder for current percentage while animating
+         */
+        _animatePerc: 0.00,
+
+        /**
+         *  {Object} Placeholder for setInterval
+         */
+        _animateLoop: null,
+
+        /**
+         *  {Object} Placeholder for canvas
+         */
+        _canvas: null,
+
+        /**
+         *  {Object} Placeholder for canvas context
+         */
+        _ctx: null,
+
+        update: function (o) {
+            if (typeof o === 'object') {
+                var difference;
+
+                // if using int, convert to percent to check difference
+                if (typeof o.arcFillInt !== 'undefined' && o.arcFillInt == this.arcFillInt &&
+                    typeof o.arcFillTotal !== 'undefined' && o.arcFillTotal == this.arcFillTotal) {
+                    o.arcFillPercent = this.arcFillPercent;
+                } else if (typeof o.arcFillInt !== 'undefined' && typeof o.arcFillTotal !== 'undefined' &&
+                    (o.arcFillInt != this.arcFillInt || o.arcFillTotal == this.arcFillTotal)) {
+                    o.arcFillPercent = (o.arcFillInt / o.arcFillTotal);
+                } else if (typeof o.arcFillInt !== 'undefined' && typeof o.arcFillTotal === 'undefined' &&
+                    (o.arcFillInt != this.arcFillInt)) {
+                    o.arcFillPercent = (o.arcFillInt / this.arcFillTotal);
+                }
+
+                if (typeof o.arcFillPercent !== 'undefined') {
+                    difference = Math.abs((this.arcFillPercent - o.arcFillPercent));
+                } else {
+                    difference = this.arcFillPercent;
+                }
+
+                this._extendOptions(o, true);
+
+                clearInterval(this._animateLoop);
+
+                if (difference > 0) {
+                    var that = this;
+                    this._animateLoop = setInterval(function () {
+                        return that._animate();
+                    }, (this.animateSpeed * this.animateNumerator) / (difference * this.animateDivisor));
+                }
+            }
+        },
+
+        _extendOptions: function (o, update) {
+            var color = false;
+            if (update)
+                color = this.colorArcFg;
+
+            $.extend(this, o, true);
+
+            if (typeof o.arcFillStart !== 'undefined' && typeof o.arcFillEnd !== 'undefined' && typeof o.arcFillTotal !== 'undefined') {
+                this.arcFillInt = (o.arcFillEnd - o.arcFillStart);
+            }
+
+            if (typeof o.arcFillPercent === 'undefined' && this.arcFillInt !== null && this.arcFillInt >= 0 && this.arcFillTotal !== null && this.arcFillTotal > 0) {
+                this.arcFillPercent = this.arcFillInt / this.arcFillTotal;
+            }
+
+            if (typeof o.elementId === 'undefined') {
+                this.elementId = 'fg-' + this.appendTo + '-canvas';
+            }
+            // supporting color if pass, changing to hex
+            if (typeof o.colorArcFg !== 'undefined') {
+                this.colorArcFg = colorToHex(o.colorArcFg);
+            }
+
+            if (typeof o.colorArcBg !== 'undefined') {
+                this.colorArcBg = colorToHex(o.colorArcBg);
+            }
+
+            // only use the styleArcFg if colorArcFg wasn't specified in the options
+            if (typeof o.styleArcFg !== 'undefined' && typeof o.colorArcFg === 'undefined') {
+                this.colorArcFg = getStyleRuleValue(this.styleSrc, this.styleArcFg);
+            }
+
+            if (typeof o.colorArcBg === 'undefined' && this.colorArcBg === null && this.colorArcFg !== null) {
+                this.colorArcBg = this.colorArcFg;
+            }
+
+            if (typeof this.colorArcBg !== null && (!update || colorToHex(this.colorArcFg) != colorToHex(color))) {
+                if (colorToHex(this.colorArcFg) != colorToHex(color))
+                    this.colorArcBg = this.colorArcFg;
+
+                this.colorArcBg = shadeColor(this.colorArcBg, this.arcBgColorLight, this.arcBgColorSat);
+            }
+
+            if (typeof o.dialLabel === 'boolean' && o.dialLabel) {
+                this.dialLabel = 'FlexGauge';
+            }
+
+        },
+
+        _build: function () {
+            if (document.getElementById(this.elementId) === null) {
+                $(this.appendTo).append('<canvas id="' + this.elementId + '" width="' + this.elementWidth + '" height="' + this.elementHeight + '"></canvas>');
+            }
+
+            this._canvas = document.getElementById(this.elementId);
+            this._ctx = this._canvas.getContext("2d");
+
+            this.arcAngleStart = this.arcAngleStart * Math.PI;
+            this.arcAngleEnd = this.arcAngleEnd * Math.PI;
+            if (this.animateEasing === false) {
+                this._animatePerc = this.arcFillPercent;
+            }
+
+            var that = this;
+            this._animateLoop = setInterval(function () {
+                return that._animate();
+            }, (this.animateSpeed * this.animateNumerator) / (this.arcFillPercent * this.animateDivisor));
+        },
+
+        _animate: function () {
+            var animateInt = Math.round(this._animatePerc * 100);
+            var arcInt = Math.round(this.arcFillPercent * 100);
+
+            if (animateInt < arcInt)
+                animateInt++;
+            else
+                animateInt--;
+
+            this._animatePerc = (animateInt / 100);
+            if (animateInt === arcInt) {
+                this.arcFillPercent = this._animatePerc;
+                clearInterval(this._animateLoop);
+                this._draw();
+            }
+            this._draw();
+        },
+
+        _draw: function () {
+            //Clear the canvas everytime a chart is drawn
+            this._ctx.clearRect(0, 0, this.elementWidth, this.elementHeight);
+
+            //Background 360 degree arc
+            this._ctx.beginPath();
+            this._ctx.strokeStyle = this.colorArcBg;
+            this._ctx.lineWidth = this.arcStrokeBg;
+            this._ctx.arc(
+                this.elementWidth / 2,
+                this.elementHeight / 2 + 50,
+                this.arcSize,
+                0,
+                Math.PI,
+                true
+            );
+
+            this._ctx.stroke();
+
+            //var newEnd = ((this.arcAngleEnd - this.arcAngleStart) * this._animatePerc) + this.arcAngleStart;
+            var newStart;
+            var newEnd;
+
+            var incArc = this.inc*Math.PI/2;
+            if (this.inc >= 0.0){
+                newStart = -Math.PI/2;
+                newEnd = newStart + incArc;
+            } else {
+                newStart = -Math.PI/2 + incArc;
+                newEnd = -Math.PI/2;
+            }
+
+            var colorShadesTabRed = ['#ff0000','#ff4000','#ff8000','#ff9900','#ffbf00','#ffff00'];
+            var colorShadesTabGreen = ['#ffff00','#E0FF00','#D0FF00','#a0ff00','#00ff00','#00ff40',];
+            var colorValue = parseInt(Math.abs((this.inc / this.incTot) * 5));
+            var theColor;
+            if (this.inc >= 0.0)
+                theColor = colorShadesTabGreen[colorValue];
+            else
+                theColor = colorShadesTabRed[5-colorValue];
+            this.colorArcFg = theColor;
+
+            this._ctx.beginPath();
+            this._ctx.strokeStyle = this.colorArcFg;
+            this._ctx.lineWidth = this.arcStrokeFg;
+            this._ctx.arc(
+                this.elementWidth / 2,
+                this.elementHeight / 2 + 50,
+                this.arcSize,
+                newStart,
+                newEnd,
+                false
+            );
+            this._ctx.stroke();
+            this._renderLabel();
+        },
+
+        _renderLabel: function () {
+            if (this.dialValue) {
+                var dialVal;
+                var dial = $(this.appendTo).find('div.' + this.dialClass);
+                if (dial.length === 0) {
+                    $(this.appendTo).append('<div class="' + this.dialClass + '"></div>');
+                }
+                dial = $(this.appendTo).find('div.' + this.dialClass);
+                if (typeof this.dialValue === 'boolean') {
+                    switch (this.dialUnit) {
+                        case '%':
+                            dialVal = Math.round(this._animatePerc * 100);
+                            break;
+                        default:
+                            dialVal = Math.round(this.arcFillInt * (this._animatePerc / this.arcFillPercent));
+                            break;
+                    }
+                    dialVal = (isNaN(dialVal) ? 0 : dialVal);
+                    switch (this.dialUnitPosition) {
+                        case 'before':
+                            dialVal = this.dialUnit + dialVal;
+                            break;
+                        case 'after':
+                            dialVal = dialVal + this.dialUnit;
+                            break;
+                    }
+                } else {
+                    dialVal = this.dialValue;
+                }
+                dial.html(dialVal)
+            }
+            if (this.dialLabel) {
+                var label = $(this.appendTo).find('div.' + this.dialLabelClass);
+                if (label.length === 0) {
+                    $(this.appendTo).append('<div class="' + this.dialLabelClass + '"></div>');
+                }
+                label = $(this.appendTo).find('div.' + this.dialLabelClass);
+                label.html(this.dialLabel);
+            }
+        }
+    };
+
+    function shadeColor(col, amt, sat) {
+        if (col[0] == "#") {
+            col = col.slice(1);
+        }
+
+        var num = parseInt(col, 16);
+
+        var r = (num >> 16) + amt;
+
+        if (r > 255) r = 255;
+        else if (r < 0) r = 0;
+
+        var b = ((num >> 8) & 0x00FF) + amt;
+
+        if (b > 255) b = 255;
+        else if (b < 0) b = 0;
+
+        var g = (num & 0x0000FF) + amt;
+
+        if (g > 255) g = 255;
+        else if (g < 0) g = 0;
+
+        var gray = r * 0.3086 + g * 0.6094 + b * 0.0820;
+        sat = (sat / 100);
+
+        r = Math.round(r * sat + gray * (1 - sat));
+        g = Math.round(g * sat + gray * (1 - sat));
+        b = Math.round(b * sat + gray * (1 - sat));
+        return "#" + (g | (b << 8) | (r << 16)).toString(16);
+    }
+
+    function getStyleRuleValue(style, selector) {
+        $('body').append('<div id="getStyleRuleValue-' + selector + '"></div>');
+        var element = $('#getStyleRuleValue-' + selector);
+        element.addClass(selector);
+        var color = element.css(style);
+        var hex = colorToHex(color);
+        element.remove();
+        return hex;
+    }
+
+    function colorToHex(color) {
+        if (color[0] != 'r')
+            return color;
+
+        var rgb = color.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
+        return "#" +
+            ("0" + parseInt(rgb[1], 10).toString(16)).slice(-2) +
+            ("0" + parseInt(rgb[2], 10).toString(16)).slice(-2) +
+            ("0" + parseInt(rgb[3], 10).toString(16)).slice(-2);
+    }
+
+    if (typeof define === 'function') {
+        define('flex-gauge', ['jquery'], function ($) {
+            return FlexGauge;
+        });
+    } else {
+        window.FlexGauge = FlexGauge;
+    }
+})(jQuery);