make a chart dynamically with javascript and aspx

')
// .appendTo($this)
// .css({
// width: summarySize + "px",
// height: summarySize + "px",
// "margin-left": -(summarySize / 2) + "px",
// "margin-top": -(summarySize / 2) + "px"
// });
// var $summaryTitle = $('

' + settings.summaryTitle + '

').appendTo($summary);
// var $summaryNumber = $('

').appendTo($summary).css({opacity: 0});

for (var i = 0, len = data.length; i < len; i++) {
segmentTotal += data[i].value;

$pieGroup = $(document.createElementNS('http://www.w3.org/2000/svg', 'g'))
.attr({
'fill-opacity': 0,
id: 'path-' + i
})
.appendTo($pathGroup);
$pieGroups[i] = $pieGroup;

$paths[i] = $(document.createElementNS('http://www.w3.org/2000/svg', 'path'))
.attr({
"stroke-width": settings.segmentStrokeWidth,
"stroke": settings.segmentStrokeColor,
"fill": data[i].color,
"data-order": i,
"fill-opacity": 0
})
.delay(settings.animateFadeDelay * i)
.animate({'fill-opacity': '1'}, settings.animateFadeDelay)
.appendTo($pieGroup)
// .appendTo($pathGroup);
// .on("mouseenter", pathMouseEnter)
// .on("mouseleave", pathMouseLeave)
// .on("mousemove", pathMouseMove);
}

//Animation start
// animationLoop(drawPieSegments);
drawPieSegments(1);
settings.afterDrawed();
//Functions
function getHollowCirclePath(doughnutRadius, cutoutRadius) {
//Calculate values for the path.
//We needn't calculate startRadius, segmentAngle and endRadius, because base doughnut doesn't animate.
var startRadius = -1.570,// -Math.PI/2
segmentAngle = 6.2831,// 1 * ((99.9999/100) * (PI*2)),
endRadius = 4.7131,// startRadius + segmentAngle
startX = centerX + cos(startRadius) * doughnutRadius,
startY = centerY + sin(startRadius) * doughnutRadius,
endX2 = centerX + cos(startRadius) * cutoutRadius,
endY2 = centerY + sin(startRadius) * cutoutRadius,
endX = centerX + cos(endRadius) * doughnutRadius,
endY = centerY + sin(endRadius) * doughnutRadius,
startX2 = centerX + cos(endRadius) * cutoutRadius,
startY2 = centerY + sin(endRadius) * cutoutRadius;
var cmd = [
'M', startX, startY,
'A', doughnutRadius, doughnutRadius, 0, 1, 1, endX, endY,//Draw outer circle
'Z',//Close path
'M', startX2, startY2,//Move pointer
'A', cutoutRadius, cutoutRadius, 0, 1, 0, endX2, endY2,//Draw inner circle
'Z'
];
cmd = cmd.join(' ');
return cmd;
};
function pathMouseEnter(e) {
var order = $(this).data().order;
$tip.text(data[order].title + ": " + data[order].value)
.fadeIn(200);
settings.onPathEnter.apply($(this),[e,data]);
}
function pathMouseLeave(e) {
$tip.hide();
settings.onPathLeave.apply($(this),[e,data]);
}
function pathMouseMove(e) {
$tip.css({
top: e.pageY + settings.tipOffsetY,
left: e.pageX - $tip.width() / 2 + settings.tipOffsetX
});
}

function drawPieSegments (animationDecimal) {
var startRadius = -PI / 2,//-90 degree
rotateAnimation = 1;
if (settings.animation && settings.animateRotate) rotateAnimation = animationDecimal;//count up between0~1

// drawDoughnutText(animationDecimal, segmentTotal);

// $pathGroup.attr("opacity", animationDecimal);

//If data have only one value, we draw hollow circle(#1).
if (data.length === 1 && (4.7122 < (rotateAnimation * ((data[0].value / segmentTotal) * (PI * 2)) + startRadius))) {
$paths[0].attr("d", getHollowCirclePath(doughnutRadius, cutoutRadius));
return;
}

function animateTextContainer($textContainer, i) {
setTimeout(function() {
$textContainer.animate({opacity: 1}, {duration: settings.animateFadeDelay})
}, settings.animateFadeDelay * i);
}

for (var i = 0, len = data.length; i < len; i++) {
var segmentAngle = rotateAnimation * ((data[i].value / segmentTotal) * (PI * 2)),
labelAngle = segmentAngle / 2,
labelRadius = startRadius + labelAngle,
labelEndX = centerX + cos(labelRadius) * doughnutRadius,
labelEndY = centerY + sin(labelRadius) * doughnutRadius,
textX = centerX + cos(labelRadius) * (textContainerRdius),
textY = centerY + sin(labelRadius) * (textContainerRdius),


endRadius = startRadius + segmentAngle,
largeArc = ((endRadius - startRadius) % (PI * 2)) > PI ? 1 : 0,
startX = centerX + cos(startRadius) * doughnutRadius,
startY = centerY + sin(startRadius) * doughnutRadius,
endX2 = centerX + cos(startRadius) * cutoutRadius,
endY2 = centerY + sin(startRadius) * cutoutRadius,
endX = centerX + cos(endRadius) * doughnutRadius,
endY = centerY + sin(endRadius) * doughnutRadius,
startX2 = centerX + cos(endRadius) * cutoutRadius,
startY2 = centerY + sin(endRadius) * cutoutRadius;
var cmd = [
'M', startX, startY,//Move pointer
'A', doughnutRadius, doughnutRadius, 0, largeArc, 1, endX, endY,//Draw outer arc path
'L', startX2, startY2,//Draw line path(this line connects outer and innner arc paths)
'A', cutoutRadius, cutoutRadius, 0, largeArc, 0, endX2, endY2,//Draw inner arc path
'Z'//Cloth path
];
$paths[i].attr("d", cmd.join(' '));

// ???
// $svg.append(
// $(document.createElementNS('http://www.w3.org/2000/svg', 'line'))
// .attr({
// x1: centerY,
// y1: centerY,
// x2: labelEndX,
// y2: labelEndY,
// // stroke: '#000',
// 'marker-end': 'url(#arrow-'+ i +')',
// 'fill-opacity': 0
// })
// .delay(settings.animateFadeDelay * i)
// .animate({'fill-opacity': '1'}, settings.animateFadeDelay)
// );

// ???
var $textContainer = $('')
.css({
position: 'none',
top: textY,
left: textX,
opacity: 0
})
.appendTo($this);

// ??????
textY = textY - $textContainer.height() / 2;
textX = textX - $textContainer.width() / 2;
$textContainer.css({
top: textY,
left: textX
});
animateTextContainer($textContainer, i);
startRadius += segmentAngle;
}
}
function drawDoughnutText(animationDecimal, segmentTotal) {
$summaryNumber
.css({opacity: animationDecimal})
.text((segmentTotal * animationDecimal).toFixed(1));
}
function animateFrame(cnt, drawData) {
var easeAdjustedAnimationPercent =(settings.animation)? CapValue(easingFunction(cnt), null, 0) : 1;
drawData(easeAdjustedAnimationPercent);
}
function animationLoop(drawData) {
var animFrameAmount = (settings.animation)? 1 / CapValue(settings.animationSteps, Number.MAX_VALUE, 1) : 1,
cnt =(settings.animation)? 0 : 1;
requestAnimFrame(function() {
cnt += animFrameAmount;
animateFrame(cnt, drawData);
if (cnt <= 1) {
requestAnimFrame(arguments.callee);
} else {
settings.afterDrawed.call($this);
}
});
}
function Max(arr) {
return Math.max.apply(null, arr);
}
function Min(arr) {
return Math.min.apply(null, arr);
}
function isNumber(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
function CapValue(valueToCap, maxValue, minValue) {
if (isNumber(maxValue) && valueToCap > maxValue) return maxValue;
if (isNumber(minValue) && valueToCap < minValue) return minValue;
return valueToCap;
}
return this;
};

}( jQuery ));