gauge.jquery.js

/*
 *  

 *

 */

;(function ( $, window, document, undefined ) {
    var config = {
        radius : 80,
        paddingX : 40,
        paddingY : 40,
        gaugeWidth : 30,

        fill : '0-#1cb42f:0-#fdbe37:50-#fa4133:100',
        gaugeBackground : '#f4f4f4',
        background : '#fff',

        showNeedle : true,

        animationSpeed : 500,

        width : 0,
        height : 0,
        centerX : 0,
        centerY : 0,

        min : 0,
        max : 100,
        value : 80,

        valueLabel : {
            display : true,
            fontFamily : 'Arial',
            fontColor : '#000',
            fontSize : '20',
            fontWeight : 'normal'
        },
        title : {
            display : true,
            value : '',
            fontFamily : 'Arial',
            fontColor : '#000',
            fontSize : '20',
            fontWeight : 'normal'
        },
        label : {
            display : true,
            left : 'Low',
            right : 'High',
            fontFamily : 'Arial',
            fontColor : '#000',
            fontSize : '12',
            fontWeight : 'normal'
        }
    };

    // Create an arc with raphael.js
    Raphael.fn.arc = function(startX, startY, endX, endY, radius1, radius2, angle) {
        var arcSVG = [radius1, radius2, angle, 0, 1, endX, endY].join(' ');
        return this.path('M' + startX + ' ' + startY + ' a ' + arcSVG);
    };

    // Calculate a circular arc with raphael.js
    Raphael.fn.circularArc = function(centerX, centerY, radius, startAngle, endAngle) {
        var startX = centerX + radius * Math.cos(startAngle * Math.PI / 180);
        var startY = centerY + radius * Math.sin(startAngle * Math.PI / 180);
        var endX = centerX + radius * Math.cos(endAngle * Math.PI / 180);
        var endY = centerY + radius * Math.sin(endAngle * Math.PI / 180);
        return this.arc(startX, startY, endX-startX, endY-startY, radius, radius, 0);
    };

    // The kuma Gauge constructor
    function kumaGauge(element, options , method) {
        // This
        var _this = this;

        // The element
        _this.element = element;
        _this.$element = $(element);

        // The config
        _this.config = $.extend( {}, config, options );
        _this._config = config;

        _this.method = method;

        // The actual gauge
        _this.gauge = {};

        // Initialise
        _this.init();
    }

    // Extend the kumaGauge object
    kumaGauge.prototype = {
        init: function () {
            // this
            _this = this;

            if (!_this.method) {
                _this.draw();
            }
        },
        _setup : function() {
            // This
            _this = this;

            // Calculate some values needed do draw the gauge
            _this.config.width = (_this.config.radius * 2) + (_this.config.paddingX * 2);
            _this.config.height = _this.config.radius + (_this.config.paddingY * 2);
            _this.config.centerX = _this.config.paddingX + _this.config.radius;
            _this.config.centerY = _this.config.paddingY + _this.config.radius;

            // The div wich acts as the canvas needs an id, so we give it a unique one if it doesn't have one
            if (typeof $(this).attr('id') === 'undefined' || $(this).attr('id') === '') {
                _this.config.id = 'gauge-' + $('*[id^="gauge-"]').length;
                _this.$element.attr('id', _this.config.id);
            }
        },
        _calculateRotation : function(min, max, val) {
            var _range, _rotation;
            _range = max - min;

            if (val < max && val > min) {
                _rotation = 180 * ((val - min) / _range);
            } else if (val <= min){
                _rotation = 0;
            } else {
                _rotation = 180;
            }

            return _rotation;
        },
        draw : function() {
            //this
            var _this = this;

            // Setup all the needed config variables
            _this._setup();

            // Make the base drawing Canvas
            _this.gauge = new Raphael(_this.config.id, _this.config.width, _this.config.height);

            // Draw the gauge
            _this.gauge.gauge = _this.gauge.circularArc(_this.config.centerX, _this.config.centerY,
                           _this.config.radius, 180, 0);
            _this.gauge.gauge.attr({
                'fill' : _this.config.fill,
                'stroke' : 'none'
            });
            _this.gauge.gauge.node.setAttribute('class', 'gauge');

            // Draw the gauge background
            _this.gauge.gaugeBackground = _this.gauge.circularArc(_this.config.centerX, _this.config.centerY,
                                     _this.config.radius, 180, 0);
            _this.gauge.gaugeBackground.attr({
                'fill' : _this.config.gaugeBackground,
                'stroke' : 'none'
            });
            _this.gauge.gaugeBackground.node.setAttribute('class', 'gauge__background');

            // Draw the white center arc
            _this.gauge.centerArc = _this.gauge.circularArc(_this.config.centerX, _this.config.centerY,
                               _this.config.radius - _this.config.gaugeWidth, 180, 0);
            _this.gauge.centerArc.attr({
                'fill' : _this.config.background,
                'stroke' : 'none'
            });
            _this.gauge.centerArc.node.setAttribute('class', 'gauge__center');

            // Draw the needle
            if (_this.config.showNeedle) {
                _this.gauge.needle = _this.gauge.rect(_this.config.centerX, _this.config.paddingY, 1, 40);
                _this.gauge.needle.attr({
                    'fill' : '#000',
                    'stroke' : 'none'
                });
                _this.gauge.needle.node.setAttribute('class', 'gauge__needle');
            }

            // Draw the bottom mask to hide the rotated background arc
            _this.gauge.bottomMask = _this.gauge.rect(0, _this.config.centerY, _this.config.width, 40);
            _this.gauge.bottomMask.attr({
                'fill' : _this.config.background,
                'stroke' : 'none'
            });

            // Draw the text container for the value
            if (_this.config.valueLabel.display) {
                if (_this.config.showNeedle) {
                    _this.gauge.valueLabel = _this.gauge.text(_this.config.centerX, _this.config.centerY - 10,
                                        Math.round((_this.config.max - _this.config.min) / 2));
                } else {
                    _this.gauge.valueLabel = _this.gauge.text(_this.config.centerX, _this.config.centerY - 10,
                                        _this.config.value);
                }
                _this.gauge.valueLabel.attr({
                    'fill' : _this.config.valueLabel.fontColor,
                    'font-size' : _this.config.valueLabel.fontSize,
                    'font-family' : _this.config.valueLabel.fontColor,
                    'font-weight' : _this.config.valueLabel.fontWeight
                });
                _this.gauge.valueLabel.node.setAttribute('class', 'gauge__value');
            }

            // Draw the title
            if (_this.config.title.display) {
                _this.gauge.title = _this.gauge.text(_this.config.centerX, _this.config.paddingY - 5,
                                   _this.config.title.value);
                _this.gauge.title.attr({
                    'fill' : _this.config.title.fontColor,
                    'fill-opacity' : 0,
                    'font-size' : _this.config.title.fontSize,
                    'font-family' : _this.config.title.fontFamily,
                    'font-weight' : _this.config.title.fontWeight
                });
                _this.gauge.title.node.setAttribute('class', 'gauge__title');
            }

            if (_this.config.label.display) {
                // Draw the left label
                _this.gauge.leftLabel = _this.gauge.text((_this.config.gaugeWidth / 2) + _this.config.paddingX,
                                   _this.config.centerY + 10, _this.config.label.left);
                _this.gauge.leftLabel.attr({
                    'fill' : _this.config.title.fontColor,
                    'fill-opacity' : 0,
                    'font-size' : _this.config.label.fontSize,
                    'font-family' : _this.config.label.fontFamily,
                    'font-weight' : _this.config.label.fontWeight
                });
                _this.gauge.leftLabel.node.setAttribute('class', 'gauge__label--left');

                // Draw the right label
                _this.gauge.rightLabel = _this.gauge.text((_this.config.width - (_this.config.gaugeWidth / 2)) - _this.config.paddingX,
                                    _this.config.centerY + 10, _this.config.label.right);
                _this.gauge.rightLabel.attr({
                    'fill' : _this.config.title.fontColor,
                    'fill-opacity' : 0,
                    'font-size' : _this.config.label.fontSize,
                    'font-family' : _this.config.label.fontFamily,
                    'font-weight' : _this.config.label.fontWeight
                });
                _this.gauge.rightLabel.node.setAttribute('class', 'gauge__label--right');
            }

            // There is a bug with raphael.js and webkit which renders text element at double the Y value.
            // Resetting the Y values after a timeout fixes this.
            // See DmitryBaranovskiy/raphael#491
            setTimeout(function() {
                if (_this.config.valueLabel.display) {
                    _this.gauge.valueLabel.attr('y', _this.config.centerY - 10);
                }

                if (_this.config.title.display) {
                    _this.gauge.title.attr({
                        'y' : _this.config.paddingY - (_this.gauge.title.getBBox().height / 2),
                        'fill-opacity' : 1
                    });
                }

                if (_this.config.label.display) {
                    _this.gauge.leftLabel.attr({
                        'y' : _this.config.centerY + (_this.gauge.leftLabel.getBBox().height / 2),
                        'fill-opacity' : 1,
                    });
                    _this.gauge.rightLabel.attr({
                        'y' : _this.config.centerY + (_this.gauge.rightLabel.getBBox().height / 2),
                        'fill-opacity' : 1,
                    });
                }
            }, 1000);

            // Animate the gauge to the right value position
            _this.gauge.gaugeBackground.animate({transform:'r' +
                            _this._calculateRotation(_this.config.min, _this.config.max, _this.config.value) + ',' +
                            _this.config.centerX + ',' + _this.config.centerY}, _this.config.animationSpeed, '<>');

        },
        update: function (data) {
            //this
            var _this = this;

            var  updateGauge = function(min, max, value) {
                _this.config.min = min;
                _this.config.max = max;
                _this.config.value = value;

                // Update the rotation of the gauge
                _this.gauge.gaugeBackground.animate({transform:'r' +
                    _this._calculateRotation(min, max, value) + ',' +
                    _this.config.centerX + ',' + _this.config.centerY}, _this.config.animationSpeed, '<>');

                // Update the value label
                if (_this.config.valueLabel.display) {
                    if (_this.config.showNeedle) {
                        _this.gauge.valueLabel.attr('text', value);
                    } else {
                        _this.gauge.valueLabel.attr('text', (max - min) / 2);
                    }
                }
            };

            if (typeof data.min !== 'undefined' && typeof data.max !== 'undefined' && typeof data.value !== 'undefined') {
                updateGauge(data.min, data.max, data.value);
            } else if (typeof data.value !== 'undefined') {
                updateGauge(_this.config.min, _this.config.max, data.value);
            }
        }
    };

    $.fn.kumaGauge = function ( method, options ) {
        var _method = method,
            _arguments = arguments,
            _this = this;

        if (typeof _method !== 'string') {
            if (_arguments.length === 1 ) {
                options = _method;
                method = false;

                return this.each(function() {
                    if ( !$.data( this, 'kumaGauge' ) ) {
                        $.data( this, 'kumaGauge', new kumaGauge( this, options, method ) );
                    }
                });
            }
        } else {
            return this.each(function() {
                if (typeof $.data(this, 'kumaGauge')[method] === 'function') {
                    $.data(this, 'kumaGauge')[method](options);
                }
            });
        }


    };

})( jQuery, window, document );

LICENSE.md/guage.jquery.min

@@ -0,0 +1,2 @@
+/*
+ */(function(e,t,n,r){function s(t,n,r){var s=this;s.element=t;s.$element=e(t);s.config=e.extend({},i,n);s._config=i;s.method=r;s.gauge={};s.init()}var i={radius:80,paddingX:40,paddingY:40,gaugeWidth:30,fill:"0-#1cb42f:0-#fdbe37:50-#fa4133:100",gaugeBackground:"#f4f4f4",background:"#fff",showNeedle:true,animationSpeed:500,width:0,height:0,centerX:0,centerY:0,min:0,max:100,value:80,valueLabel:{display:true,fontFamily:"Arial",fontColor:"#000",fontSize:"20",fontWeight:"normal"},title:{display:true,value:"",fontFamily:"Arial",fontColor:"#000",fontSize:"20",fontWeight:"normal"},label:{display:true,left:"Low",right:"High",fontFamily:"Arial",fontColor:"#000",fontSize:"12",fontWeight:"normal"}};Raphael.fn.arc=function(e,t,n,r,i,s,o){var u=[i,s,o,0,1,n,r].join(" ");return this.path("M"+e+" "+t+" a "+u)};Raphael.fn.circularArc=function(e,t,n,r,i){var s=e+n*Math.cos(r*Math.PI/180);var o=t+n*Math.sin(r*Math.PI/180);var u=e+n*Math.cos(i*Math.PI/180);var a=t+n*Math.sin(i*Math.PI/180);return this.arc(s,o,u-s,a-o,n,n,0)};s.prototype={init:function(){_this=this;if(!_this.method){_this.draw()}},_setup:function(){_this=this;_this.config.width=_this.config.radius*2+_this.config.paddingX*2;_this.config.height=_this.config.radius+_this.config.paddingY*2;_this.config.centerX=_this.config.paddingX+_this.config.radius;_this.config.centerY=_this.config.paddingY+_this.config.radius;if(typeof e(this).attr("id")==="undefined"||e(this).attr("id")===""){_this.config.id="gauge-"+e('*[id^="gauge-"]').length;_this.$element.attr("id",_this.config.id)}},_calculateRotation:function(e,t,n){var r,i;r=t-e;if(n<t&&n>e){i=180*((n-e)/r)}else if(n<=e){i=0}else{i=180}return i},draw:function(){var e=this;e._setup();e.gauge=new Raphael(e.config.id,e.config.width,e.config.height);e.gauge.gauge=e.gauge.circularArc(e.config.centerX,e.config.centerY,e.config.radius,180,0);e.gauge.gauge.attr({fill:e.config.fill,stroke:"none"});e.gauge.gauge.node.setAttribute("class","gauge");e.gauge.gaugeBackground=e.gauge.circularArc(e.config.centerX,e.config.centerY,e.config.radius,180,0);e.gauge.gaugeBackground.attr({fill:e.config.gaugeBackground,stroke:"none"});e.gauge.gaugeBackground.node.setAttribute("class","gauge__background");e.gauge.centerArc=e.gauge.circularArc(e.config.centerX,e.config.centerY,e.config.radius-e.config.gaugeWidth,180,0);e.gauge.centerArc.attr({fill:e.config.background,stroke:"none"});e.gauge.centerArc.node.setAttribute("class","gauge__center");if(e.config.showNeedle){e.gauge.needle=e.gauge.rect(e.config.centerX,e.config.paddingY,1,40);e.gauge.needle.attr({fill:"#000",stroke:"none"});e.gauge.needle.node.setAttribute("class","gauge__needle")}e.gauge.bottomMask=e.gauge.rect(0,e.config.centerY,e.config.width,40);e.gauge.bottomMask.attr({fill:e.config.background,stroke:"none"});if(e.config.valueLabel.display){if(e.config.showNeedle){e.gauge.valueLabel=e.gauge.text(e.config.centerX,e.config.centerY-10,Math.round((e.config.max-e.config.min)/2))}else{e.gauge.valueLabel=e.gauge.text(e.config.centerX,e.config.centerY-10,e.config.value)}e.gauge.valueLabel.attr({fill:e.config.valueLabel.fontColor,"font-size":e.config.valueLabel.fontSize,"font-family":e.config.valueLabel.fontColor,"font-weight":e.config.valueLabel.fontWeight});e.gauge.valueLabel.node.setAttribute("class","gauge__value")}if(e.config.title.display){e.gauge.title=e.gauge.text(e.config.centerX,e.config.paddingY-5,e.config.title.value);e.gauge.title.attr({fill:e.config.title.fontColor,"fill-opacity":0,"font-size":e.config.title.fontSize,"font-family":e.config.title.fontFamily,"font-weight":e.config.title.fontWeight});e.gauge.title.node.setAttribute("class","gauge__title")}if(e.config.label.display){e.gauge.leftLabel=e.gauge.text(e.config.gaugeWidth/2+e.config.paddingX,e.config.centerY+10,e.config.label.left);e.gauge.leftLabel.attr({fill:e.config.title.fontColor,"fill-opacity":0,"font-size":e.config.label.fontSize,"font-family":e.config.label.fontFamily,"font-weight":e.config.label.fontWeight});e.gauge.leftLabel.node.setAttribute("class","gauge__label--left");e.gauge.rightLabel=e.gauge.text(e.config.width-e.config.gaugeWidth/2-e.config.paddingX,e.config.centerY+10,e.config.label.right);e.gauge.rightLabel.attr({fill:e.config.title.fontColor,"fill-opacity":0,"font-size":e.config.label.fontSize,"font-family":e.config.label.fontFamily,"font-weight":e.config.label.fontWeight});e.gauge.rightLabel.node.setAttribute("class","gauge__label--right")}setTimeout(function(){if(e.config.valueLabel.display){e.gauge.valueLabel.attr("y",e.config.centerY-10)}if(e.config.title.display){e.gauge.title.attr({y:e.config.paddingY-e.gauge.title.getBBox().height/2,"fill-opacity":1})}if(e.config.label.display){e.gauge.leftLabel.attr({y:e.config.centerY+e.gauge.leftLabel.getBBox().height/2,"fill-opacity":1});e.gauge.rightLabel.attr({y:e.config.centerY+e.gauge.rightLabel.getBBox().height/2,"fill-opacity":1})}},1e3);e.gauge.gaugeBackground.animate({transform:"r"+e._calculateRotation(e.config.min,e.config.max,e.config.value)+","+e.config.centerX+","+e.config.centerY},e.config.animationSpeed,"<>")},update:function(e){var t=this;var n=function(e,n,r){t.config.min=e;t.config.max=n;t.config.value=r;t.gauge.gaugeBackground.animate({transform:"r"+t._calculateRotation(e,n,r)+","+t.config.centerX+","+t.config.centerY},t.config.animationSpeed,"<>");if(t.config.valueLabel.display){if(t.config.showNeedle){t.gauge.valueLabel.attr("text",r)}else{t.gauge.valueLabel.attr("text",(n-e)/2)}}};if(typeof e.min!=="undefined"&&typeof e.max!=="undefined"&&typeof e.value!=="undefined"){n(e.min,e.max,e.value)}else if(typeof e.value!=="undefined"){n(t.config.min,t.config.max,e.value)}}};e.fn.kumaGauge=function(t,n){var r=t,i=arguments,o=this;if(typeof r!=="string"){if(i.length===1){n=r;t=false;return this.each(function(){if(!e.data(this,"kumaGauge")){e.data(this,"kumaGauge",new s(this,n,t))}})}}else{return this.each(function(){if(typeof e.data(this,"kumaGauge")[t]==="function"){e.data(this,"kumaGauge")[t](n)}})}}})(jQuery,window,document)