responsivewebframework
Version:
Jalasoft Foundation Front End Framework ========================================
138 lines (134 loc) • 5.11 kB
JavaScript
frameworkObject.percentageGraphCanvas = new function() {
var PercentageGraphCanvas = function (idGraph) {
var percentageGraphAnimator = function(fx) {
var ver2 = setInterval(fx, 2);
var delay = 7000;
setTimeout(function () {
clearInterval(ver2);
}, delay);
};
var idGraph = idGraph;
//defaul deameter
var diameter = 88;
//get width and height
var attrwidth = parseInt($('#' + idGraph).attr('width'));
var attrheight = parseInt($('#' + idGraph).attr('height'));
//the diameter have to be the longest
if (attrwidth > attrheight) {
diameter = attrheight;
} else {
diameter = attrwidth;
}
var radios = (diameter / 2) - 2;
var color = $('#' + idGraph).attr('color');
if (color.trim() == "") {
//color fill by default
color = "#F09700";
}
var backgroundColor = $('#' + idGraph).attr('backcolor');
if (backgroundColor.trim() == "") {
//color back
backgroundColor = "#CFD7DC";
}
//increase 2px to the radius
var posx = radios + 2;
var posy = radios + 2;
//width of cicle have to be 4px
var sizeAround = 4;
//set the font size
var fontSize = (radios * 2) * 0.40;
//start degressfill by cero
var degreesfill = 0;
//set 2d context
var can = document.getElementById(idGraph);
var context = can.getContext('2d');
this.backCircle = function () {
context.beginPath();
context.fillStyle = backgroundColor;
context.arc(posx, posy, radios + 2, 0, Math.PI * 2, false);
context.fill();
context.beginPath();
context.fillStyle = "white";
context.arc(posx, posy, radios - 2, 0, Math.PI * 2, false);
context.fill();
};
this.animateValue = function (percentage1) {
if (degreesfill > percentage1) {
degreesfill--;
}
if (degreesfill < percentage1) {
degreesfill++;
}
if (percentage1 == 0) {
degreesfill = 0;
}
this.paintValue(degreesfill);
};
this.paintValue = function (percentage) {
degreesfill = percentage;
var postx;
var posty = posy + (fontSize * 0.3);
var degreesPercent;
can.width = can.width;
this.backCircle();
if (percentage === 0) {
var postx = posx - (fontSize * 0.5);
context.fillStyle = color;
context.font = fontSize + "px DINNextLTPro-UltraLightCond";
context.fillText("0%", postx, posty);
} else {
var degrees = (360 * percentage) / 100;
var startAngle = Math.PI * (270 / 180)
var endAngle = Math.PI * (degrees / 180);
endAngle += startAngle;
var counterClockwise = false;
context.beginPath();
context.arc(posx, posy, radios, startAngle, endAngle, counterClockwise);
context.lineWidth = sizeAround;
context.strokeStyle = color;
context.stroke();
degreesPercent = (degrees * 100) / 360;
if (degreesPercent >= 0 && degreesPercent < 10) {
postx = posx - (fontSize * 0.5);
}
if (degreesPercent > 9 && degreesPercent < 100) {
postx = posx - (fontSize * 0.6);
}
if (degreesPercent > 99) {
postx = posx - (fontSize * 0.8);
}
context.fillStyle = color;
context.font = fontSize + "px DINNextLTPro-UltraLightCond";
context.fillText(Math.ceil(degreesPercent) + "%", postx, posty);
}
};
this.paintValue(0);
this.animationValue = function(fx) {
percentageGraphAnimator(fx);
}
};
var listPercentageGraph = [];
this.add = function( id ) {
listPercentageGraph[ id ] = new PercentageGraphCanvas(id);
};
this.value = function( id, value ) {
id = id.substring(1,id.length);
listPercentageGraph[id].paintValue(value);
};
this.animationValue = function( id, value ) {
id = id.substring(1,id.length);
listPercentageGraph[id].animationValue("frameworkObject.percentageGraphCanvas.animateValue( '#"+id+"'," + value + ")");
};
this.animateValue = function( id,value ) {
id = id.substring(1,id.length);
listPercentageGraph[id].animateValue(value);
};
}
jQuery.fn.extend({
frameworkPercentageGraphCanvas: function() {
$(this).each(function(index, element) {
var id = $(element).attr('id');
frameworkObject.percentageGraphCanvas.add(id);
})
}
});