Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(464)

Side by Side Diff: polymer_0.5.0/bower_components/chartnewjs/Samples/animation_doughnut.html

Issue 786953007: npm_modules: Fork bower_components into Polymer 0.4.0 and 0.5.0 versions (Closed) Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master
Patch Set: Created 5 years, 11 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
(Empty)
1 <!doctype html>
2
3 <!--[if lte IE 8]><SCRIPT src='source/excanvas.js'></script><![endif]--><SCRIPT src='../ChartNew.js'></script>
4
5
6 <SCRIPT>
7
8 function setColor(area,data,config,i,j,animPct,value)
9 {
10 if(value > 35)return("rgba(220,0,0,"+animPct);
11 else return("rgba(0,220,0,"+animPct);
12
13 }
14
15 var charJSPersonnalDefaultOptions = { decimalSeparator : "," , thousandSeparator : ".", roundNumber : "none", graphTitleFontSize: 2 };
16
17 defCanvasWidth=600;
18 defCanvasHeight=300;
19
20 var mydata2 = [
21 {
22 value : 30,
23 color: "#D97041",
24 title : "data1"
25 },
26 {
27 value : 90,
28 color: "#C7604C",
29 title : "data2"
30 },
31 {
32 value : 24,
33 color: "#21323D",
34 title : "data3"
35 },
36 {
37 value : 58,
38 color: "#9D9B7F",
39 title : "data4"
40 },
41 {
42 value : 82,
43 color: "#7D4F6D",
44 title : "data5"
45 },
46 {
47 value : 8,
48 color: "#584A5E",
49 title : "data6"
50 }
51 ];
52
53
54 var startWithDataset =1;
55 var startWithData =1;
56
57 var opt1 = {
58 animationStartWithDataset : startWithDataset,
59 animationStartWithData : startWithData,
60 animateRotate : true,
61 animateScale : false,
62 animationByData : false,
63 animationSteps : 50,
64 canvasBorders : true,
65 canvasBordersWidth : 3,
66 canvasBordersColor : "black",
67 graphTitle : "animateRotate=true - animateScale=false - animationByData=fa lse",
68 legend : true,
69 inGraphDataShow : true,
70 animationEasing: "linear",
71 annotateDisplay : true,
72 spaceBetweenBar : 5,
73 graphTitleFontSize: 18
74
75 }
76
77 var opt1b = {
78 animationStartWithDataset : startWithDataset,
79 animationStartWithData : startWithData,
80 animateRotate : true,
81 animateScale : false,
82 animationByData : true,
83 animationSteps : 50,
84 canvasBorders : true,
85 canvasBordersWidth : 3,
86 canvasBordersColor : "black",
87 graphTitle : "animateRotate=true - animateScale=false - animationByData=tr ue",
88 legend : true,
89 inGraphDataShow : true,
90 animationEasing: "linear",
91 annotateDisplay : true,
92 spaceBetweenBar : 5,
93 graphTitleFontSize: 18
94
95 }
96
97 var opt1c = {
98 animationStartWithDataset : startWithDataset,
99 animationStartWithData : startWithData,
100 animateRotate : true,
101 animateScale : false,
102 animationByData : "ByArc",
103 animationSteps : 50,
104 canvasBorders : true,
105 canvasBordersWidth : 3,
106 canvasBordersColor : "black",
107 graphTitle : "animateRotate=true - animateScale=false - animationByData='B yArc'",
108 legend : true,
109 inGraphDataShow : true,
110 animationEasing: "linear",
111 annotateDisplay : true,
112 spaceBetweenBar : 5,
113 graphTitleFontSize: 18
114
115 }
116
117 var opt2 = {
118 animationStartWithDataset : startWithDataset,
119 animationStartWithData : startWithData,
120 animateRotate : false,
121 animateScale : true,
122 animationByData : false,
123 animationSteps : 50,
124 animationEasing: "linear",
125 canvasBorders : true,
126 canvasBordersWidth : 3,
127 canvasBordersColor : "black",
128 graphTitle : "animateRotate=false - animateScale=true",
129 legend : true,
130 inGraphDataShow : true,
131 annotateDisplay : true,
132 spaceBetweenBar : 5,
133 graphTitleFontSize: 18
134
135 }
136
137 var opt3 = {
138 animationStartWithDataset : startWithDataset,
139 animationStartWithData : startWithData,
140 animateRotate : true,
141 animateScale : true,
142 animationByData : false,
143 animationSteps : 50,
144 animationEasing: "linear",
145 canvasBorders : true,
146 canvasBordersWidth : 3,
147 canvasBordersColor : "black",
148 graphTitle : "animateRotate=true - animateScale=true - animationByData=fal se",
149 legend : true,
150 inGraphDataShow : true,
151 annotateDisplay : true,
152 spaceBetweenBar : 5,
153 graphTitleFontSize: 18
154 }
155
156 var opt3b = {
157 animationStartWithDataset : startWithDataset,
158 animationStartWithData : startWithData,
159 animateRotate : true,
160 animateScale : true,
161 animationByData : true,
162 animationSteps : 50,
163 animationEasing: "linear",
164 canvasBorders : true,
165 canvasBordersWidth : 3,
166 canvasBordersColor : "black",
167 graphTitle : "animateRotate=true - animateScale=true - animationByData=tru e",
168 legend : true,
169 inGraphDataShow : true,
170 annotateDisplay : true,
171 spaceBetweenBar : 5,
172 graphTitleFontSize: 18
173 }
174 var opt3c = {
175 animationStartWithDataset : startWithDataset,
176 animationStartWithData : startWithData,
177 animateRotate : true,
178 animateScale : true,
179 animationByData : "ByArc",
180 animationSteps : 50,
181 animationEasing: "linear",
182 canvasBorders : true,
183 canvasBordersWidth : 3,
184 canvasBordersColor : "black",
185 graphTitle : "animateRotate=true - animateScale=true - animationByData='By Arc'",
186 legend : true,
187 inGraphDataShow : true,
188 annotateDisplay : true,
189 spaceBetweenBar : 5,
190 graphTitleFontSize: 18
191 }
192
193
194
195
196
197 </SCRIPT>
198
199
200 <html>
201 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
202 <head>
203 <title>Demo ChartNew.js</title>
204 </head>
205 <body>
206
207 <center>
208 <FONT SIZE=6><B>Demo of ChartNew.js !</B></FONT> <BR>
209
210 <script>
211
212 document.write("<canvas id=\"canvas_Doughnut1\" height=\""+defCanvasHeight+" \" width=\""+defCanvasWidth+"\"></canvas>");
213 document.write("<canvas id=\"canvas_Doughnut1b\" height=\""+defCanvasHeight+ "\" width=\""+defCanvasWidth+"\"></canvas>");
214 document.write("<canvas id=\"canvas_Doughnut1c\" height=\""+defCanvasHeight+ "\" width=\""+defCanvasWidth+"\"></canvas>");
215 document.write("<canvas id=\"canvas_Doughnut2\" height=\""+defCanvasHeight+" \" width=\""+defCanvasWidth+"\"></canvas>");
216 document.write("<canvas id=\"canvas_Doughnut3\" height=\""+defCanvasHeight+" \" width=\""+defCanvasWidth+"\"></canvas>");
217 document.write("<canvas id=\"canvas_Doughnut3b\" height=\""+defCanvasHeight+ "\" width=\""+defCanvasWidth+"\"></canvas>");
218 document.write("<canvas id=\"canvas_Doughnut3c\" height=\""+defCanvasHeight+ "\" width=\""+defCanvasWidth+"\"></canvas>");
219
220 window.onload = function() {
221
222
223 var myDoughnut = new Chart(document.getElementById("canvas_Doughnut1").getCo ntext("2d")).Doughnut(mydata2,opt1);
224 var myDoughnut = new Chart(document.getElementById("canvas_Doughnut1b").getC ontext("2d")).Doughnut(mydata2,opt1b);
225 var myDoughnut = new Chart(document.getElementById("canvas_Doughnut1c").getC ontext("2d")).Doughnut(mydata2,opt1c);
226 var myDoughnut = new Chart(document.getElementById("canvas_Doughnut2").getCo ntext("2d")).Doughnut(mydata2,opt2);
227 var myDoughnut = new Chart(document.getElementById("canvas_Doughnut3").getCo ntext("2d")).Doughnut(mydata2,opt3);
228 var myDoughnut = new Chart(document.getElementById("canvas_Doughnut3b").getC ontext("2d")).Doughnut(mydata2,opt3b);
229 var myDoughnut = new Chart(document.getElementById("canvas_Doughnut3c").getC ontext("2d")).Doughnut(mydata2,opt3c);
230
231 }
232
233 </script>
234 </body>
235 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698