├── PieChart
├── piechart.html
└── piechart.js
└── README
/PieChart/piechart.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Pie Chart
5 |
6 |
7 |
9 |
65 |
66 |
67 |
68 |
70 |
71 |
72 |
73 |
--------------------------------------------------------------------------------
/PieChart/piechart.js:
--------------------------------------------------------------------------------
1 | //
2 | // PieChart
3 | //
4 | // CreativeCommons Attribution-ShareAlike
5 | // http://creativecommons.org/licenses/by-sa/2.5/
6 | //
7 | // 2011 Elisabeth Robson
8 | //
9 | // expects an object with one or more of these:
10 | // includeLabels - boolean, determines whether to include the specified labels
11 | // when drawing the chart. If false, the labels are stored in the pie chart
12 | // but not drawn by default. You can draw a label for a segment with
13 | // the drawLabel method.
14 | // data - array of data items. Should be positive integer adding up to 360.
15 | // labels - array of (string) labels. Should have at least as many items as data.
16 | // colors - two D array of (string) colors. First is used to draw, second to draw
17 | // a selected segment.
18 | //
19 | function PieChart(id, o) {
20 | this.includeLabels = false;
21 | if (o.includeLabels == undefined) {
22 | this.includeLabels = false;
23 | }
24 | else {
25 | this.includeLabels = o.includeLabels;
26 | }
27 | this.data = o.data ? o.data : [30, 70, 45, 65, 20, 130]; // in degrees
28 | this.labels = o.labels ? o.labels : ["First", "Second", "Third", "Fourth", "Fifth", "Sixth"];
29 | this.colors = o.colors ? o.colors : [
30 | ["#bbddb3", "#1d8e04"], // green
31 | ["#e2f5b4", "#9edd08"], // yellow green
32 | ["#fdfbb4", "#faf406"], // yellow
33 | ["#fbd4b7", "#f2700f"], // orange
34 | ["#f8bdb4", "#ea2507"], // red
35 | ["#e2bcbd", "#9e2126"] // purple
36 | ];
37 |
38 | this.canvas = document.getElementById(id);
39 | }
40 |
41 | PieChart.prototype = {
42 |
43 | select: function(segment) {
44 | var self = this;
45 | var context = this.canvas.getContext("2d");
46 | this.drawSegment(this.canvas, context, segment, this.data[segment], true, this.includeLabels);
47 | },
48 |
49 | draw: function() {
50 | var self = this;
51 | var context = this.canvas.getContext("2d");
52 | for (var i = 0; i < this.data.length; i++) {
53 | this.drawSegment(this.canvas, context, i, this.data[i], false, this.includeLabels);
54 | }
55 | },
56 |
57 | drawSegment: function(canvas, context, i, size, isSelected, includeLabels) {
58 | var self = this;
59 | context.save();
60 | var centerX = Math.floor(canvas.width / 2);
61 | var centerY = Math.floor(canvas.height / 2);
62 | radius = Math.floor(canvas.width / 2);
63 |
64 | var startingAngle = self.degreesToRadians(self.sumTo(self.data, i));
65 | var arcSize = self.degreesToRadians(size);
66 | var endingAngle = startingAngle + arcSize;
67 |
68 | context.beginPath();
69 | context.moveTo(centerX, centerY);
70 | context.arc(centerX, centerY, radius, startingAngle, endingAngle, false);
71 | context.closePath();
72 |
73 | isSelected ?
74 | context.fillStyle = self.colors[i][1] :
75 | context.fillStyle = self.colors[i][0];
76 |
77 | context.fill();
78 | context.restore();
79 |
80 | if (includeLabels && (self.labels.length > i)) {
81 | self.drawSegmentLabel(canvas, context, i, isSelected);
82 | }
83 | },
84 |
85 | drawSegmentLabel: function(canvas, context, i, isSelected) {
86 | var self = this;
87 | context.save();
88 | var x = Math.floor(canvas.width / 2);
89 | var y = Math.floor(canvas.height / 2);
90 | var angle;
91 | var angleD = self.sumTo(self.data, i);
92 | var flip = (angleD < 90 || angleD > 270) ? false : true;
93 |
94 | context.translate(x, y);
95 | if (flip) {
96 | angleD = angleD-180;
97 | context.textAlign = "left";
98 | angle = self.degreesToRadians(angleD);
99 | context.rotate(angle);
100 | context.translate(-(x + (canvas.width * 0.5))+15, -(canvas.height * 0.05)-10);
101 | }
102 | else {
103 | context.textAlign = "right";
104 | angle = self.degreesToRadians(angleD);
105 | context.rotate(angle);
106 | }
107 | //context.textAlign = "right";
108 | var fontSize = Math.floor(canvas.height / 25);
109 | context.font = fontSize + "pt Helvetica";
110 |
111 | var dx = Math.floor(canvas.width * 0.5) - 10;
112 | var dy = Math.floor(canvas.height * 0.05);
113 | context.fillText(self.labels[i], dx, dy);
114 |
115 | context.restore();
116 | },
117 |
118 | drawLabel: function(i) {
119 | var self = this;
120 | var context = this.canvas.getContext("2d");
121 | var size = self.data[i];
122 |
123 | self.drawSegmentLabel(this.canvas, context, i, size, false);
124 | },
125 |
126 | // helper functions
127 | degreesToRadians: function(degrees) {
128 | return (degrees * Math.PI)/180;
129 | },
130 |
131 | sumTo: function(a, i) {
132 | var sum = 0;
133 | for (var j = 0; j < i; j++) {
134 | sum += a[j];
135 | }
136 | return sum;
137 | }
138 |
139 |
140 | }
141 |
142 |
--------------------------------------------------------------------------------
/README:
--------------------------------------------------------------------------------
1 | Projects in HTML5
2 |
--------------------------------------------------------------------------------