function PieChart(Entry) { var SVGContainer; var PieChart = document.createElementNS("http://www.w3.org/2000/svg", 'g'); this.percentToCartesian = function(centerX, centerY, radius, percent) { var angleInRadians = ((100.0 - percent) * ( 2 * Math.PI ) / 100.0) + ( (180*Math.PI)/-360); return { x: centerX + Math.round( (radius * Math.cos(angleInRadians)) * 100.0) / 100.0 , y: centerY + Math.round( (radius * Math.sin(angleInRadians)) * 100.0) / -100.0 }; } if (Entry.svg) { if(Entry.ContainerHTMLSVG) SVGContainer = Entry.ContainerHTMLSVG; else SVGContainer = document.getElementById(Entry.svg); var Prefixid = ""; if (Entry.id) { PieChart.id = Entry.id; Prefixid = Entry.id; } SVGContainer.appendChild(PieChart); this.SVGElement=PieChart; var values = Entry.values; if (!values) { values = {100:{"style.fill":"blue"}} } var StartAngle = 0; var x = isNaN(Entry.x) ? 0 : Entry.x; var y = isNaN(Entry.y) ? 0 : Entry.y; var MaxRadius = isNaN(Entry.MaxRadius) ? 100 : Entry.MaxRadius; var MinRadius = isNaN(Entry.MinRadius) ? 50 : Entry.MinRadius; var EnableAnimeZone = Entry.EnableAnimeZone ? Entry.EnableAnimeZone : false; var OffsetValuesRadius = isNaN(Entry.OffsetValuesRadius) ? 0 : Entry.OffsetValuesRadius; var OffsetAnimeValue = isNaN(Entry.OffsetAnimeValue) ? 0 : Entry.OffsetAnimeValue; var AnimeDurationTime = Entry.AnimeDurationTime ? Entry.AnimeDurationTime :"0.3s"; var HLLineWidth = isNaN(Entry.HLLineWidth) ? 0 : Entry.HLLineWidth; var fontSizePX = Entry.fontSizePX ? Entry.fontSizePX +"px": "100px"; var fontFamily = Entry.fontFamily ? Entry.fontFamily : "verdana"; var fontWeight = Entry.fontWeight ? Entry.fontWeight : "normal"; for (var index in values) { if (!isNaN(values[index].value)) { var ZRegion = parseFloat(values[index].value); if (ZRegion > 0 && ZRegion <=100) { var gZone =document.createElementNS("http://www.w3.org/2000/svg", 'g'); gZone.id =Prefixid+"gZone"+index; gZone["data-parent"]=gZone; PieChart.appendChild(gZone); var pathZone = document.createElementNS("http://www.w3.org/2000/svg", 'path'); pathZone.id =Prefixid+"pathZone"+index; gZone.appendChild(pathZone); pathZone["data-parent"]=gZone; var StartOuterPoint = (this.percentToCartesian(x,y, MaxRadius,StartAngle)); var StartInnerPoint = (this.percentToCartesian(x,y, MinRadius,StartAngle)); var MidOuterPoint = (this.percentToCartesian(x,y, MaxRadius, (ZRegion /2) + StartAngle)); var MidInnerPoint = (this.percentToCartesian(x,y, MinRadius, (ZRegion /2) + StartAngle)); var EndOuterPoint = (this.percentToCartesian(x,y, MaxRadius,ZRegion + StartAngle)); var EndInnerPoint = (this.percentToCartesian(x,y, MinRadius,ZRegion + StartAngle)); var d=[ "M", StartInnerPoint.x, StartInnerPoint.y, "L", StartOuterPoint.x, StartOuterPoint.y, "A", MaxRadius, MaxRadius, 0, 0, 1, MidOuterPoint.x, MidOuterPoint.y, "A", MaxRadius, MaxRadius, 0, 0, 1, EndOuterPoint.x, EndOuterPoint.y, "L", EndInnerPoint.x, EndInnerPoint.y, "A", MinRadius, MinRadius, 0, 0, 0, MidInnerPoint.x, MidInnerPoint.y, "A", MinRadius, MinRadius, 0, 0, 0, StartInnerPoint.x, StartInnerPoint.y, "Z" ]; pathZone.setAttribute("d", d.join(" ")); for(var Prop in values[index]) { var Props = Prop.split('.'); switch (Props.length) { case 1 : {pathZone[Props[0]] = values[index][Prop]; break;} case 2 : {pathZone[Props[0]][Props[1]] = values[index][Prop]; break;} } } var ValuesStartPoint = (this.percentToCartesian(x,y, (MaxRadius - MinRadius) / 2 + MinRadius, (ZRegion /2) + StartAngle)); var ValuesEndPoint = (this.percentToCartesian(x,y, (MaxRadius - MinRadius) / 2 + MinRadius+ OffsetValuesRadius , (ZRegion /2) + StartAngle)); var line1 = document.createElementNS("http://www.w3.org/2000/svg", 'line'); var scaleColor = values[index].scaleColor ? values[index].scaleColor :"white"; var scaleWidth = values[index].scaleWidth ? values[index].scaleWidth : "1px"; line1.setAttribute("x1", ValuesStartPoint.x); line1.setAttribute("y1", ValuesStartPoint.y); line1.setAttribute("x2", ValuesEndPoint.x); line1.setAttribute("y2", ValuesEndPoint.y); line1.setAttribute("stroke",scaleColor); line1.setAttribute("stroke-width",scaleWidth); gZone.appendChild(line1); line1["data-parent"]=gZone; var line2 = document.createElementNS("http://www.w3.org/2000/svg", 'line'); line2.setAttribute("x1", ValuesEndPoint.x); line2.setAttribute("y1", ValuesEndPoint.y); line2.setAttribute("x2", ValuesEndPoint.x > 0 ? ValuesEndPoint.x + HLLineWidth : ValuesEndPoint.x - HLLineWidth); line2.setAttribute("y2", ValuesEndPoint.y); line2.setAttribute("stroke",scaleColor); line2.setAttribute("stroke-width",scaleWidth); gZone.appendChild(line2); line2["data-parent"]=gZone; var TextValue = document.createElementNS("http://www.w3.org/2000/svg", 'text'); TextValue.id =Prefixid+"valueZone"+index; TextValue.setAttribute("x", ValuesEndPoint.x > 0 ? ValuesEndPoint.x + HLLineWidth + 5 : ValuesEndPoint.x - HLLineWidth - 5); TextValue.setAttribute("y", ValuesEndPoint.y); TextValue.setAttribute("stroke",scaleColor); TextValue.setAttribute("fill",scaleColor); TextValue.setAttribute("font-size", fontSizePX); TextValue.setAttribute("font-family", fontFamily); TextValue.setAttribute("font-weight", fontWeight); TextValue.setAttribute("text-anchor", ValuesEndPoint.x > 0 ?"start":"end"); TextValue.innerHTML = values[index].textValue ? values[index].textValue : ZRegion; gZone.appendChild(TextValue); TextValue["data-parent"]=gZone; if (EnableAnimeZone) { var ValuesAnimeEndPoint = (this.percentToCartesian(x,y, OffsetAnimeValue, (ZRegion /2) + StartAngle)); var AnimeEnter =document.createElementNS("http://www.w3.org/2000/svg", 'animateTransform'); AnimeEnter.setAttribute("attributeName","transform"); AnimeEnter.setAttribute("attributeType","XML"); AnimeEnter.setAttribute("type","translate"); AnimeEnter.setAttribute("from","0,0"); AnimeEnter.setAttribute("to",[ValuesAnimeEndPoint.x, ValuesAnimeEndPoint.y].join(",")); AnimeEnter.setAttribute("dur",AnimeDurationTime); AnimeEnter.setAttribute("repeatCount","1"); AnimeEnter.setAttribute("fill","freeze"); AnimeEnter.setAttribute("begin","indefinite"); gZone.appendChild(AnimeEnter); gZone["AnimeEnter"]=AnimeEnter; var AnimeLeave =document.createElementNS("http://www.w3.org/2000/svg", 'animateTransform'); AnimeLeave.setAttribute("attributeName","transform"); AnimeLeave.setAttribute("attributeType","XML"); AnimeLeave.setAttribute("type","translate"); AnimeLeave.setAttribute("from",[ValuesAnimeEndPoint.x, ValuesAnimeEndPoint.y].join(",")); AnimeLeave.setAttribute("to","0,0"); AnimeLeave.setAttribute("dur",AnimeDurationTime); AnimeLeave.setAttribute("repeatCount","1"); AnimeLeave.setAttribute("fill","freeze"); AnimeLeave.setAttribute("begin","indefinite"); gZone.appendChild(AnimeLeave); gZone["AnimeLeave"]=AnimeLeave; gZone["AnimeStatus"]=false; pathZone.addEventListener("mouseover",function(ev) { if (ev.target["data-parent"]["AnimeStatus"] == false) { ev.target["data-parent"]["AnimeEnter"].beginElement(); ev.target["data-parent"]["AnimeStatus"] = true; } }); gZone.addEventListener("mouseleave",function(ev) { if (ev.target["data-parent"]["AnimeStatus"] == true) { ev.target["data-parent"]["AnimeLeave"].beginElement(); ev.target["data-parent"]["AnimeStatus"] = false; } }); } StartAngle +=parseFloat(ZRegion); } } } if(Entry.GlobalAnimations) { for(var GA in Entry.GlobalAnimations) for( var GATag in Entry.GlobalAnimations[GA]) { var AnimeTag = document.createElementNS("http://www.w3.org/2000/svg", GATag); for(var Prop in Entry.GlobalAnimations[GA][GATag]) { AnimeTag.setAttribute(Prop, Entry.GlobalAnimations[GA][GATag][Prop]); } SVGContainer.appendChild(AnimeTag); AnimeTag.beginElement(); } } } }