1 wso2vis.s.chart.raphael.PieChart = function(canvas, chartTitle, chartDesc) { 2 wso2vis.s.chart.Chart.call(this, canvas, chartTitle, chartDesc); 3 4 this.colscheme(20) 5 .width(300) 6 .height(300) 7 .showPercent(true) 8 .showValue(true) 9 .padding(5) 10 .fontFamily('Fontin-Sans, Arial') 11 .fontSize('10px') 12 .raphaelPaper(null); 13 } 14 15 // inherits from Chart 16 wso2vis.extend(wso2vis.s.chart.raphael.PieChart, wso2vis.s.chart.Chart); 17 18 wso2vis.s.chart.raphael.PieChart.prototype 19 .property("colscheme") 20 .property("dataField") 21 .property("dataValue") 22 .property("dataLabel") 23 .property("showPercent") 24 .property("showValue") 25 .property("padding") 26 .property("fontFamily") 27 .property("fontSize") 28 .property("raphaelPaper"); 29 30 31 wso2vis.s.chart.raphael.PieChart.prototype.load = function (w) { 32 if (w !== undefined) { 33 this.width(w); 34 } 35 36 if (this.raphaelPaper() == null) { 37 this.raphaelPaper(Raphael(this.divEl(), this.width(), this.width())); //Create a new Raphael paper. 38 } 39 return this; 40 }; 41 42 wso2vis.s.chart.raphael.PieChart.prototype.update = function () { 43 this.convertData(this); 44 var parent = this; 45 46 var colors = wso2vis.util.generateColors(this.formattedData.length, this.colscheme()); 47 48 var is_label_visible = false, 49 leave_timer; 50 51 var currY = 0; 52 var df = this.traverseToDataField(this.data, this.dataField()); 53 if (df instanceof Array) { 54 df = df; 55 } 56 else { 57 df = [df]; 58 } 59 60 var first; 61 62 var paper = this.raphaelPaper(), 63 rad = Math.PI / 180, 64 chart = paper.set(), 65 cx = this.width()/2, 66 cy = this.width()/2, 67 radius = (this.width()/2) - this.padding(), 68 data = this.formattedData; 69 70 paper.clear(); //wso2vis.environment.tooltip.show(10, 10, "tip"); 71 72 function sector(cx, cy, radius, startAngle, endAngle, params) { 73 var x1 = cx + radius * Math.cos(-startAngle * rad), 74 x2 = cx + radius * Math.cos(-endAngle * rad), 75 y1 = cy + radius * Math.sin(-startAngle * rad), 76 y2 = cy + radius * Math.sin(-endAngle * rad); 77 return paper.path(["M", cx, cy, "L", x1, y1, "A", radius, radius, 0, +(endAngle - startAngle > 180), 0, x2, y2, "z"]).attr(params); 78 } 79 80 var angle = 0, 81 total = 0, 82 start = 0, 83 process = function (j) { 84 var value = data[j]["value"], 85 perc = Math.round((value / total) * 100), 86 angleplus = 360 * (value / total), 87 popangle = angle + (angleplus / 2), 88 color = "hsb(" + start + ", 1, 0.8)", 89 ms = 500, 90 delta = 30, 91 bcolor = colors[j], 92 p = sector(cx, cy, radius, angle, angle + angleplus, {fill: bcolor, stroke: "none", "stroke-width": 1}), 93 opac = 1, 94 labelValue = (parent.showValue()) ? data[j]["value"] : "", 95 labelPercent = (parent.showPercent()) ? " ("+perc+"%)" : "", 96 txt = paper.text(cx + (radius - delta) * Math.cos(-popangle * rad), cy + (radius - delta) * Math.sin(-popangle * rad), labelValue + labelPercent ).attr({fill: "#fff", stroke: "none", opacity: opac, "font-family": parent.fontFamily(), "font-size": parent.fontSize()}); 97 angle += angleplus; 98 chart.push(p); 99 chart.push(txt); 100 start += .1; 101 102 if (parent.tooltip()) { 103 (function (data, lbl, func, org) { 104 $(p.node).hover(function (e) { 105 clearTimeout(leave_timer); 106 var tip = func({label:lbl, value:data, total:total, first:first, raw:org}); 107 wso2vis.environment.tooltip.show(e.pageX, e.pageY, tip); 108 is_label_visible = true; 109 }, function () { 110 leave_timer = setTimeout(function () { 111 wso2vis.environment.tooltip.hide(); 112 is_label_visible = false; 113 }, 2); 114 }); 115 })(parent.formattedData[i]["value"], parent.formattedData[i]["label"], parent.onTooltip, df[i]); 116 117 (function (data, lbl, func, org) { 118 $(p.node).mousemove(function (e) { 119 if (is_label_visible) { 120 clearTimeout(leave_timer); 121 var tip = func({label:lbl, value:data, total:total, first:first, raw:org}); 122 wso2vis.environment.tooltip.show(e.pageX, e.pageY, tip); 123 } 124 }); 125 })(parent.formattedData[i]["value"], parent.formattedData[i]["label"], parent.onTooltip, df[i]); 126 } 127 }; 128 129 for (var i = 0, ii = data.length; i < ii; i++) { 130 total += data[i]["value"]; 131 } 132 133 for (var i = 0; i < ii; i++) { 134 process(i); 135 } 136 }; 137 138 wso2vis.s.chart.raphael.PieChart.prototype.convertData = function (that) { 139 var df = that.traverseToDataField(that.data, that.dataField()); 140 var dcount = 1; 141 if (df instanceof Array) { 142 dcount = df.length; 143 } 144 145 that.formattedData = []; 146 147 for (var i = 0; i < dcount; i++) { 148 that.formattedData.push({"label":getLbl(i), "value":getVal(i)}); 149 } 150 151 function getVal(x) { 152 var r; 153 if (df instanceof Array) { 154 r = df[x]; 155 } 156 else { 157 r = df; 158 } 159 return parseInt(that.traverseToDataField(r, that.dataValue())); 160 } 161 162 function getLbl(x) { 163 var r; 164 if (df instanceof Array) { 165 r = df[x]; 166 } 167 else { 168 r = df; 169 } 170 return that.traverseToDataField(r, that.dataLabel()); 171 } 172 }; 173 174 wso2vis.s.chart.raphael.PieChart.prototype.onTooltip = function (data) { 175 return data.label + ":" + data.value; 176 }; 177 178