flot-graph-rails 1.0.2 → 1.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,829 @@
1
+ /* Flot plugin for rendering pie charts.
2
+
3
+ Copyright (c) 2007-2012 IOLA and Ole Laursen.
4
+ Licensed under the MIT license.
5
+
6
+ The plugin assumes that each series has a single data value, and that each
7
+ value is a positive integer or zero. Negative numbers don't make sense for a
8
+ pie chart, and have unpredictable results. The values do NOT need to be
9
+ passed in as percentages; the plugin will calculate the total and per-slice
10
+ percentages internally.
11
+
12
+ * Created by Brian Medendorp
13
+
14
+ * Updated with contributions from btburnett3, Anthony Aragues and Xavi Ivars
15
+
16
+ The plugin supports these options:
17
+
18
+ series: {
19
+ pie: {
20
+ show: true/false
21
+ radius: 0-1 for percentage of fullsize, or a specified pixel length, or 'auto'
22
+ innerRadius: 0-1 for percentage of fullsize or a specified pixel length, for creating a donut effect
23
+ 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
24
+ tilt: 0-1 for percentage to tilt the pie, where 1 is no tilt, and 0 is completely flat (nothing will show)
25
+ offset: {
26
+ top: integer value to move the pie up or down
27
+ left: integer value to move the pie left or right, or 'auto'
28
+ },
29
+ stroke: {
30
+ color: any hexidecimal color value (other formats may or may not work, so best to stick with something like '#FFF')
31
+ width: integer pixel width of the stroke
32
+ },
33
+ label: {
34
+ show: true/false, or 'auto'
35
+ formatter: a user-defined function that modifies the text/style of the label text
36
+ radius: 0-1 for percentage of fullsize, or a specified pixel length
37
+ background: {
38
+ color: any hexidecimal color value (other formats may or may not work, so best to stick with something like '#000')
39
+ opacity: 0-1
40
+ },
41
+ threshold: 0-1 for the percentage value at which to hide labels (if they're too small)
42
+ },
43
+ combine: {
44
+ threshold: 0-1 for the percentage value at which to combine slices (if they're too small)
45
+ 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
46
+ label: any text value of what the combined slice should be labeled
47
+ }
48
+ highlight: {
49
+ opacity: 0-1
50
+ }
51
+ }
52
+ }
53
+
54
+ More detail and specific examples can be found in the included HTML file.
55
+
56
+ */
57
+
58
+ (function($) {
59
+
60
+ // Maximum redraw attempts when fitting labels within the plot
61
+
62
+ var REDRAW_ATTEMPTS = 10;
63
+
64
+ // Factor by which to shrink the pie when fitting labels within the plot
65
+
66
+ var REDRAW_SHRINK = 0.95;
67
+
68
+ function init(plot) {
69
+
70
+ var canvas = null,
71
+ target = null,
72
+ maxRadius = null,
73
+ centerLeft = null,
74
+ centerTop = null,
75
+ processed = false,
76
+ ctx = null;
77
+
78
+ // interactive variables
79
+
80
+ var highlights = [];
81
+
82
+ // add hook to determine if pie plugin in enabled, and then perform necessary operations
83
+
84
+ plot.hooks.processOptions.push(function(plot, options) {
85
+ if (options.series.pie.show) {
86
+
87
+ options.grid.show = false;
88
+
89
+ // set labels.show
90
+
91
+ if (options.series.pie.label.show == "auto") {
92
+ if (options.legend.show) {
93
+ options.series.pie.label.show = false;
94
+ } else {
95
+ options.series.pie.label.show = true;
96
+ }
97
+ }
98
+
99
+ // set radius
100
+
101
+ if (options.series.pie.radius == "auto") {
102
+ if (options.series.pie.label.show) {
103
+ options.series.pie.radius = 3/4;
104
+ } else {
105
+ options.series.pie.radius = 1;
106
+ }
107
+ }
108
+
109
+ // ensure sane tilt
110
+
111
+ if (options.series.pie.tilt > 1) {
112
+ options.series.pie.tilt = 1;
113
+ } else if (options.series.pie.tilt < 0) {
114
+ options.series.pie.tilt = 0;
115
+ }
116
+ }
117
+ });
118
+
119
+ plot.hooks.bindEvents.push(function(plot, eventHolder) {
120
+ var options = plot.getOptions();
121
+ if (options.series.pie.show) {
122
+ if (options.grid.hoverable) {
123
+ eventHolder.unbind("mousemove").mousemove(onMouseMove);
124
+ }
125
+ if (options.grid.clickable) {
126
+ eventHolder.unbind("click").click(onClick);
127
+ }
128
+ }
129
+ });
130
+
131
+ plot.hooks.processDatapoints.push(function(plot, series, data, datapoints) {
132
+ var options = plot.getOptions();
133
+ if (options.series.pie.show) {
134
+ processDatapoints(plot, series, data, datapoints);
135
+ }
136
+ });
137
+
138
+ plot.hooks.drawOverlay.push(function(plot, octx) {
139
+ var options = plot.getOptions();
140
+ if (options.series.pie.show) {
141
+ drawOverlay(plot, octx);
142
+ }
143
+ });
144
+
145
+ plot.hooks.draw.push(function(plot, newCtx) {
146
+ var options = plot.getOptions();
147
+ if (options.series.pie.show) {
148
+ draw(plot, newCtx);
149
+ }
150
+ });
151
+
152
+ // debugging function that prints out an object
153
+
154
+ function alertObject(obj) {
155
+
156
+ var msg = "";
157
+
158
+ function traverse(obj, depth) {
159
+
160
+ if (!depth) {
161
+ depth = 0;
162
+ }
163
+
164
+ for (var i = 0; i < obj.length; ++i) {
165
+ for (var j = 0; j < depth; j++) {
166
+ msg += "\t";
167
+ }
168
+ if( typeof obj[i] == "object") {
169
+ msg += "" + i + ":\n";
170
+ traverse(obj[i], depth + 1);
171
+ } else {
172
+ msg += "" + i + ": " + obj[i] + "\n";
173
+ }
174
+ }
175
+ }
176
+
177
+ traverse(obj);
178
+ alert(msg);
179
+ }
180
+
181
+ function processDatapoints(plot, series, datapoints) {
182
+ if (!processed) {
183
+ processed = true;
184
+ canvas = plot.getCanvas();
185
+ target = $(canvas).parent();
186
+ options = plot.getOptions();
187
+ plot.setData(combine(plot.getData()));
188
+ }
189
+ }
190
+
191
+ function combine(data) {
192
+
193
+ var total = 0,
194
+ combined = 0,
195
+ numCombined = 0,
196
+ color = options.series.pie.combine.color,
197
+ newdata = [];
198
+
199
+ // Fix up the raw data from Flot, eliminating undefined values
200
+
201
+ for (var i = 0; i < data.length; ++i) {
202
+ if (typeof(data[i].data) == "number") {
203
+ data[i].data = [[1, data[i].data]];
204
+ } else if (typeof(data[i].data) == "undefined" || typeof(data[i].data[0]) == "undefined") {
205
+ if (typeof(data[i].data) != "undefined" && typeof(data[i].data.label) != "undefined") {
206
+ data[i].label = data[i].data.label; // fix weirdness coming from flot
207
+ }
208
+ data[i].data = [[1, 0]];
209
+ }
210
+ }
211
+
212
+ // Calculate the total of all slices, so we can show percentages
213
+
214
+ for (var i = 0; i < data.length; ++i) {
215
+ var item = parseFloat(data[i].data[0][1]);
216
+ if (item) {
217
+ total += item;
218
+ }
219
+ }
220
+
221
+ for (var i = 0; i < data.length; ++i) {
222
+
223
+ // make sure its a number
224
+
225
+ data[i].data[0][1] = parseFloat(data[i].data[0][1]);
226
+
227
+ if (!data[i].data[0][1]) {
228
+ data[i].data[0][1] = 0;
229
+ }
230
+
231
+ if (data[i].data[0][1] / total <= options.series.pie.combine.threshold) {
232
+ combined += data[i].data[0][1];
233
+ numCombined++;
234
+ if (!color) {
235
+ color = data[i].color;
236
+ }
237
+ } else {
238
+ newdata.push({
239
+ data: [[1, data[i].data[0][1]]],
240
+ color: data[i].color,
241
+ label: data[i].label,
242
+ angle: data[i].data[0][1] * Math.PI * 2 / total,
243
+ percent: data[i].data[0][1] / (total / 100)
244
+ });
245
+ }
246
+ }
247
+
248
+ if (numCombined > 0) {
249
+ newdata.push({
250
+ data: [[1, combined]],
251
+ color: color,
252
+ label: options.series.pie.combine.label,
253
+ angle: combined * Math.PI * 2 / total,
254
+ percent: combined / (total / 100)
255
+ });
256
+ }
257
+
258
+ return newdata;
259
+ }
260
+
261
+ function draw(plot, newCtx) {
262
+
263
+ if (!target) {
264
+ return; // if no series were passed
265
+ }
266
+
267
+ var canvasWidth = plot.getPlaceholder().width(),
268
+ canvasHeight = plot.getPlaceholder().height(),
269
+ legendWidth = target.children().filter(".legend").children().width() || 0;
270
+
271
+ ctx = newCtx;
272
+
273
+ // WARNING: HACK! REWRITE THIS CODE AS SOON AS POSSIBLE!
274
+
275
+ // When combining smaller slices into an 'other' slice, we need to
276
+ // add a new series. Since Flot gives plugins no way to modify the
277
+ // list of series, the pie plugin uses a hack where the first call
278
+ // to processDatapoints results in a call to setData with the new
279
+ // list of series, then subsequent processDatapoints do nothing.
280
+
281
+ // The plugin-global 'processed' flag is used to control this hack;
282
+ // it starts out false, and is set to true after the first call to
283
+ // processDatapoints.
284
+
285
+ // Unfortunately this turns future setData calls into no-ops; they
286
+ // call processDatapoints, the flag is true, and nothing happens.
287
+
288
+ // To fix this we'll set the flag back to false here in draw, when
289
+ // all series have been processed, so the next sequence of calls to
290
+ // processDatapoints once again starts out with a slice-combine.
291
+ // This is really a hack; in 0.9 we need to give plugins a proper
292
+ // way to modify series before any processing begins.
293
+
294
+ processed = false;
295
+
296
+ // calculate maximum radius and center point
297
+
298
+ maxRadius = Math.min(canvasWidth, canvasHeight / options.series.pie.tilt) / 2;
299
+ centerTop = canvasHeight / 2 + options.series.pie.offset.top;
300
+ centerLeft = canvasWidth / 2;
301
+
302
+ if (options.series.pie.offset.left == "auto") {
303
+ if (options.legend.position.match("w")) {
304
+ centerLeft += legendWidth / 2;
305
+ } else {
306
+ centerLeft -= legendWidth / 2;
307
+ }
308
+ } else {
309
+ centerLeft += options.series.pie.offset.left;
310
+ }
311
+
312
+ if (centerLeft < maxRadius) {
313
+ centerLeft = maxRadius;
314
+ } else if (centerLeft > canvasWidth - maxRadius) {
315
+ centerLeft = canvasWidth - maxRadius;
316
+ }
317
+
318
+ var slices = plot.getData(),
319
+ attempts = 0;
320
+
321
+ // Keep shrinking the pie's radius until drawPie returns true,
322
+ // indicating that all the labels fit, or we try too many times.
323
+
324
+ do {
325
+ if (attempts > 0) {
326
+ maxRadius *= REDRAW_SHRINK;
327
+ }
328
+ attempts += 1;
329
+ clear();
330
+ if (options.series.pie.tilt <= 0.8) {
331
+ drawShadow();
332
+ }
333
+ } while (!drawPie() && attempts < REDRAW_ATTEMPTS)
334
+
335
+ if (attempts >= REDRAW_ATTEMPTS) {
336
+ clear();
337
+ target.prepend("<div class='error'>Could not draw pie with labels contained inside canvas</div>");
338
+ }
339
+
340
+ if (plot.setSeries && plot.insertLegend) {
341
+ plot.setSeries(slices);
342
+ plot.insertLegend();
343
+ }
344
+
345
+ // we're actually done at this point, just defining internal functions at this point
346
+
347
+ function clear() {
348
+ ctx.clearRect(0, 0, canvasWidth, canvasHeight);
349
+ target.children().filter(".pieLabel, .pieLabelBackground").remove();
350
+ }
351
+
352
+ function drawShadow() {
353
+
354
+ var shadowLeft = options.series.pie.shadow.left;
355
+ var shadowTop = options.series.pie.shadow.top;
356
+ var edge = 10;
357
+ var alpha = options.series.pie.shadow.alpha;
358
+ var radius = options.series.pie.radius > 1 ? options.series.pie.radius : maxRadius * options.series.pie.radius;
359
+
360
+ if (radius >= canvasWidth / 2 - shadowLeft || radius * options.series.pie.tilt >= canvasHeight / 2 - shadowTop || radius <= edge) {
361
+ return; // shadow would be outside canvas, so don't draw it
362
+ }
363
+
364
+ ctx.save();
365
+ ctx.translate(shadowLeft,shadowTop);
366
+ ctx.globalAlpha = alpha;
367
+ ctx.fillStyle = "#000";
368
+
369
+ // center and rotate to starting position
370
+
371
+ ctx.translate(centerLeft,centerTop);
372
+ ctx.scale(1, options.series.pie.tilt);
373
+
374
+ //radius -= edge;
375
+
376
+ for (var i = 1; i <= edge; i++) {
377
+ ctx.beginPath();
378
+ ctx.arc(0, 0, radius, 0, Math.PI * 2, false);
379
+ ctx.fill();
380
+ radius -= i;
381
+ }
382
+
383
+ ctx.restore();
384
+ }
385
+
386
+ function drawPie() {
387
+
388
+ var startAngle = Math.PI * options.series.pie.startAngle;
389
+ var radius = options.series.pie.radius > 1 ? options.series.pie.radius : maxRadius * options.series.pie.radius;
390
+
391
+ // center and rotate to starting position
392
+
393
+ ctx.save();
394
+ ctx.translate(centerLeft,centerTop);
395
+ ctx.scale(1, options.series.pie.tilt);
396
+ //ctx.rotate(startAngle); // start at top; -- This doesn't work properly in Opera
397
+
398
+ // draw slices
399
+
400
+ ctx.save();
401
+ var currentAngle = startAngle;
402
+ for (var i = 0; i < slices.length; ++i) {
403
+ slices[i].startAngle = currentAngle;
404
+ drawSlice(slices[i].angle, slices[i].color, true);
405
+ }
406
+ ctx.restore();
407
+
408
+ // draw slice outlines
409
+
410
+ if (options.series.pie.stroke.width > 0) {
411
+ ctx.save();
412
+ ctx.lineWidth = options.series.pie.stroke.width;
413
+ currentAngle = startAngle;
414
+ for (var i = 0; i < slices.length; ++i) {
415
+ drawSlice(slices[i].angle, options.series.pie.stroke.color, false);
416
+ }
417
+ ctx.restore();
418
+ }
419
+
420
+ // draw donut hole
421
+
422
+ drawDonutHole(ctx);
423
+
424
+ ctx.restore();
425
+
426
+ // Draw the labels, returning true if they fit within the plot
427
+
428
+ if (options.series.pie.label.show) {
429
+ return drawLabels();
430
+ } else return true;
431
+
432
+ function drawSlice(angle, color, fill) {
433
+
434
+ if (angle <= 0 || isNaN(angle)) {
435
+ return;
436
+ }
437
+
438
+ if (fill) {
439
+ ctx.fillStyle = color;
440
+ } else {
441
+ ctx.strokeStyle = color;
442
+ ctx.lineJoin = "round";
443
+ }
444
+
445
+ ctx.beginPath();
446
+ if (Math.abs(angle - Math.PI * 2) > 0.000000001) {
447
+ ctx.moveTo(0, 0); // Center of the pie
448
+ }
449
+
450
+ //ctx.arc(0, 0, radius, 0, angle, false); // This doesn't work properly in Opera
451
+ ctx.arc(0, 0, radius,currentAngle, currentAngle + angle / 2, false);
452
+ ctx.arc(0, 0, radius,currentAngle + angle / 2, currentAngle + angle, false);
453
+ ctx.closePath();
454
+ //ctx.rotate(angle); // This doesn't work properly in Opera
455
+ currentAngle += angle;
456
+
457
+ if (fill) {
458
+ ctx.fill();
459
+ } else {
460
+ ctx.stroke();
461
+ }
462
+ }
463
+
464
+ function drawLabels() {
465
+
466
+ var currentAngle = startAngle;
467
+ var radius = options.series.pie.label.radius > 1 ? options.series.pie.label.radius : maxRadius * options.series.pie.label.radius;
468
+
469
+ for (var i = 0; i < slices.length; ++i) {
470
+ if (slices[i].percent >= options.series.pie.label.threshold * 100) {
471
+ if (!drawLabel(slices[i], currentAngle, i)) {
472
+ return false;
473
+ }
474
+ }
475
+ currentAngle += slices[i].angle;
476
+ }
477
+
478
+ return true;
479
+
480
+ function drawLabel(slice, startAngle, index) {
481
+
482
+ if (slice.data[0][1] == 0) {
483
+ return true;
484
+ }
485
+
486
+ // format label text
487
+
488
+ var lf = options.legend.labelFormatter, text, plf = options.series.pie.label.formatter;
489
+
490
+ if (lf) {
491
+ text = lf(slice.label, slice);
492
+ } else {
493
+ text = slice.label;
494
+ }
495
+
496
+ if (plf) {
497
+ text = plf(text, slice);
498
+ }
499
+
500
+ var halfAngle = ((startAngle + slice.angle) + startAngle) / 2;
501
+ var x = centerLeft + Math.round(Math.cos(halfAngle) * radius);
502
+ var y = centerTop + Math.round(Math.sin(halfAngle) * radius) * options.series.pie.tilt;
503
+
504
+ var html = "<span class='pieLabel' id='pieLabel" + index + "' style='position:absolute;top:" + y + "px;left:" + x + "px;'>" + text + "</span>";
505
+ target.append(html);
506
+
507
+ var label = target.children("#pieLabel" + index);
508
+ var labelTop = (y - label.height() / 2);
509
+ var labelLeft = (x - label.width() / 2);
510
+
511
+ label.css("top", labelTop);
512
+ label.css("left", labelLeft);
513
+
514
+ // check to make sure that the label is not outside the canvas
515
+
516
+ if (0 - labelTop > 0 || 0 - labelLeft > 0 || canvasHeight - (labelTop + label.height()) < 0 || canvasWidth - (labelLeft + label.width()) < 0) {
517
+ return false;
518
+ }
519
+
520
+ if (options.series.pie.label.background.opacity != 0) {
521
+
522
+ // put in the transparent background separately to avoid blended labels and label boxes
523
+
524
+ var c = options.series.pie.label.background.color;
525
+
526
+ if (c == null) {
527
+ c = slice.color;
528
+ }
529
+
530
+ var pos = "top:" + labelTop + "px;left:" + labelLeft + "px;";
531
+ $("<div class='pieLabelBackground' style='position:absolute;width:" + label.width() + "px;height:" + label.height() + "px;" + pos + "background-color:" + c + ";'></div>")
532
+ .css("opacity", options.series.pie.label.background.opacity)
533
+ .insertBefore(label);
534
+ }
535
+
536
+ return true;
537
+ } // end individual label function
538
+ } // end drawLabels function
539
+ } // end drawPie function
540
+ } // end draw function
541
+
542
+ // Placed here because it needs to be accessed from multiple locations
543
+
544
+ function drawDonutHole(layer) {
545
+ if (options.series.pie.innerRadius > 0) {
546
+
547
+ // subtract the center
548
+
549
+ layer.save();
550
+ var innerRadius = options.series.pie.innerRadius > 1 ? options.series.pie.innerRadius : maxRadius * options.series.pie.innerRadius;
551
+ layer.globalCompositeOperation = "destination-out"; // this does not work with excanvas, but it will fall back to using the stroke color
552
+ layer.beginPath();
553
+ layer.fillStyle = options.series.pie.stroke.color;
554
+ layer.arc(0, 0, innerRadius, 0, Math.PI * 2, false);
555
+ layer.fill();
556
+ layer.closePath();
557
+ layer.restore();
558
+
559
+ // add inner stroke
560
+
561
+ layer.save();
562
+ layer.beginPath();
563
+ layer.strokeStyle = options.series.pie.stroke.color;
564
+ layer.arc(0, 0, innerRadius, 0, Math.PI * 2, false);
565
+ layer.stroke();
566
+ layer.closePath();
567
+ layer.restore();
568
+
569
+ // TODO: add extra shadow inside hole (with a mask) if the pie is tilted.
570
+ }
571
+ }
572
+
573
+ //-- Additional Interactive related functions --
574
+
575
+ function isPointInPoly(poly, pt) {
576
+ for(var c = false, i = -1, l = poly.length, j = l - 1; ++i < l; j = i)
577
+ ((poly[i][1] <= pt[1] && pt[1] < poly[j][1]) || (poly[j][1] <= pt[1] && pt[1]< poly[i][1]))
578
+ && (pt[0] < (poly[j][0] - poly[i][0]) * (pt[1] - poly[i][1]) / (poly[j][1] - poly[i][1]) + poly[i][0])
579
+ && (c = !c);
580
+ return c;
581
+ }
582
+
583
+ function findNearbySlice(mouseX, mouseY) {
584
+
585
+ var slices = plot.getData(),
586
+ options = plot.getOptions(),
587
+ radius = options.series.pie.radius > 1 ? options.series.pie.radius : maxRadius * options.series.pie.radius,
588
+ x, y;
589
+
590
+ for (var i = 0; i < slices.length; ++i) {
591
+
592
+ var s = slices[i];
593
+
594
+ if (s.pie.show) {
595
+
596
+ ctx.save();
597
+ ctx.beginPath();
598
+ ctx.moveTo(0, 0); // Center of the pie
599
+ //ctx.scale(1, options.series.pie.tilt); // this actually seems to break everything when here.
600
+ ctx.arc(0, 0, radius, s.startAngle, s.startAngle + s.angle / 2, false);
601
+ ctx.arc(0, 0, radius, s.startAngle + s.angle / 2, s.startAngle + s.angle, false);
602
+ ctx.closePath();
603
+ x = mouseX - centerLeft;
604
+ y = mouseY - centerTop;
605
+
606
+ if (ctx.isPointInPath) {
607
+ if (ctx.isPointInPath(mouseX - centerLeft, mouseY - centerTop)) {
608
+ ctx.restore();
609
+ return {
610
+ datapoint: [s.percent, s.data],
611
+ dataIndex: 0,
612
+ series: s,
613
+ seriesIndex: i
614
+ };
615
+ }
616
+ } else {
617
+
618
+ // excanvas for IE doesn;t support isPointInPath, this is a workaround.
619
+
620
+ var p1X = radius * Math.cos(s.startAngle),
621
+ p1Y = radius * Math.sin(s.startAngle),
622
+ p2X = radius * Math.cos(s.startAngle + s.angle / 4),
623
+ p2Y = radius * Math.sin(s.startAngle + s.angle / 4),
624
+ p3X = radius * Math.cos(s.startAngle + s.angle / 2),
625
+ p3Y = radius * Math.sin(s.startAngle + s.angle / 2),
626
+ p4X = radius * Math.cos(s.startAngle + s.angle / 1.5),
627
+ p4Y = radius * Math.sin(s.startAngle + s.angle / 1.5),
628
+ p5X = radius * Math.cos(s.startAngle + s.angle),
629
+ p5Y = radius * Math.sin(s.startAngle + s.angle),
630
+ arrPoly = [[0, 0], [p1X, p1Y], [p2X, p2Y], [p3X, p3Y], [p4X, p4Y], [p5X, p5Y]],
631
+ arrPoint = [x, y];
632
+
633
+ // TODO: perhaps do some mathmatical trickery here with the Y-coordinate to compensate for pie tilt?
634
+
635
+ if (isPointInPoly(arrPoly, arrPoint)) {
636
+ ctx.restore();
637
+ return {
638
+ datapoint: [s.percent, s.data],
639
+ dataIndex: 0,
640
+ series: s,
641
+ seriesIndex: i
642
+ };
643
+ }
644
+ }
645
+
646
+ ctx.restore();
647
+ }
648
+ }
649
+
650
+ return null;
651
+ }
652
+
653
+ function onMouseMove(e) {
654
+ triggerClickHoverEvent("plothover", e);
655
+ }
656
+
657
+ function onClick(e) {
658
+ triggerClickHoverEvent("plotclick", e);
659
+ }
660
+
661
+ // trigger click or hover event (they send the same parameters so we share their code)
662
+
663
+ function triggerClickHoverEvent(eventname, e) {
664
+
665
+ var offset = plot.offset();
666
+ var canvasX = parseInt(e.pageX - offset.left);
667
+ var canvasY = parseInt(e.pageY - offset.top);
668
+ var item = findNearbySlice(canvasX, canvasY);
669
+
670
+ if (options.grid.autoHighlight) {
671
+
672
+ // clear auto-highlights
673
+
674
+ for (var i = 0; i < highlights.length; ++i) {
675
+ var h = highlights[i];
676
+ if (h.auto == eventname && !(item && h.series == item.series)) {
677
+ unhighlight(h.series);
678
+ }
679
+ }
680
+ }
681
+
682
+ // highlight the slice
683
+
684
+ if (item) {
685
+ highlight(item.series, eventname);
686
+ }
687
+
688
+ // trigger any hover bind events
689
+
690
+ var pos = { pageX: e.pageX, pageY: e.pageY };
691
+ target.trigger(eventname, [pos, item]);
692
+ }
693
+
694
+ function highlight(s, auto) {
695
+ //if (typeof s == "number") {
696
+ // s = series[s];
697
+ //}
698
+
699
+ var i = indexOfHighlight(s);
700
+
701
+ if (i == -1) {
702
+ highlights.push({ series: s, auto: auto });
703
+ plot.triggerRedrawOverlay();
704
+ } else if (!auto) {
705
+ highlights[i].auto = false;
706
+ }
707
+ }
708
+
709
+ function unhighlight(s) {
710
+ if (s == null) {
711
+ highlights = [];
712
+ plot.triggerRedrawOverlay();
713
+ }
714
+
715
+ //if (typeof s == "number") {
716
+ // s = series[s];
717
+ //}
718
+
719
+ var i = indexOfHighlight(s);
720
+
721
+ if (i != -1) {
722
+ highlights.splice(i, 1);
723
+ plot.triggerRedrawOverlay();
724
+ }
725
+ }
726
+
727
+ function indexOfHighlight(s) {
728
+ for (var i = 0; i < highlights.length; ++i) {
729
+ var h = highlights[i];
730
+ if (h.series == s)
731
+ return i;
732
+ }
733
+ return -1;
734
+ }
735
+
736
+ function drawOverlay(plot, octx) {
737
+
738
+ var options = plot.getOptions();
739
+
740
+ var radius = options.series.pie.radius > 1 ? options.series.pie.radius : maxRadius * options.series.pie.radius;
741
+
742
+ octx.save();
743
+ octx.translate(centerLeft, centerTop);
744
+ octx.scale(1, options.series.pie.tilt);
745
+
746
+ for (var i = 0; i < highlights.length; ++i) {
747
+ drawHighlight(highlights[i].series);
748
+ }
749
+
750
+ drawDonutHole(octx);
751
+
752
+ octx.restore();
753
+
754
+ function drawHighlight(series) {
755
+
756
+ if (series.angle <= 0 || isNaN(series.angle)) {
757
+ return;
758
+ }
759
+
760
+ //octx.fillStyle = parseColor(options.series.pie.highlight.color).scale(null, null, null, options.series.pie.highlight.opacity).toString();
761
+ octx.fillStyle = "rgba(255, 255, 255, " + options.series.pie.highlight.opacity + ")"; // this is temporary until we have access to parseColor
762
+ octx.beginPath();
763
+ if (Math.abs(series.angle - Math.PI * 2) > 0.000000001) {
764
+ octx.moveTo(0, 0); // Center of the pie
765
+ }
766
+ octx.arc(0, 0, radius, series.startAngle, series.startAngle + series.angle / 2, false);
767
+ octx.arc(0, 0, radius, series.startAngle + series.angle / 2, series.startAngle + series.angle, false);
768
+ octx.closePath();
769
+ octx.fill();
770
+ }
771
+ }
772
+ } // end init (plugin body)
773
+
774
+ // define pie specific options and their default values
775
+
776
+ var options = {
777
+ series: {
778
+ pie: {
779
+ show: false,
780
+ radius: "auto", // actual radius of the visible pie (based on full calculated radius if <=1, or hard pixel value)
781
+ innerRadius: 0, /* for donut */
782
+ startAngle: 3/2,
783
+ tilt: 1,
784
+ shadow: {
785
+ left: 5, // shadow left offset
786
+ top: 15, // shadow top offset
787
+ alpha: 0.02 // shadow alpha
788
+ },
789
+ offset: {
790
+ top: 0,
791
+ left: "auto"
792
+ },
793
+ stroke: {
794
+ color: "#fff",
795
+ width: 1
796
+ },
797
+ label: {
798
+ show: "auto",
799
+ formatter: function(label, slice) {
800
+ return "<div style='font-size:x-small;text-align:center;padding:2px;color:" + slice.color + ";'>" + label + "<br/>" + Math.round(slice.percent) + "%</div>";
801
+ }, // formatter function
802
+ radius: 1, // radius at which to place the labels (based on full calculated radius if <=1, or hard pixel value)
803
+ background: {
804
+ color: null,
805
+ opacity: 0
806
+ },
807
+ threshold: 0 // percentage at which to hide the label (i.e. the slice is too narrow)
808
+ },
809
+ combine: {
810
+ threshold: -1, // percentage at which to combine little slices into one larger slice
811
+ color: null, // color to give the new slice (auto-generated if null)
812
+ label: "Other" // label to give the new slice
813
+ },
814
+ highlight: {
815
+ //color: "#fff", // will add this functionality once parseColor is available
816
+ opacity: 0.5
817
+ }
818
+ }
819
+ }
820
+ };
821
+
822
+ $.plot.plugins.push({
823
+ init: init,
824
+ options: options,
825
+ name: "pie",
826
+ version: "1.1"
827
+ });
828
+
829
+ })(jQuery);