maxVal ? maxVal : val; var perVal = Math.round(((val - minVal) * 100 / (maxVal - minVal)) * 100) / 100,//percentage value tp two decimal precision dispVal = indOption.percentage ? perVal + '%' : this.formatter(val); //formatted value //save val on object this.current_value = val; //draw the bg circle ctx.putImageData(this.imgData,0); //get current color if color range is set if (typeof curColor == "object") { var range = Object.keys(curColor); for (var i = 1,ln = range.length; i < ln; i++) { var bottomVal = range[i - 1],topVal = range[i],bottomColor = curColor[bottomVal],topColor = curColor[topVal],newColor = val == bottomVal ? bottomColor : val == topVal ? topColor : val > bottomVal && val < topVal ? indOption.interpolate ? getCurrentColor(val,topColor) : topColor : false; if (newColor != false) { curColor = newColor; break; } } } //draw th circle value ctx.strokeStyle = curColor; //add linecap if value setted on options if (indOption.roundCorner) ctx.lineCap = "round"; ctx.beginPath(); ctx.arc(center,-(quart),((circ) * perVal / 100) - quart,false); ctx.stroke(); //add percentage text if (indOption.displayNumber) { var cFont = ctx.font.split(' '),weight = indOption.fontWeight,fontSize = indOption.fontSize || (dim / (this.maxLength - (Math.floor(this.maxLength*1.4/4)-1))); cFont = indOption.fontFamily || cFont[cFont.length - 1]; ctx.fillStyle = indOption.fontColor || curColor; ctx.font = weight +" "+ fontSize + "px " + cFont; ctx.textAlign = "center"; ctx.textBaseline = 'middle'; ctx.fillText(dispVal,center); } return this; },//animate progressbar to the value animate: function (val) { var indOption = this.indOption,counter = this.current_value || indOption.minValue,self = this,incBy = Math.ceil((indOption.maxValue - indOption.minValue) / (indOption.frameNum || (indOption.percentage ? 100 : 500))),//increment by .2% on every tick and 1% if showing as percentage back = val < counter; //clear interval function if already started if (this.intvFunc) clearInterval(this.intvFunc); this.intvFunc = setInterval(function () { if ((!back && counter >= val) || (back && counter <= val)) { if (self.current_value == counter) { clearInterval(self.intvFunc); return; } else { counter = val; } } self.value(counter); //dispaly the value if (counter != val) { counter = counter + (back ? -incBy : incBy) }; //increment or decrement till counter does not reach to value },indOption.frameTime); return this; },//method to update options option: function (key,val) { if (val === undefined) return this.option[key]; if (['radius','barWidth','barBgColor','format','maxValue','percentage'].indexOf(key) != -1) { this.indOption[key] = val; this.init().value(this.current_value); } this.indOption[key] = val; } }; /** Initializer function **/ function radialIndicator(container,options) { var progObj = new Indicator(container,options); progObj.init(); return progObj; } //radial indicator defaults radialIndicator.defaults = { radius: 50,//inner radius of indicator barWidth: 5,//bar width barBgColor: '#eeeeee',//unfilled bar color barColor: '#99CC33',//filled bar color,can be a range also having different colors on different value like {0 : "#ccc",50 : '#333',100: '#000'} format: null,//format indicator numbers,can be a # formator ex (##,###.##) or a function frameTime: 10,//miliseconds to move from one frame to another frameNum: null,//Defines numbers of frame in indicator,defaults to 100 when showing percentage and 500 for other values fontColor: null,//font color fontFamily: null,//defines font family fontWeight: 'bold',//defines font weight fontSize : null,//define the font size of indicator number interpolate: true,//interpolate color between ranges percentage: false,//show percentage of value displayNumber: true,//display indicator number roundCorner: false,//have round corner in filled bar minValue: 0,//minimum value maxValue: 100,//maximum value initValue: 0 //define initial value of indicator }; window.radialIndicator = radialIndicator; //add as a jquery plugin if ($) { $.fn.radialIndicator = function (options) { return this.each(function () { var newPCObj = radialIndicator(this,options); $.data(this,'radialIndicator',newPCObj); }); }; } }(window.jQuery,document,void 0));