PHP/JavaScript webapp to analyse spending habits
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

jquery.flot.pie.js 22KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750
  1. /*
  2. Flot plugin for rendering pie charts. The plugin assumes the data is
  3. coming is as a single data value for each series, and each of those
  4. values is a positive value or zero (negative numbers don't make
  5. any sense and will cause strange effects). The data values do
  6. NOT need to be passed in as percentage values because it
  7. internally calculates the total and percentages.
  8. * Created by Brian Medendorp, June 2009
  9. * Updated November 2009 with contributions from: btburnett3, Anthony Aragues and Xavi Ivars
  10. * Changes:
  11. 2009-10-22: lineJoin set to round
  12. 2009-10-23: IE full circle fix, donut
  13. 2009-11-11: Added basic hover from btburnett3 - does not work in IE, and center is off in Chrome and Opera
  14. 2009-11-17: Added IE hover capability submitted by Anthony Aragues
  15. 2009-11-18: Added bug fix submitted by Xavi Ivars (issues with arrays when other JS libraries are included as well)
  16. Available options are:
  17. series: {
  18. pie: {
  19. show: true/false
  20. radius: 0-1 for percentage of fullsize, or a specified pixel length, or 'auto'
  21. innerRadius: 0-1 for percentage of fullsize or a specified pixel length, for creating a donut effect
  22. startAngle: 0-2 factor of PI used for starting angle (in radians) i.e 3/2 starts at the top, 0 and 2 have the same result
  23. tilt: 0-1 for percentage to tilt the pie, where 1 is no tilt, and 0 is completely flat (nothing will show)
  24. offset: {
  25. top: integer value to move the pie up or down
  26. left: integer value to move the pie left or right, or 'auto'
  27. },
  28. stroke: {
  29. color: any hexidecimal color value (other formats may or may not work, so best to stick with something like '#FFF')
  30. width: integer pixel width of the stroke
  31. },
  32. label: {
  33. show: true/false, or 'auto'
  34. formatter: a user-defined function that modifies the text/style of the label text
  35. radius: 0-1 for percentage of fullsize, or a specified pixel length
  36. background: {
  37. color: any hexidecimal color value (other formats may or may not work, so best to stick with something like '#000')
  38. opacity: 0-1
  39. },
  40. threshold: 0-1 for the percentage value at which to hide labels (if they're too small)
  41. },
  42. combine: {
  43. threshold: 0-1 for the percentage value at which to combine slices (if they're too small)
  44. color: any hexidecimal color value (other formats may or may not work, so best to stick with something like '#CCC'), if null, the plugin will automatically use the color of the first slice to be combined
  45. label: any text value of what the combined slice should be labeled
  46. }
  47. highlight: {
  48. opacity: 0-1
  49. }
  50. }
  51. }
  52. More detail and specific examples can be found in the included HTML file.
  53. */
  54. (function ($)
  55. {
  56. function init(plot) // this is the "body" of the plugin
  57. {
  58. var canvas = null;
  59. var target = null;
  60. var maxRadius = null;
  61. var centerLeft = null;
  62. var centerTop = null;
  63. var total = 0;
  64. var redraw = true;
  65. var redrawAttempts = 10;
  66. var shrink = 0.95;
  67. var legendWidth = 0;
  68. var processed = false;
  69. var raw = false;
  70. // interactive variables
  71. var highlights = [];
  72. // add hook to determine if pie plugin in enabled, and then perform necessary operations
  73. plot.hooks.processOptions.push(checkPieEnabled);
  74. plot.hooks.bindEvents.push(bindEvents);
  75. // check to see if the pie plugin is enabled
  76. function checkPieEnabled(plot, options)
  77. {
  78. if (options.series.pie.show)
  79. {
  80. //disable grid
  81. options.grid.show = false;
  82. // set labels.show
  83. if (options.series.pie.label.show=='auto')
  84. if (options.legend.show)
  85. options.series.pie.label.show = false;
  86. else
  87. options.series.pie.label.show = true;
  88. // set radius
  89. if (options.series.pie.radius=='auto')
  90. if (options.series.pie.label.show)
  91. options.series.pie.radius = 3/4;
  92. else
  93. options.series.pie.radius = 1;
  94. // ensure sane tilt
  95. if (options.series.pie.tilt>1)
  96. options.series.pie.tilt=1;
  97. if (options.series.pie.tilt<0)
  98. options.series.pie.tilt=0;
  99. // add processData hook to do transformations on the data
  100. plot.hooks.processDatapoints.push(processDatapoints);
  101. plot.hooks.drawOverlay.push(drawOverlay);
  102. // add draw hook
  103. plot.hooks.draw.push(draw);
  104. }
  105. }
  106. // bind hoverable events
  107. function bindEvents(plot, eventHolder)
  108. {
  109. var options = plot.getOptions();
  110. if (options.series.pie.show && options.grid.hoverable)
  111. eventHolder.unbind('mousemove').mousemove(onMouseMove);
  112. if (options.series.pie.show && options.grid.clickable)
  113. eventHolder.unbind('click').click(onClick);
  114. }
  115. // debugging function that prints out an object
  116. function alertObject(obj)
  117. {
  118. var msg = '';
  119. function traverse(obj, depth)
  120. {
  121. if (!depth)
  122. depth = 0;
  123. for (var i = 0; i < obj.length; ++i)
  124. {
  125. for (var j=0; j<depth; j++)
  126. msg += '\t';
  127. if( typeof obj[i] == "object")
  128. { // its an object
  129. msg += ''+i+':\n';
  130. traverse(obj[i], depth+1);
  131. }
  132. else
  133. { // its a value
  134. msg += ''+i+': '+obj[i]+'\n';
  135. }
  136. }
  137. }
  138. traverse(obj);
  139. alert(msg);
  140. }
  141. function calcTotal(data)
  142. {
  143. for (var i = 0; i < data.length; ++i)
  144. {
  145. var item = parseFloat(data[i].data[0][1]);
  146. if (item)
  147. total += item;
  148. }
  149. }
  150. function processDatapoints(plot, series, data, datapoints)
  151. {
  152. if (!processed)
  153. {
  154. processed = true;
  155. canvas = plot.getCanvas();
  156. target = $(canvas).parent();
  157. options = plot.getOptions();
  158. plot.setData(combine(plot.getData()));
  159. }
  160. }
  161. function setupPie()
  162. {
  163. legendWidth = target.children().filter('.legend').children().width();
  164. // calculate maximum radius and center point
  165. maxRadius = Math.min(canvas.width,(canvas.height/options.series.pie.tilt))/2;
  166. centerTop = (canvas.height/2)+options.series.pie.offset.top;
  167. centerLeft = (canvas.width/2);
  168. if (options.series.pie.offset.left=='auto')
  169. if (options.legend.position.match('w'))
  170. centerLeft += legendWidth/2;
  171. else
  172. centerLeft -= legendWidth/2;
  173. else
  174. centerLeft += options.series.pie.offset.left;
  175. if (centerLeft<maxRadius)
  176. centerLeft = maxRadius;
  177. else if (centerLeft>canvas.width-maxRadius)
  178. centerLeft = canvas.width-maxRadius;
  179. }
  180. function fixData(data)
  181. {
  182. for (var i = 0; i < data.length; ++i)
  183. {
  184. if (typeof(data[i].data)=='number')
  185. data[i].data = [[1,data[i].data]];
  186. else if (typeof(data[i].data)=='undefined' || typeof(data[i].data[0])=='undefined')
  187. {
  188. if (typeof(data[i].data)!='undefined' && typeof(data[i].data.label)!='undefined')
  189. data[i].label = data[i].data.label; // fix weirdness coming from flot
  190. data[i].data = [[1,0]];
  191. }
  192. }
  193. return data;
  194. }
  195. function combine(data)
  196. {
  197. data = fixData(data);
  198. calcTotal(data);
  199. var combined = 0;
  200. var numCombined = 0;
  201. var color = options.series.pie.combine.color;
  202. var newdata = [];
  203. for (var i = 0; i < data.length; ++i)
  204. {
  205. // make sure its a number
  206. data[i].data[0][1] = parseFloat(data[i].data[0][1]);
  207. if (!data[i].data[0][1])
  208. data[i].data[0][1] = 0;
  209. if (data[i].data[0][1]/total<=options.series.pie.combine.threshold)
  210. {
  211. combined += data[i].data[0][1];
  212. numCombined++;
  213. if (!color)
  214. color = data[i].color;
  215. }
  216. else
  217. {
  218. newdata.push({
  219. data: [[1,data[i].data[0][1]]],
  220. color: data[i].color,
  221. label: data[i].label,
  222. angle: (data[i].data[0][1]*(Math.PI*2))/total,
  223. percent: (data[i].data[0][1]/total*100)
  224. });
  225. }
  226. }
  227. if (numCombined>0)
  228. newdata.push({
  229. data: [[1,combined]],
  230. color: color,
  231. label: options.series.pie.combine.label,
  232. angle: (combined*(Math.PI*2))/total,
  233. percent: (combined/total*100)
  234. });
  235. return newdata;
  236. }
  237. function draw(plot, newCtx)
  238. {
  239. if (!target) return; // if no series were passed
  240. ctx = newCtx;
  241. setupPie();
  242. var slices = plot.getData();
  243. var attempts = 0;
  244. while (redraw && attempts<redrawAttempts)
  245. {
  246. redraw = false;
  247. if (attempts>0)
  248. maxRadius *= shrink;
  249. attempts += 1;
  250. clear();
  251. if (options.series.pie.tilt<=0.8)
  252. drawShadow();
  253. drawPie();
  254. }
  255. if (attempts >= redrawAttempts) {
  256. clear();
  257. target.prepend('<div class="error">Could not draw pie with labels contained inside canvas</div>');
  258. }
  259. if ( plot.setSeries && plot.insertLegend )
  260. {
  261. plot.setSeries(slices);
  262. plot.insertLegend();
  263. }
  264. // we're actually done at this point, just defining internal functions at this point
  265. function clear()
  266. {
  267. ctx.clearRect(0,0,canvas.width,canvas.height);
  268. target.children().filter('.pieLabel, .pieLabelBackground').remove();
  269. }
  270. function drawShadow()
  271. {
  272. var shadowLeft = 5;
  273. var shadowTop = 15;
  274. var edge = 10;
  275. var alpha = 0.02;
  276. // set radius
  277. if (options.series.pie.radius>1)
  278. var radius = options.series.pie.radius;
  279. else
  280. var radius = maxRadius * options.series.pie.radius;
  281. if (radius>=(canvas.width/2)-shadowLeft || radius*options.series.pie.tilt>=(canvas.height/2)-shadowTop || radius<=edge)
  282. return; // shadow would be outside canvas, so don't draw it
  283. ctx.save();
  284. ctx.translate(shadowLeft,shadowTop);
  285. ctx.globalAlpha = alpha;
  286. ctx.fillStyle = '#000';
  287. // center and rotate to starting position
  288. ctx.translate(centerLeft,centerTop);
  289. ctx.scale(1, options.series.pie.tilt);
  290. //radius -= edge;
  291. for (var i=1; i<=edge; i++)
  292. {
  293. ctx.beginPath();
  294. ctx.arc(0,0,radius,0,Math.PI*2,false);
  295. ctx.fill();
  296. radius -= i;
  297. }
  298. ctx.restore();
  299. }
  300. function drawPie()
  301. {
  302. startAngle = Math.PI*options.series.pie.startAngle;
  303. // set radius
  304. if (options.series.pie.radius>1)
  305. var radius = options.series.pie.radius;
  306. else
  307. var radius = maxRadius * options.series.pie.radius;
  308. // center and rotate to starting position
  309. ctx.save();
  310. ctx.translate(centerLeft,centerTop);
  311. ctx.scale(1, options.series.pie.tilt);
  312. //ctx.rotate(startAngle); // start at top; -- This doesn't work properly in Opera
  313. // draw slices
  314. ctx.save();
  315. var currentAngle = startAngle;
  316. for (var i = 0; i < slices.length; ++i)
  317. {
  318. slices[i].startAngle = currentAngle;
  319. drawSlice(slices[i].angle, slices[i].color, true);
  320. }
  321. ctx.restore();
  322. // draw slice outlines
  323. ctx.save();
  324. ctx.lineWidth = options.series.pie.stroke.width;
  325. currentAngle = startAngle;
  326. for (var i = 0; i < slices.length; ++i)
  327. drawSlice(slices[i].angle, options.series.pie.stroke.color, false);
  328. ctx.restore();
  329. // draw donut hole
  330. drawDonutHole(ctx);
  331. // draw labels
  332. if (options.series.pie.label.show)
  333. drawLabels();
  334. // restore to original state
  335. ctx.restore();
  336. function drawSlice(angle, color, fill)
  337. {
  338. if (angle<=0)
  339. return;
  340. if (fill)
  341. ctx.fillStyle = color;
  342. else
  343. {
  344. ctx.strokeStyle = color;
  345. ctx.lineJoin = 'round';
  346. }
  347. ctx.beginPath();
  348. if (Math.abs(angle - Math.PI*2) > 0.000000001)
  349. ctx.moveTo(0,0); // Center of the pie
  350. else if ($.browser.msie)
  351. angle -= 0.0001;
  352. //ctx.arc(0,0,radius,0,angle,false); // This doesn't work properly in Opera
  353. ctx.arc(0,0,radius,currentAngle,currentAngle+angle,false);
  354. ctx.closePath();
  355. //ctx.rotate(angle); // This doesn't work properly in Opera
  356. currentAngle += angle;
  357. if (fill)
  358. ctx.fill();
  359. else
  360. ctx.stroke();
  361. }
  362. function drawLabels()
  363. {
  364. var currentAngle = startAngle;
  365. // set radius
  366. if (options.series.pie.label.radius>1)
  367. var radius = options.series.pie.label.radius;
  368. else
  369. var radius = maxRadius * options.series.pie.label.radius;
  370. for (var i = 0; i < slices.length; ++i)
  371. {
  372. if (slices[i].percent >= options.series.pie.label.threshold*100)
  373. drawLabel(slices[i], currentAngle, i);
  374. currentAngle += slices[i].angle;
  375. }
  376. function drawLabel(slice, startAngle, index)
  377. {
  378. if (slice.data[0][1]==0)
  379. return;
  380. // format label text
  381. var lf = options.legend.labelFormatter, text, plf = options.series.pie.label.formatter;
  382. if (lf)
  383. text = lf(slice.label, slice);
  384. else
  385. text = slice.label;
  386. if (plf)
  387. text = plf(text, slice);
  388. var halfAngle = ((startAngle+slice.angle) + startAngle)/2;
  389. var x = centerLeft + Math.round(Math.cos(halfAngle) * radius);
  390. var y = centerTop + Math.round(Math.sin(halfAngle) * radius) * options.series.pie.tilt;
  391. var html = '<span class="pieLabel" id="pieLabel'+index+'" style="position:absolute;top:' + y + 'px;left:' + x + 'px;">' + text + "</span>";
  392. target.append(html);
  393. var label = target.children('#pieLabel'+index);
  394. var labelTop = (y - label.height()/2);
  395. var labelLeft = (x - label.width()/2);
  396. label.css('top', labelTop);
  397. label.css('left', labelLeft);
  398. // check to make sure that the label is not outside the canvas
  399. if (0-labelTop>0 || 0-labelLeft>0 || canvas.height-(labelTop+label.height())<0 || canvas.width-(labelLeft+label.width())<0)
  400. redraw = true;
  401. if (options.series.pie.label.background.opacity != 0) {
  402. // put in the transparent background separately to avoid blended labels and label boxes
  403. var c = options.series.pie.label.background.color;
  404. if (c == null) {
  405. c = slice.color;
  406. }
  407. var pos = 'top:'+labelTop+'px;left:'+labelLeft+'px;';
  408. $('<div class="pieLabelBackground" style="position:absolute;width:' + label.width() + 'px;height:' + label.height() + 'px;' + pos +'background-color:' + c + ';"> </div>').insertBefore(label).css('opacity', options.series.pie.label.background.opacity);
  409. }
  410. } // end individual label function
  411. } // end drawLabels function
  412. } // end drawPie function
  413. } // end draw function
  414. // Placed here because it needs to be accessed from multiple locations
  415. function drawDonutHole(layer)
  416. {
  417. // draw donut hole
  418. if(options.series.pie.innerRadius > 0)
  419. {
  420. // subtract the center
  421. layer.save();
  422. innerRadius = options.series.pie.innerRadius > 1 ? options.series.pie.innerRadius : maxRadius * options.series.pie.innerRadius;
  423. layer.globalCompositeOperation = 'destination-out'; // this does not work with excanvas, but it will fall back to using the stroke color
  424. layer.beginPath();
  425. layer.fillStyle = options.series.pie.stroke.color;
  426. layer.arc(0,0,innerRadius,0,Math.PI*2,false);
  427. layer.fill();
  428. layer.closePath();
  429. layer.restore();
  430. // add inner stroke
  431. layer.save();
  432. layer.beginPath();
  433. layer.strokeStyle = options.series.pie.stroke.color;
  434. layer.arc(0,0,innerRadius,0,Math.PI*2,false);
  435. layer.stroke();
  436. layer.closePath();
  437. layer.restore();
  438. // TODO: add extra shadow inside hole (with a mask) if the pie is tilted.
  439. }
  440. }
  441. //-- Additional Interactive related functions --
  442. function isPointInPoly(poly, pt)
  443. {
  444. for(var c = false, i = -1, l = poly.length, j = l - 1; ++i < l; j = i)
  445. ((poly[i][1] <= pt[1] && pt[1] < poly[j][1]) || (poly[j][1] <= pt[1] && pt[1]< poly[i][1]))
  446. && (pt[0] < (poly[j][0] - poly[i][0]) * (pt[1] - poly[i][1]) / (poly[j][1] - poly[i][1]) + poly[i][0])
  447. && (c = !c);
  448. return c;
  449. }
  450. function findNearbySlice(mouseX, mouseY)
  451. {
  452. var slices = plot.getData(),
  453. options = plot.getOptions(),
  454. radius = options.series.pie.radius > 1 ? options.series.pie.radius : maxRadius * options.series.pie.radius;
  455. for (var i = 0; i < slices.length; ++i)
  456. {
  457. var s = slices[i];
  458. if(s.pie.show)
  459. {
  460. ctx.save();
  461. ctx.beginPath();
  462. ctx.moveTo(0,0); // Center of the pie
  463. //ctx.scale(1, options.series.pie.tilt); // this actually seems to break everything when here.
  464. ctx.arc(0,0,radius,s.startAngle,s.startAngle+s.angle,false);
  465. ctx.closePath();
  466. x = mouseX-centerLeft;
  467. y = mouseY-centerTop;
  468. if(ctx.isPointInPath)
  469. {
  470. if (ctx.isPointInPath(mouseX-centerLeft, mouseY-centerTop))
  471. {
  472. //alert('found slice!');
  473. ctx.restore();
  474. return {datapoint: [s.percent, s.data], dataIndex: 0, series: s, seriesIndex: i};
  475. }
  476. }
  477. else
  478. {
  479. // excanvas for IE doesn;t support isPointInPath, this is a workaround.
  480. p1X = (radius * Math.cos(s.startAngle));
  481. p1Y = (radius * Math.sin(s.startAngle));
  482. p2X = (radius * Math.cos(s.startAngle+(s.angle/4)));
  483. p2Y = (radius * Math.sin(s.startAngle+(s.angle/4)));
  484. p3X = (radius * Math.cos(s.startAngle+(s.angle/2)));
  485. p3Y = (radius * Math.sin(s.startAngle+(s.angle/2)));
  486. p4X = (radius * Math.cos(s.startAngle+(s.angle/1.5)));
  487. p4Y = (radius * Math.sin(s.startAngle+(s.angle/1.5)));
  488. p5X = (radius * Math.cos(s.startAngle+s.angle));
  489. p5Y = (radius * Math.sin(s.startAngle+s.angle));
  490. arrPoly = [[0,0],[p1X,p1Y],[p2X,p2Y],[p3X,p3Y],[p4X,p4Y],[p5X,p5Y]];
  491. arrPoint = [x,y];
  492. // TODO: perhaps do some mathmatical trickery here with the Y-coordinate to compensate for pie tilt?
  493. if(isPointInPoly(arrPoly, arrPoint))
  494. {
  495. ctx.restore();
  496. return {datapoint: [s.percent, s.data], dataIndex: 0, series: s, seriesIndex: i};
  497. }
  498. }
  499. ctx.restore();
  500. }
  501. }
  502. return null;
  503. }
  504. function onMouseMove(e)
  505. {
  506. triggerClickHoverEvent('plothover', e);
  507. }
  508. function onClick(e)
  509. {
  510. triggerClickHoverEvent('plotclick', e);
  511. }
  512. // trigger click or hover event (they send the same parameters so we share their code)
  513. function triggerClickHoverEvent(eventname, e)
  514. {
  515. var offset = plot.offset(),
  516. canvasX = parseInt(e.pageX - offset.left),
  517. canvasY = parseInt(e.pageY - offset.top),
  518. item = findNearbySlice(canvasX, canvasY);
  519. if (options.grid.autoHighlight)
  520. {
  521. // clear auto-highlights
  522. for (var i = 0; i < highlights.length; ++i)
  523. {
  524. var h = highlights[i];
  525. if (h.auto == eventname && !(item && h.series == item.series))
  526. unhighlight(h.series);
  527. }
  528. }
  529. // highlight the slice
  530. if (item)
  531. highlight(item.series, eventname);
  532. // trigger any hover bind events
  533. var pos = { pageX: e.pageX, pageY: e.pageY };
  534. target.trigger(eventname, [ pos, item ]);
  535. }
  536. function highlight(s, auto)
  537. {
  538. if (typeof s == "number")
  539. s = series[s];
  540. var i = indexOfHighlight(s);
  541. if (i == -1)
  542. {
  543. highlights.push({ series: s, auto: auto });
  544. plot.triggerRedrawOverlay();
  545. }
  546. else if (!auto)
  547. highlights[i].auto = false;
  548. }
  549. function unhighlight(s)
  550. {
  551. if (s == null)
  552. {
  553. highlights = [];
  554. plot.triggerRedrawOverlay();
  555. }
  556. if (typeof s == "number")
  557. s = series[s];
  558. var i = indexOfHighlight(s);
  559. if (i != -1)
  560. {
  561. highlights.splice(i, 1);
  562. plot.triggerRedrawOverlay();
  563. }
  564. }
  565. function indexOfHighlight(s)
  566. {
  567. for (var i = 0; i < highlights.length; ++i)
  568. {
  569. var h = highlights[i];
  570. if (h.series == s)
  571. return i;
  572. }
  573. return -1;
  574. }
  575. function drawOverlay(plot, octx)
  576. {
  577. //alert(options.series.pie.radius);
  578. var options = plot.getOptions();
  579. //alert(options.series.pie.radius);
  580. var radius = options.series.pie.radius > 1 ? options.series.pie.radius : maxRadius * options.series.pie.radius;
  581. octx.save();
  582. octx.translate(centerLeft, centerTop);
  583. octx.scale(1, options.series.pie.tilt);
  584. for (i = 0; i < highlights.length; ++i)
  585. drawHighlight(highlights[i].series);
  586. drawDonutHole(octx);
  587. octx.restore();
  588. function drawHighlight(series)
  589. {
  590. if (series.angle < 0) return;
  591. //octx.fillStyle = parseColor(options.series.pie.highlight.color).scale(null, null, null, options.series.pie.highlight.opacity).toString();
  592. octx.fillStyle = "rgba(255, 255, 255, "+options.series.pie.highlight.opacity+")"; // this is temporary until we have access to parseColor
  593. octx.beginPath();
  594. if (Math.abs(series.angle - Math.PI*2) > 0.000000001)
  595. octx.moveTo(0,0); // Center of the pie
  596. octx.arc(0,0,radius,series.startAngle,series.startAngle+series.angle,false);
  597. octx.closePath();
  598. octx.fill();
  599. }
  600. }
  601. } // end init (plugin body)
  602. // define pie specific options and their default values
  603. var options = {
  604. series: {
  605. pie: {
  606. show: false,
  607. radius: 'auto', // actual radius of the visible pie (based on full calculated radius if <=1, or hard pixel value)
  608. innerRadius:0, /* for donut */
  609. startAngle: 3/2,
  610. tilt: 1,
  611. offset: {
  612. top: 0,
  613. left: 'auto'
  614. },
  615. stroke: {
  616. color: '#FFF',
  617. width: 1
  618. },
  619. label: {
  620. show: 'auto',
  621. formatter: function(label, slice){
  622. return '<div style="font-size:x-small;text-align:center;padding:2px;color:'+slice.color+';">'+label+'<br/>'+Math.round(slice.percent)+'%</div>';
  623. }, // formatter function
  624. radius: 1, // radius at which to place the labels (based on full calculated radius if <=1, or hard pixel value)
  625. background: {
  626. color: null,
  627. opacity: 0
  628. },
  629. threshold: 0 // percentage at which to hide the label (i.e. the slice is too narrow)
  630. },
  631. combine: {
  632. threshold: -1, // percentage at which to combine little slices into one larger slice
  633. color: null, // color to give the new slice (auto-generated if null)
  634. label: 'Other' // label to give the new slice
  635. },
  636. highlight: {
  637. //color: '#FFF', // will add this functionality once parseColor is available
  638. opacity: 0.5
  639. }
  640. }
  641. }
  642. };
  643. $.plot.plugins.push({
  644. init: init,
  645. options: options,
  646. name: "pie",
  647. version: "1.0"
  648. });
  649. })(jQuery);