OLD | NEW |
| (Empty) |
1 <!doctype html> | |
2 | |
3 | |
4 | |
5 | |
6 <!--[if lte IE 8]><SCRIPT src='source/excanvas.js'></script><![endif]--><SCRIPT
src='ChartNew.js'></script> | |
7 | |
8 | |
9 <SCRIPT> | |
10 | |
11 defCanvasWidth=1200; | |
12 defCanvasHeight=600; | |
13 | |
14 var radarChartData = { | |
15 labels : ["Concentration","Flexibility","Dedication","Designing","Coding
","Organizing","TeamWork"], | |
16 datasets : [ | |
17 | |
18 { | |
19 fillColor : "rgba(17, 163, 71, 0.8)", | |
20 strokeColor : "rgba(151,187,205,1)", | |
21 pointColor : "rgba(151,187,205,1)", | |
22 pointStrokeColor : "#fff", | |
23 data : [58,58,100,59,66,67,84] | |
24 } | |
25 ] | |
26 | |
27 } | |
28 var optionschart = { | |
29 scaleOverlay : false, | |
30 scaleOverride : true, | |
31 scaleSteps : 25, | |
32 scaleStepWidth : 4, | |
33 scaleStartValue : 0, | |
34 annotateDisplay : true, | |
35 savePng : true | |
36 // scaleShowLabels : true, | |
37 } | |
38 | |
39 var mydata1 = { | |
40 labels : ["January","February","March","April","May","June","July"], | |
41 datasets : [ | |
42 { | |
43 fillColor : "rgba(220,220,220,0.5)", | |
44 strokeColor : "rgba(220,220,220,1)", | |
45 pointColor : "rgba(220,220,220,1)", | |
46 pointStrokeColor : "#fff", | |
47 data : [0.65,0.59,0.90,0.81,0.56,0.55,0.40], | |
48 title : "pFirst data" | |
49 }, | |
50 { | |
51 fillColor : "rgba(151,187,205,0.5)", | |
52 strokeColor : "rgba(151,187,205,1)", | |
53 pointColor : "rgba(151,187,205,1)", | |
54 pointStrokeColor : "#fff", | |
55 data : [0.28,0.48,0.40,0.19,0.96,0.27,1.00], | |
56 title : "pSecond data" | |
57 } | |
58 ] | |
59 } | |
60 | |
61 | |
62 var mydata2 = [ | |
63 { | |
64 value : 30, | |
65 color: "#D97041", | |
66 title : "data1" | |
67 }, | |
68 { | |
69 value : 90, | |
70 color: "#C7604C", | |
71 title : "data2" | |
72 }, | |
73 { | |
74 value : 24, | |
75 color: "#21323D", | |
76 title : "data3" | |
77 }, | |
78 { | |
79 value : 58, | |
80 color: "#9D9B7F", | |
81 title : "data4" | |
82 }, | |
83 { | |
84 value : 82, | |
85 color: "#7D4F6D", | |
86 title : "data5" | |
87 }, | |
88 { | |
89 value : 8, | |
90 color: "#584A5E", | |
91 title : "data6" | |
92 } | |
93 ] | |
94 | |
95 | |
96 var mydata3 = [ | |
97 { | |
98 value : 70, | |
99 color: "rgba(151,187,205,1)", | |
100 title : "data1" | |
101 } | |
102 ] | |
103 | |
104 var mydata4 = [ | |
105 { | |
106 value : 70, | |
107 color: "rgba(151,187,205,1)", | |
108 title : "data1" | |
109 }, | |
110 { | |
111 value : 30, | |
112 color: "rgba(220,220,220,1)", | |
113 title : "data1" | |
114 } | |
115 ] | |
116 | |
117 var mydatan1 = { | |
118 labels : ["January","February","March","April","May","June","July"], | |
119 datasets : [ | |
120 { | |
121 fillColor : "rgba(220,220,220,0.5)", | |
122 strokeColor : "rgba(220,220,220,1)", | |
123 pointColor : "rgba(220,220,220,1)", | |
124 pointStrokeColor : "#fff", | |
125 data : [-65,-59,-90,-81,-56,-55,-40], | |
126 title : "First data" | |
127 }, | |
128 { | |
129 fillColor : "rgba(151,187,205,0.5)", | |
130 strokeColor : "rgba(151,187,205,1)", | |
131 pointColor : "rgba(151,187,205,1)", | |
132 pointStrokeColor : "#fff", | |
133 data : [-28,-48,-40,-19,-96,-27,-100], | |
134 title : "Second data" | |
135 } | |
136 ] | |
137 } | |
138 | |
139 var mydatan1b = { | |
140 labels : ["January","February","March","April","May","June","July"], | |
141 datasets : [ | |
142 { | |
143 fillColor : "rgba(220,220,220,0.5)", | |
144 strokeColor : "rgba(220,220,220,1)", | |
145 pointColor : "rgba(220,220,220,1)", | |
146 pointStrokeColor : "#fff", | |
147 data : [-565,-559,-590,-581,-556,-555,-540], | |
148 title : "First data" | |
149 }, | |
150 { | |
151 fillColor : "rgba(151,187,205,0.5)", | |
152 strokeColor : "rgba(151,187,205,1)", | |
153 pointColor : "rgba(151,187,205,1)", | |
154 pointStrokeColor : "#fff", | |
155 data : [-528,-548,-540,-519,-596,-527,-580], | |
156 title : "Second data" | |
157 } | |
158 ] | |
159 } | |
160 | |
161 var mydatam1 = { | |
162 labels : ["January","February","March","April","May","June","July"], | |
163 datasets : [ | |
164 { | |
165 fillColor : "rgba(220,220,220,0.5)", | |
166 strokeColor : "rgba(220,220,220,1)", | |
167 pointColor : "rgba(220,220,220,1)", | |
168 pointStrokeColor : "#fff", | |
169 data : [65,-59,90,-81,-56,55,40], | |
170 title : "First data" | |
171 }, | |
172 { | |
173 fillColor : "rgba(151,187,205,0.5)", | |
174 strokeColor : "rgba(151,187,205,1)", | |
175 pointColor : "rgba(151,187,205,1)", | |
176 pointStrokeColor : "#fff", | |
177 data : [-28,-48,40,19,-96,27,-80], | |
178 title : "Second data" | |
179 } | |
180 ] | |
181 } | |
182 | |
183 var mydata1b = { | |
184 labels : ["January","February","March","April","May","June","July"], | |
185 datasets : [ | |
186 { | |
187 fillColor : "rgba(220,220,220,0.5)", | |
188 strokeColor : "rgba(220,220,220,1)", | |
189 pointColor : "rgba(220,220,220,1)", | |
190 pointStrokeColor : "#fff", | |
191 data : [565,559,590,581,556,555,540], | |
192 title : "First data" | |
193 }, | |
194 { | |
195 fillColor : "rgba(151,187,205,0.5)", | |
196 strokeColor : "rgba(151,187,205,1)", | |
197 pointColor : "rgba(151,187,205,1)", | |
198 pointStrokeColor : "#fff", | |
199 data : [528,548,540,519,596,527,580], | |
200 title : "Second data" | |
201 } | |
202 ] | |
203 } | |
204 | |
205 var mydatan2 = [ | |
206 { | |
207 value : -30, | |
208 color: "#D97041", | |
209 title : "data1" | |
210 }, | |
211 { | |
212 value : -90, | |
213 color: "#C7604C", | |
214 title : "data2" | |
215 }, | |
216 { | |
217 value : -24, | |
218 color: "#21323D", | |
219 title : "data3" | |
220 }, | |
221 { | |
222 value : -58, | |
223 color: "#9D9B7F", | |
224 title : "data4" | |
225 }, | |
226 { | |
227 value : -82, | |
228 color: "#7D4F6D", | |
229 title : "data5" | |
230 }, | |
231 { | |
232 value : -8, | |
233 color: "#584A5E", | |
234 title : "data6" | |
235 } | |
236 ] | |
237 | |
238 | |
239 var mydatan3 = [ | |
240 { | |
241 value : -70, | |
242 color: "rgba(151,187,205,1)", | |
243 title : "data1" | |
244 } | |
245 ] | |
246 | |
247 var mydatan4 = [ | |
248 { | |
249 value : -70, | |
250 color: "rgba(151,187,205,1)", | |
251 title : "data1" | |
252 }, | |
253 { | |
254 value : -30, | |
255 color: "rgba(220,220,220,1)", | |
256 title : "data1" | |
257 } | |
258 ] | |
259 | |
260 var mydatam2 = [ | |
261 { | |
262 value : -30, | |
263 color: "#D97041", | |
264 title : "data1" | |
265 }, | |
266 { | |
267 value : 90, | |
268 color: "#C7604C", | |
269 title : "data2" | |
270 }, | |
271 { | |
272 value : -24, | |
273 color: "#21323D", | |
274 title : "data3" | |
275 }, | |
276 { | |
277 value : 58, | |
278 color: "#9D9B7F", | |
279 title : "data4" | |
280 }, | |
281 { | |
282 value : -82, | |
283 color: "#7D4F6D", | |
284 title : "data5" | |
285 }, | |
286 { | |
287 value : -8, | |
288 color: "#584A5E", | |
289 title : "data6" | |
290 } | |
291 ] | |
292 | |
293 | |
294 var mydatam3 = [ | |
295 { | |
296 value : -70, | |
297 color: "rgba(151,187,205,1)", | |
298 title : "data1" | |
299 } | |
300 ] | |
301 | |
302 var mydatam4 = [ | |
303 { | |
304 value : -70, | |
305 color: "rgba(151,187,205,1)", | |
306 title : "data1" | |
307 }, | |
308 { | |
309 value : 30, | |
310 color: "rgba(220,220,220,1)", | |
311 title : "data1" | |
312 } | |
313 ] | |
314 | |
315 | |
316 var allopts = { | |
317 //Boolean - If we show the scale above the chart data -> Default val
ue Changed | |
318 scaleOverlay : true, | |
319 //Boolean - If we want to override with a hard coded scale | |
320 scaleOverride : false, | |
321 //** Required if scaleOverride is true ** | |
322 //Number - The number of steps in a hard coded scale | |
323 scaleSteps : null, | |
324 //Number - The value jump in the hard coded scale | |
325 scaleStepWidth : null, | |
326 //Number - The scale starting value | |
327 scaleStartValue : null, | |
328 //String - Colour of the scale line | |
329 scaleLineColor : "rgba(0,0,0,.1)", | |
330 //Number - Pixel width of the scale line | |
331 scaleLineWidth : 1, | |
332 //Boolean - Whether to show labels on the scale | |
333 scaleShowLabels : true, | |
334 //Interpolated JS string - can access value | |
335 scaleLabel : "<%=value%>", | |
336 //String - Scale label font declaration for the scale label | |
337 scaleFontFamily : "'Arial'", | |
338 //Number - Scale label font size in pixels | |
339 scaleFontSize : 12, | |
340 //String - Scale label font weight style | |
341 scaleFontStyle : "normal", | |
342 //String - Scale label font colour | |
343 scaleFontColor : "#666", | |
344 ///Boolean - Whether grid lines are shown across the chart | |
345 scaleShowGridLines : true, | |
346 //String - Colour of the grid lines | |
347 scaleGridLineColor : "rgba(0,0,0,.05)", | |
348 //Number - Width of the grid lines | |
349 scaleGridLineWidth : 1, | |
350 //Boolean - Whether the line is curved between points -> Default value C
hanged | |
351 bezierCurve : false, | |
352 //Boolean - Whether to show a dot for each point -> Default value Change
d | |
353 pointDot : false, | |
354 //Number - Radius of each point dot in pixels | |
355 pointDotRadius : 3, | |
356 //Number - Pixel width of point dot stroke | |
357 pointDotStrokeWidth : 1, | |
358 //Boolean - Whether to show a stroke for datasets | |
359 datasetStroke : true, | |
360 //Number - Pixel width of dataset stroke | |
361 datasetStrokeWidth : 2, | |
362 //Boolean - Whether to fill the dataset with a colour | |
363 datasetFill : true, | |
364 //Boolean - Whether to animate the chart -> Default value ch
anged | |
365 animation : false, | |
366 //Number - Number of animation steps | |
367 animationSteps : 60, | |
368 //String - Animation easing effect | |
369 animationEasing : "easeOutQuart", | |
370 //Function - Fires when the animation is complete | |
371 onAnimationComplete : null, | |
372 canvasBorders : true, | |
373 canvasBordersWidth : 30, | |
374 canvasBordersColor : "black", | |
375 yAxisLeft : true, | |
376 yAxisRight : true, | |
377 yAxisLabel : "Y axis", | |
378 yAxisFontFamily : "'Arial'", | |
379 yAxisFontSize : 50, | |
380 yAxisFontStyle : "normal", | |
381 yAxisFontColor : "#666", | |
382 xAxisLabel : "", | |
383 xAxisFontFamily : "'Arial'", | |
384 xAxisFontSize : 16, | |
385 xAxisFontStyle : "normal", | |
386 xAxisFontColor : "#666", | |
387 yAxisUnit : "UNIT", | |
388 yAxisUnitFontFamily : "'Arial'", | |
389 yAxisUnitFontSize : 12, | |
390 yAxisUnitFontStyle : "normal", | |
391 yAxisUnitFontColor : "#666", | |
392 graphTitle : "", | |
393 graphTitleFontFamily : "'Arial'", | |
394 graphTitleFontSize : 24, | |
395 graphTitleFontStyle : "bold", | |
396 graphTitleFontColor : "#666", | |
397 graphSubTitle : "", | |
398 graphSubTitleFontFamily : "'Arial'", | |
399 graphSubTitleFontSize : 18, | |
400 graphSubTitleFontStyle : "normal", | |
401 graphSubTitleFontColor : "#666", | |
402 footNote : "Footnote", | |
403 footNoteFontFamily : "'Arial'", | |
404 footNoteFontSize : 50, | |
405 footNoteFontStyle : "bold", | |
406 footNoteFontColor : "#666", | |
407 legend : true, | |
408 legendFontFamily : "'Arial'", | |
409 legendFontSize : 18, | |
410 legendFontStyle : "normal", | |
411 legendFontColor : "#666", | |
412 legendBlockSize : 30, | |
413 legendBorders : true, | |
414 legendBordersWidth : 30, | |
415 legendBordersColor : "#666", | |
416 // ADDED PARAMETERS | |
417 graphMin : "DEFAULT", | |
418 graphMax : "DEFAULT" | |
419 | |
420 } | |
421 | |
422 var noopts = { | |
423 nooptions : "", | |
424 yAxisRight : true, | |
425 scaleTickSizeLeft : 0, | |
426 scaleTickSizeRight : 0, | |
427 scaleTickSizeBottom : 0, | |
428 scaleTickSizeTop : 1 | |
429 | |
430 | |
431 } | |
432 | |
433 var onlyborderopts = { | |
434 canvasBorders : true, | |
435 canvasBordersWidth : 3, | |
436 canvasBordersColor : "black" | |
437 | |
438 } | |
439 | |
440 var nooptions = { } | |
441 | |
442 var newopts = { | |
443 inGraphDataShow : true, | |
444 datasetFill : true, | |
445 scaleLabel: "<%=value%>", | |
446 scaleTickSizeRight : 5, | |
447 scaleTickSizeLeft : 5, | |
448 scaleTickSizeBottom : 5, | |
449 scaleTickSizeTop : 5, | |
450 scaleFontSize : 16, | |
451 canvasBorders : true, | |
452 canvasBordersWidth : 3, | |
453 canvasBordersColor : "black", | |
454 graphTitle : "Graph Title", | |
455 graphTitleFontFamily : "'Arial'", | |
456 graphTitleFontSize : 24, | |
457 graphTitleFontStyle : "bold", | |
458 graphTitleFontColor : "#666", | |
459 graphSubTitle : "Graph Sub Title", | |
460 graphSubTitleFontFamily : "'Arial'", | |
461 graphSubTitleFontSize : 18, | |
462 graphSubTitleFontStyle : "normal", | |
463 graphSubTitleFontColor : "#666", | |
464 footNote : "Footnote for the graph", | |
465 footNoteFontFamily : "'Arial'", | |
466 footNoteFontSize : 8, | |
467 footNoteFontStyle : "bold", | |
468 footNoteFontColor : "#666", | |
469 legend : true, | |
470 legendFontFamily : "'Arial'", | |
471 legendFontSize : 12, | |
472 legendFontStyle : "normal", | |
473 legendFontColor : "#666", | |
474 legendBlockSize : 15, | |
475 legendBorders : true, | |
476 legendBordersWidth : 1, | |
477 legendBordersColors : "#666", | |
478 yAxisLeft : true, | |
479 yAxisRight : false, | |
480 xAxisBottom : true, | |
481 xAxisTop : false, | |
482 yAxisLabel : "Y Axis Label", | |
483 yAxisFontFamily : "'Arial'", | |
484 yAxisFontSize : 16, | |
485 yAxisFontStyle : "normal", | |
486 yAxisFontColor : "#666", | |
487 xAxisLabel : "pX Axis Label", | |
488 xAxisFontFamily : "'Arial'", | |
489 xAxisFontSize : 16, | |
490 xAxisFontStyle : "normal", | |
491 xAxisFontColor : "#666", | |
492 yAxisUnit : "Y Unit", | |
493 yAxisUnitFontFamily : "'Arial'", | |
494 yAxisUnitFontSize : 8, | |
495 yAxisUnitFontStyle : "normal", | |
496 yAxisUnitFontColor : "#666", | |
497 annotateDisplay : true, | |
498 spaceTop : 0, | |
499 spaceBottom : 0, | |
500 spaceLeft : 0, | |
501 spaceRight : 0, | |
502 logarithmic: false, | |
503 // showYAxisMin : false, | |
504 rotateLabels : "smart", | |
505 xAxisSpaceOver : 0, | |
506 xAxisSpaceUnder : 0, | |
507 xAxisLabelSpaceAfter : 0, | |
508 xAxisLabelSpaceBefore : 0, | |
509 legendBordersSpaceBefore : 0, | |
510 legendBordersSpaceAfter : 0, | |
511 footNoteSpaceBefore : 0, | |
512 footNoteSpaceAfter : 0, | |
513 startAngle : 0, | |
514 dynamicDisplay : true | |
515 } | |
516 | |
517 | |
518 | |
519 var crosstxt1 = { | |
520 crossText : ["Up left","up center","up right","mid left","mid center","mid
right","down left","down center","down right"], | |
521 crossTextOverlay : [true], | |
522 crossTextFontFamily : ["'Arial'"], | |
523 crossTextFontSize : [20], | |
524 crossTextFontColor : ["black"], | |
525 crossTextFontStyle : ["italic"], | |
526 crossTextRelativePosX : [0,-2,4,0,-2,4,0,-2,4], | |
527 crossTextRelativePosY : [0,0,0,-2,-2,-2,4,4,4], | |
528 crossTextBaseline: ["default"], | |
529 crossTextAlign : ["default"], | |
530 crossTextPosX : [0,0,0,0,0,0,0,0,0], | |
531 crossTextPosY : [0,0,0,0,0,0,0,0,0], | |
532 crossTextAngle : [0], | |
533 canvasBorders : true, | |
534 canvasBordersWidth : 3, | |
535 canvasBordersColor : "black", | |
536 graphTitle : "Draw text through the graph", | |
537 graphTitleFontFamily : "'Arial'", | |
538 graphTitleFontSize : 24, | |
539 graphTitleFontStyle : "bold", | |
540 graphTitleFontColor : "#666", | |
541 dynamicDisplay : true | |
542 } | |
543 | |
544 var crosstxt2 = { | |
545 crossText : ["Up left","up center","up right","mid left","mid center","mid
right","down left","down center","down right"], | |
546 crossTextOverlay : [true], | |
547 crossTextFontFamily : ["'Arial'"], | |
548 crossTextFontSize : [20], | |
549 crossTextFontColor : ["black"], | |
550 crossTextFontStyle : ["italic"], | |
551 crossTextRelativePosX : [1,2,3,1,2,3,1,2,3], | |
552 crossTextRelativePosY : [1,1,1,2,2,2,3,3,3], | |
553 crossTextBaseline: ["default"], | |
554 crossTextAlign : ["default"], | |
555 crossTextPosX : [0,0,0,0,0,0,0,0,0], | |
556 crossTextPosY : [0,0,0,0,0,0,0,0,0], | |
557 crossTextAngle : [0], | |
558 canvasBorders : true, | |
559 canvasBordersWidth : 3, | |
560 canvasBordersColor : "black", | |
561 graphTitle : "Draw text through the graph", | |
562 graphTitleFontFamily : "'Arial'", | |
563 graphTitleFontSize : 24, | |
564 graphTitleFontStyle : "bold", | |
565 graphTitleFontColor : "#666", | |
566 footNote : " " , | |
567 spaceTop : 30, | |
568 spaceBottom : 30, | |
569 spaceLeft : 30, | |
570 spaceRight : 30, | |
571 dynamicDisplay : true | |
572 } | |
573 | |
574 function dispPct(numtxt,valtxt,ctx,config,posX,posY,borderX,borderY,overlay,data
,animPC){ | |
575 // alert("INIT"); | |
576 return(Math.round(100*animPC)); | |
577 } | |
578 | |
579 var crosstxt3 = { | |
580 animationEasing : "linear", | |
581 crossText : ["%call function..."], | |
582 crossTextOverlay : [true], | |
583 crossTextFontSize : [50], | |
584 crossTextFontColor : ["black"], | |
585 crossTextRelativePosX : [2], | |
586 crossTextRelativePosY : [2], | |
587 crossTextFunction : dispPct, | |
588 graphTitle : "Draw text through the graph", | |
589 graphTitleFontFamily : "'Arial'", | |
590 graphTitleFontSize : 24, | |
591 graphTitleFontStyle : "bold", | |
592 graphTitleFontColor : "#666", | |
593 canvasBorders : true, | |
594 canvasBordersWidth : 3, | |
595 canvasBordersColor : "black", | |
596 spaceTop : 30, | |
597 spaceBottom : 30, | |
598 spaceLeft : 30, | |
599 spaceRight : 30, | |
600 startAngle : 180, | |
601 dynamicDisplay : true | |
602 } | |
603 | |
604 function dispPct2(numtxt,valtxt,ctx,config,posX,posY,borderX,borderY,overlay,dat
a,animPC){ | |
605 // alert("INIT"); | |
606 return(Math.round(animPC*data[0].value)); | |
607 } | |
608 | |
609 var crosstxt4 = { | |
610 animationEasing : "linear", | |
611 crossText : ["%call function..."], | |
612 crossTextOverlay : [true], | |
613 crossTextFontSize : [50], | |
614 crossTextFontColor : ["black"], | |
615 crossTextRelativePosX : [2], | |
616 crossTextRelativePosY : [2], | |
617 crossTextFunction : dispPct2, | |
618 canvasBorders : true, | |
619 canvasBordersWidth : 3, | |
620 canvasBordersColor : "black", | |
621 graphTitle : "Draw text through the graph", | |
622 graphTitleFontFamily : "'Arial'", | |
623 graphTitleFontSize : 24, | |
624 graphTitleFontStyle : "bold", | |
625 graphTitleFontColor : "#666", | |
626 spaceTop : 30, | |
627 spaceBottom : 30, | |
628 spaceLeft : 30, | |
629 spaceRight : 30, | |
630 startAngle : 180, | |
631 dynamicDisplay : true | |
632 } | |
633 | |
634 | |
635 | |
636 </SCRIPT> | |
637 | |
638 | |
639 <html> | |
640 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> | |
641 <head> | |
642 <title>Demo ChartNew.js</title> | |
643 | |
644 </head> | |
645 <body> | |
646 | |
647 <!div id="divCursor" style="position:absolute"> <!/div> | |
648 | |
649 <center> | |
650 <FONT SIZE=6><B>Demo of ChartNew.js !</B></FONT> <BR> | |
651 | |
652 <script> | |
653 | |
654 | |
655 document.write("<canvas id=\"canvas_radar\" height=\""+defCanvasHeight+"\"
width=\""+defCanvasWidth+"\"></canvas>"); | |
656 document.write("<canvas id=\"canvas_line\" height=\""+defCanvasHeight+"\"
width=\""+defCanvasWidth+"\"></canvas>"); | |
657 document.write("<canvas id=\"canvas_bar\" height=\""+defCanvasHeight+"\" w
idth=\""+defCanvasWidth+"\"></canvas>"); | |
658 document.write("<canvas id=\"canvas_stackedbar\" height=\""+defCanvasHeigh
t+"\" width=\""+defCanvasWidth+"\"></canvas>"); | |
659 document.write("<canvas id=\"canvas_horizontalbar\" height=\""+defCanvasHe
ight+"\" width=\""+defCanvasWidth+"\"></canvas>"); | |
660 document.write("<canvas id=\"canvas_horizontalstackedbar\" height=\""+defC
anvasHeight+"\" width=\""+defCanvasWidth+"\"></canvas>"); | |
661 document.write("<canvas id=\"canvas_polararea\" height=\""+defCanvasHeight
+"\" width=\""+defCanvasWidth+"\"></canvas>"); | |
662 document.write("<canvas id=\"canvas_pie\" height=\""+defCanvasHeight+"\" w
idth=\""+defCanvasWidth+"\"></canvas>"); | |
663 document.write("<canvas id=\"canvas_doughnut\" height=\""+defCanvasHeight+
"\" width=\""+defCanvasWidth+"\"></canvas>"); | |
664 document.write("<canvas id=\"canvas_doughnut2\" height=\""+defCanvasHeight
+"\" width=\""+defCanvasWidth+"\"></canvas>"); | |
665 document.write("<canvas id=\"canvas_doughnut3\" height=\""+defCanvasHeight
+"\" width=\""+defCanvasWidth+"\"></canvas>"); | |
666 document.write("<canvas id=\"canvas_pie_with_text_1\" height=\""+defCanvas
Height+"\" width=\""+defCanvasWidth+"\"></canvas>"); | |
667 document.write("<canvas id=\"canvas_pie_with_text_2\" height=\""+defCanvas
Height+"\" width=\""+defCanvasWidth+"\"></canvas>"); | |
668 | |
669 | |
670 setopts=allopts; | |
671 setopts=onlyborderopts; | |
672 setopts=noopts; | |
673 setopts=newopts; | |
674 // setopts=nooptions; | |
675 | |
676 | |
677 window.onload = function() { | |
678 | |
679 | |
680 if(1==1) { | |
681 var myLine = new Chart(document.getElementById("canvas_line").getContext("2d
")).Line(mydata1,setopts); | |
682 var myLine = new Chart(document.getElementById("canvas_bar").getContext("2d"
)).Bar(mydata1,setopts); | |
683 var myLine = new Chart(document.getElementById("canvas_stackedbar").getConte
xt("2d")).StackedBar(mydata1,setopts); | |
684 var myLine = new Chart(document.getElementById("canvas_horizontalbar").getCo
ntext("2d")).HorizontalBar(mydata1,setopts); | |
685 var myLine = new Chart(document.getElementById("canvas_horizontalstackedbar"
).getContext("2d")).HorizontalStackedBar(mydata1,setopts); | |
686 var myLine = new Chart(document.getElementById("canvas_radar").getContext("2
d")).Radar(mydata1,setopts); | |
687 | |
688 | |
689 var myLine = new Chart(document.getElementById("canvas_polararea").getContex
t("2d")).PolarArea(mydata2,setopts); | |
690 var myLine = new Chart(document.getElementById("canvas_pie").getContext("2d"
)).Pie(mydata2,setopts); | |
691 var myLine = new Chart(document.getElementById("canvas_doughnut").getContext
("2d")).Doughnut(mydata2,setopts); | |
692 var myLine = new Chart(document.getElementById("canvas_doughnut2").getContex
t("2d")).Doughnut(mydata3,crosstxt3); | |
693 var myLine = new Chart(document.getElementById("canvas_doughnut3").getContex
t("2d")).Doughnut(mydata4,crosstxt4); | |
694 var myLine = new Chart(document.getElementById("canvas_pie_with_text_1").get
Context("2d")).Pie(mydata2,crosstxt1); | |
695 var myLine = new Chart(document.getElementById("canvas_pie_with_text_2").get
Context("2d")).Pie(mydata2,crosstxt2); | |
696 } | |
697 | |
698 } | |
699 | |
700 </script> | |
701 </body> | |
702 </html> | |
OLD | NEW |