-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathPie_Chart.html
123 lines (110 loc) · 5.01 KB
/
Pie_Chart.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html>
<head>
<title>Pie Chart Counter Clockwise</title>
</head>
<body>
<canvas id="myCanvas" width="350" height="300" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var lastPostionOfSlice = 0;
var RemainingSlices = 2;
var ColorIndex = 0;
var Palettes = new Array("#3366CC","#DC3912","#FF9900","#109618","#990099","#3B3EAC","#0099C6","#DD4477","#66AA00","#B82E2E","#316395","#994499","#22AA99","#AAAA11","#6633CC","#E67300","#8B0707","#329262","#5574A6","#3B3EAC");
//Bright var Palettes = new Array("#008000", "#0000FF", "#800080", "#00FF00", "#FF00FF", "#008080", "#FFFF00", "#808080", "#00FFFF", "#000080", "#800000", "#FF0000", "#808000", "#C0C0C0", "#FF6347", "#FFE4B5"
//Grayscale var Palettes = new Array("#C8C8C8", "#BDBDBD", "#B2B2B2", "#A7A7A7", "#9C9C9C", "#919191", "#868686", "#7B7B7B", "#707070", "#656565", "#5A5A5A", "#4F4F4F", "#444444", "#393939", "#2E2E2E", "#232323"
//Excel var Palettes = new Array("#9999FF", "#993366", "#FFFFCC", "#CCFFFF", "#660066", "#FF8080", "#0066CC", "#CCCCFF", "#000080", "#FF00FF", "#FFFF00", "#00FFFF", "#800080", "#800000", "#008080", "#0000FF"
//Light var Palettes = new Array("#E6E6FA", "#FFF0F5", "#FFDAB9", "#FFFACD", "#FFE4E1", "#F0FFF0", "#F0F8FF", "#F5F5F5", "#FAEBD7", "#E0FFFF"
//Pastel var Palettes = new Array("#87CEEB", "#32CD32", "#BA55D3", "#F08080", "#4682B4", "#9ACD32", "#40E0D0", "#FF69B4", "#F0E68C", "#D2B48C", "#8FBC8B", "#6495ED", "#DDA0DD", "#5F9EA0", "#FFDAB9", "#FFA07A"
//EarthTones var Palettes = new Array("#FF8000", "#B8860B", "#C04000", "#6B8E23", "#CD853F", "#C0C000", "#228B22", "#D2691E", "#808000", "#20B2AA", "#F4A460", "#00C000", "#8FBC8B", "#B22222", "#8B4513", "#C00000"
//SemiTransparent var Palettes = new Array("#FF0000", "#00FF00", "#0000FF", "#FFFF00", "#00FFFF", "#FF00FF", "#AA7814", "#FF0000", "#00FF00", "#0000FF", "#FFFF00", "#00FFFF", "#FF00FF", "#AA7814", "#647832", "#285A96"
//Berry var Palettes = new Array("#8A2BE2", "#BA55D3", "#4169E1", "#C71585", "#0000FF", "#8A2BE2", "#DA70D6", "#7B68EE", "#C000C0", "#0000CD", "#800080"
//Chocolate var Palettes = new Array("#A0522D", "#D2691E", "#8B0000", "#CD853F", "#A52A2A", "#F4A460", "#8B4513", "#C04000", "#B22222", "#B65C3A"
//Fire var Palettes = new Array("#FFD700", "#FF0000", "#FF1493", "#DC143C", "#FF8C00", "#FF00FF", "#FFFF00", "#FF4500", "#C71585", "#DDE221"
//SeaGreen var Palettes = new Array("#2E8B57", "#66CDAA", "#4682B4", "#008B8B", "#5F9EA0", "#3CB371", "#48D1CC", "#B0C4DE", "#8FBC8B", "#87CEEB"
//BrightPastel var Palettes = new Array("#418CF0", "#FCB441", "#E0400A", "#056492", "#BFBFBF", "#1A3B69", "#FFE382", "#129CDD", "#CA6B4B", "#005CDB", "#F3D288", "#506381", "#F1B9A8", "#E0830A", "#7893BE"
function drawPieChart()
{
lastPostionOfSlice = 0;
RemainingSlices = 2;
lastOpacity = 1;
ColorIndex = 0;
ctx.restore();
DrawPieSlice(0.3,"Data1");
DrawPieSlice(0.03,"Data2");
DrawPieSlice(0.4,"Data3");
DrawPieSlice(0.05,"Data4");
DrawPieSlice(0.01,"Data5");
DrawPieSlice(0.5,"Data6");
DrawPieSlice(0.05,"Data7");
DrawPieSlice(0.1,"Data8");
DrawPieSlice(0.6,"Data9");
DrawPieSlice(0.01,"Data0");
ctx.save();
}
function DrawPieSlice(sizeOfSlice, label)
{
var CenterX = ctx.canvas.width /2;
var CenterY = ctx.canvas.height /2;
var CircleRadius = 60;
ctx.lineWidth = CircleRadius * 2;
RemainingSlices = RemainingSlices - sizeOfSlice;
var StartingAngle = lastPostionOfSlice;
var EndingAngle = RemainingSlices * Math.PI;
var thePoint;
if(ColorIndex == 0){ //Drop Shadow full Chart
ctx.save();
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 1;
ctx.shadowColor = "#333";
ctx.shadowBlur = 5;
ctx.beginPath();
ctx.arc(CenterX, CenterY, CircleRadius, 0, 2 * Math.PI);
ctx.stroke();
ctx.restore();
}
ctx.strokeStyle = Palettes[ColorIndex];
ctx.beginPath();
ctx.arc(CenterX, CenterY, CircleRadius, StartingAngle, EndingAngle, true);
ctx.stroke();
ctx.save();
ctx.textAlign = "center";
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.shadowColor = "#000";
ctx.shadowBlur = 5;
var LabelPoint = (RemainingSlices + (sizeOfSlice/2)) * Math.PI;
if((sizeOfSlice * 100) < 20){
ctx.fillStyle=Palettes[ColorIndex];
ctx.shadowBlur = 0;
thePoint=PinPoint(CenterX,CenterY,ctx.lineWidth + 30,LabelPoint);
}
else{
ctx.fillStyle="white";
thePoint=PinPoint(CenterX,CenterY,(ctx.lineWidth - 38),LabelPoint);
}
if(!label) label = "";
if((sizeOfSlice * 100) < 20){
ctx.font = "normal 11px sans-serif";
ctx.fillText( label + " " + (sizeOfSlice * 100) + "%",thePoint.x,thePoint.y);
}
else{
ctx.font = "normal 11px sans-serif";
ctx.fillText( label,thePoint.x,thePoint.y);
ctx.font = "normal 10px sans-serif";
ctx.fillText( (sizeOfSlice * 100) + "%" ,thePoint.x,thePoint.y - 12);
}
ctx.restore();
lastPostionOfSlice = EndingAngle;
ColorIndex = ColorIndex + 1;
}
function PinPoint(cx,cy,radius,radianAngle){
var x=cx+radius*Math.cos(radianAngle);
var y=cy+radius*Math.sin(radianAngle);
return({x:x,y:y});
}
drawPieChart();
</script>
</body>
</html>