| Current Path : /home1/savoy/www/savoyeducation.com/assets/admin/js/ |
Linux gator3171.hostgator.com 4.19.286-203.ELK.el7.x86_64 #1 SMP Wed Jun 14 04:33:55 CDT 2023 x86_64 |
| Current File : /home1/savoy/www/savoyeducation.com/assets/admin/js/jquery.circlechart.js |
(function($){
$.fn.extend({
//pass the options variable to the function
percentcircle: function(options) {
//Set the default values, use comma to separate the settings, example:
var defaults = {
animate : true,
diameter : 115,
guage: 4,
coverBg: '#fff',
bgColor: '#efefef',
fillColor: '#4F52BA',
percentSize: '15px',
percentWeight: 'normal'
},
styles = {
cirContainer : {
'width':defaults.diameter,
'height':defaults.diameter
},
cir : {
'position': 'relative',
'text-align': 'center',
'width': defaults.diameter,
'height': defaults.diameter,
'border-radius': '100%',
'background-color': defaults.bgColor,
'background-image' : 'linear-gradient(91deg, transparent 50%, '+defaults.bgColor+' 50%), linear-gradient(90deg, '+defaults.bgColor+' 50%, transparent 50%)'
},
cirCover: {
'position': 'relative',
'top': defaults.guage,
'left': defaults.guage,
'text-align': 'center',
'width': defaults.diameter - (defaults.guage * 2),
'height': defaults.diameter - (defaults.guage * 2),
'border-radius': '100%',
'background-color': defaults.coverBg
},
percent: {
'display':'block',
'width': defaults.diameter,
'height': defaults.diameter,
'line-height': defaults.diameter + 'px',
'vertical-align': 'middle',
'font-size': defaults.percentSize,
'font-weight': defaults.percentWeight,
'color': defaults.fillColor
}
};
var that = this,
template = '<div><div class="ab"><div class="cir"><span class="perc">{{percentage}}</span></div></div></div>',
options = $.extend(defaults, options)
function init(){
that.each(function(){
var $this = $(this),
//we need to check for a percent otherwise set to 0;
perc = Math.round($this.data('percent')), //get the percentage from the element
deg = perc * 3.6,
stop = options.animate ? 0 : deg,
$chart = $(template.replace('{{percentage}}',perc+'%'));
//set all of the css properties forthe chart
$chart.css(styles.cirContainer).find('.ab').css(styles.cir).find('.cir').css(styles.cirCover).find('.perc').css(styles.percent);
$this.append($chart); //add the chart back to the target element
setTimeout(function(){
animateChart(deg,parseInt(stop),$chart.find('.ab')); //both values set to the same value to keep the function from looping and animating
},250)
});
}
var animateChart = function (stop,curr,$elm){
var deg = curr;
if(curr <= stop){
if (deg>=180){
$elm.css('background-image','linear-gradient(' + (90+deg) + 'deg, transparent 50%, '+options.fillColor+' 50%),linear-gradient(90deg, '+options.fillColor+' 50%, transparent 50%)');
}else{
$elm.css('background-image','linear-gradient(' + (deg-90) + 'deg, transparent 50%, '+options.bgColor+' 50%),linear-gradient(90deg, '+options.fillColor+' 50%, transparent 50%)');
}
curr ++;
setTimeout(function(){
animateChart(stop,curr,$elm);
},1);
}
};
init(); //kick off the goodness
}
});
})(jQuery);