OLD | NEW |
| (Empty) |
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> | |
2 <html> | |
3 <head> | |
4 <meta http-equiv="content-type" content="text/html; charset=windows-1250"> | |
5 <meta name="generator" content="PSPad editor, www.pspad.com"> | |
6 <title></title> | |
7 <!--[if lte IE 8]><SCRIPT src='source/excanvas.js'></script><![endif]--><SCRIP
T src='../ChartNew.js'></script> | |
8 <SCRIPT src='../Add-ins/gradientcolor.js'></script> | |
9 | |
10 </head> | |
11 <body> | |
12 <canvas id="mycanvas_bar" height="600" width="800"></canvas> | |
13 <canvas id="mycanvas_stackedbar" height="600" width="800"></canvas> | |
14 <canvas id="mycanvas_horizontalbar" height="600" width="800"></canvas> | |
15 <canvas id="mycanvas_horizontalstackedbar" height="600" width="800"></canvas> | |
16 <canvas id="mycanvas_pie" height="600" width="800"></canvas> | |
17 <canvas id="mycanvas_doughnut" height="600" width="800"></canvas> | |
18 <canvas id="mycanvas_polararea" height="600" width="800"></canvas> | |
19 <canvas id="mycanvas_line" height="600" width="800"></canvas> | |
20 <canvas id="mycanvas_radar" height="600" width="800"></canvas> | |
21 <script> | |
22 var BarLineData = { | |
23 labels : ["January","February","March","April","May","June","July"], | |
24 // labels : ["January"], | |
25 datasets : [ | |
26 { | |
27 fillColor : gradientColor, | |
28 gradientColors : ["#00FFFF 50%","green","yellow"], | |
29 strokeColor : "rgba(220,220,220,1)", | |
30 pointColor : "rgba(220,220,220,1)", | |
31 pointStrokeColor : "#fff", | |
32 data : [0.7,0.6,0.30,0.4,0.5,0.2,0.15], | |
33 // data : [0.7], | |
34 title : "Bar 1" | |
35 }, | |
36 { | |
37 fillColor : gradientColor, | |
38 gradientColors: ["red","yellow","blue"], | |
39 strokeColor : "rgba(151,187,205,1)", | |
40 pointColor : "rgba(151,187,205,1)", | |
41 pointStrokeColor : "#fff", | |
42 data : [0,0.5,0.1,0.7,1,0.8,1], | |
43 // data : [1], | |
44 title : "Bar 2" | |
45 }, | |
46 ] | |
47 } | |
48 | |
49 var HorizontalBarLineData = { | |
50 labels : ["January","February","March","April","May","June","July"], | |
51 datasets : [ | |
52 { | |
53 fillColor : gradientColor, | |
54 gradientColors : ["#00FFFF 50%","green","yellow"], | |
55 strokeColor : "rgba(220,220,220,1)", | |
56 pointColor : "rgba(220,220,220,1)", | |
57 pointStrokeColor : "#fff", | |
58 data : [0.7,0.6,0.30,0.4,0.5,0.2,0.15], | |
59 title : "Bar 1" | |
60 }, | |
61 { | |
62 fillColor : gradientColor, | |
63 gradientColors: ["red","yellow","blue"], | |
64 strokeColor : "rgba(151,187,205,1)", | |
65 pointColor : "rgba(151,187,205,1)", | |
66 pointStrokeColor : "#fff", | |
67 data : [1,1,1,1,1,1,0.3], | |
68 title : "Bar 2" | |
69 }, | |
70 ] | |
71 } | |
72 | |
73 var pieData = [ | |
74 { | |
75 value : 30, | |
76 color: gradientColor, | |
77 gradientColors: ["#00FFFF 50%","green","yellow"], | |
78 title : "data1" | |
79 }, | |
80 { | |
81 value : 90, | |
82 color: gradientColor, | |
83 gradientColors : ["red","yellow","blue"], | |
84 title : "data2" | |
85 }, | |
86 { | |
87 value : 24, | |
88 color: gradientColor, | |
89 gradientColors : ["#DC2424","#4A569D"], | |
90 title : "data3" | |
91 }, | |
92 { | |
93 value : 58, | |
94 color: gradientColor, | |
95 gradientColors : ["#24C6DC","#514A9D"], | |
96 title : "data4" | |
97 }, | |
98 { | |
99 value : 82, | |
100 color: gradientColor, | |
101 gradientColors : ["#085078","#85D8CE"], | |
102 title : "data5" | |
103 }, | |
104 { | |
105 value : 8, | |
106 color: gradientColor, | |
107 gradientColors : ["#3D7EAA","#FFE47A"], | |
108 title : "data6" | |
109 } | |
110 ]; | |
111 | |
112 | |
113 var opts= { | |
114 animation:false, | |
115 legendBlockSize : 40, | |
116 // legendFontSize : 40, | |
117 legend: true | |
118 }; | |
119 | |
120 window.onload = function() { | |
121 var myBar = new Chart(document.getElementById("mycanvas_bar").getContext("
2d")).Bar(BarLineData,opts); | |
122 var myStackedBar = new Chart(document.getElementById("mycanvas_stackedbar"
).getContext("2d")).StackedBar(BarLineData,opts); | |
123 var myHorizontalBar = new Chart(document.getElementById("mycanvas_horizont
albar").getContext("2d")).HorizontalBar(HorizontalBarLineData,opts); | |
124 var myHorizontalStackedBar = new Chart(document.getElementById("mycanvas_h
orizontalstackedbar").getContext("2d")).HorizontalStackedBar(HorizontalBarLineDa
ta,opts); | |
125 var myPie = new Chart(document.getElementById("mycanvas_pie").getContext("
2d")).Pie(pieData,opts); | |
126 var myDoughnut = new Chart(document.getElementById("mycanvas_doughnut").ge
tContext("2d")).Doughnut(pieData,opts); | |
127 var mypolararea = new Chart(document.getElementById("mycanvas_polararea").
getContext("2d")).PolarArea(pieData,opts); | |
128 var myline = new Chart(document.getElementById("mycanvas_line").getContext
("2d")).Line(BarLineData,opts); | |
129 var myradar = new Chart(document.getElementById("mycanvas_radar").getConte
xt("2d")).Radar(BarLineData,opts); | |
130 } | |
131 </script> | |
132 | |
133 </body> | |
134 </html> | |
OLD | NEW |