OLD | NEW |
| (Empty) |
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> | |
2 <html> | |
3 <script src="../ChartNew.js"></script> | |
4 | |
5 | |
6 <script> | |
7 var randomScalingFactor = function(){ return Math.round(Math.random()*10
0)}; | |
8 | |
9 var barChartData = { | |
10 labels : ["January","February","March","April","May","June","Jul
y"], | |
11 datasets : [ | |
12 { | |
13 fillColor : "rgba(220,220,220,0.5)", | |
14 strokeColor : "rgba(220,220,220,0.8)", | |
15 highlightFill: "rgba(220,220,220,0.75)", | |
16 highlightStroke: "rgba(220,220,220,1)", | |
17 data : [randomScalingFactor(),randomScalingFacto
r(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScal
ingFactor(),randomScalingFactor()] | |
18 }, | |
19 { | |
20 fillColor : "rgba(151,187,205,0.5)", | |
21 strokeColor : "rgba(151,187,205,0.8)", | |
22 highlightFill : "rgba(151,187,205,0.75)", | |
23 highlightStroke : "rgba(151,187,205,1)", | |
24 data : [randomScalingFactor(),randomScalingFacto
r(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScal
ingFactor(),randomScalingFactor()] | |
25 } | |
26 ] | |
27 | |
28 } | |
29 | |
30 </script> | |
31 <head> | |
32 | |
33 <title> | |
34 Responsive Chart | |
35 </title> | |
36 | |
37 <style type="text/css" media="screen"><!-- | |
38 #page | |
39 { | |
40 font-size: 11px; | |
41 font-family: Verdana, Geneva, Arial, sans-serif; | |
42 line-height: 14px; | |
43 text-align: left; | |
44 visibility: visible; | |
45 margin-top: 40px; | |
46 margin-right: auto; | |
47 margin-left: auto; | |
48 position: relative; | |
49 width: 85% | |
50 } | |
51 | |
52 #en_tete | |
53 { | |
54 font-size: 20px; | |
55 position: relative; | |
56 text-align: center; | |
57 font-family: verdana, geneva, arial, sans-serif; | |
58 font-size: 42px; | |
59 font-weight: bold | |
60 } | |
61 | |
62 #boite1 | |
63 { | |
64 font-size: 20px; | |
65 background-color: #f6f6b8; | |
66 position: relative; | |
67 text-align: center | |
68 } | |
69 | |
70 #boite2 | |
71 { | |
72 padding: 10px; | |
73 position: relative | |
74 } | |
75 | |
76 #boite3 | |
77 { | |
78 font-size: 20px; | |
79 background-color: #f6c3f6; | |
80 margin-top: 10px; | |
81 position: relative; | |
82 text-align: center | |
83 } | |
84 | |
85 | |
86 #boite5 | |
87 { | |
88 position: relative; | |
89 // padding: 10px; | |
90 margin-top: 10px; | |
91 width: 49%; | |
92 float: left | |
93 } | |
94 | |
95 #boite6 | |
96 { | |
97 position: relative; | |
98 // padding: 10px; | |
99 margin-top: 10px; | |
100 width: 49%; | |
101 float: left; | |
102 margin-left: 2%; | |
103 margin-bottom: 10px; | |
104 line-height: 16px | |
105 } | |
106 | |
107 | |
108 | |
109 | |
110 | |
111 --></style> | |
112 </head> | |
113 | |
114 <body> | |
115 <div align="center"> | |
116 <div id="en_tete"> | |
117 Responsive Chart | |
118 </div> | |
119 <div id="page"> | |
120 <div id="boite1"><BR>1st graph<BR><BR></div> | |
121 <div id="boite2"><center> | |
122 <canvas id="canvas1" height="300" width="600"></
canvas> | |
123 </center></div> | |
124 | |
125 <div id="boite3"><BR>Graph 2 & 3<BR><BR></div> | |
126 <div id="boite5"><center> | |
127 <canvas id="canvas2" height="300" width="600"></
canvas> | |
128 </center></div> | |
129 <div id="boite6"><center> | |
130 <canvas id="canvas3" height="300" width="600"></
canvas> | |
131 </center></div> | |
132 | |
133 </div> | |
134 </div> | |
135 <script> | |
136 window.onload = function(){ | |
137 var ctx1 = document.getElementById("canvas1").getContext("2d"); | |
138 window.myBar = new Chart(ctx1).Bar(barChartData, { | |
139 responsive : true, maintainAspectRatio : true | |
140 }); | |
141 var ctx2 = document.getElementById("canvas2").getContext("2d"); | |
142 window.myBar = new Chart(ctx2).Line(barChartData, { | |
143 responsive : true, maintainAspectRatio : true | |
144 }); | |
145 var ctx3 = document.getElementById("canvas3").getContext("2d"); | |
146 window.myBar = new Chart(ctx3).HorizontalBar(barChartData, { | |
147 responsive : true, maintainAspectRatio : true | |
148 }); | |
149 } | |
150 | |
151 </script> | |
152 | |
153 </body> | |
154 </html> | |
OLD | NEW |