| 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 | 
|---|