OLD | NEW |
(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_Pie1\" height=\""+defCanvasHeight+"\" wi
dth=\""+defCanvasWidth+"\"></canvas>"); |
| 213 document.write("<canvas id=\"canvas_Pie1b\" height=\""+defCanvasHeight+"\" w
idth=\""+defCanvasWidth+"\"></canvas>"); |
| 214 document.write("<canvas id=\"canvas_Pie1c\" height=\""+defCanvasHeight+"\" w
idth=\""+defCanvasWidth+"\"></canvas>"); |
| 215 document.write("<canvas id=\"canvas_Pie2\" height=\""+defCanvasHeight+"\" wi
dth=\""+defCanvasWidth+"\"></canvas>"); |
| 216 document.write("<canvas id=\"canvas_Pie3\" height=\""+defCanvasHeight+"\" wi
dth=\""+defCanvasWidth+"\"></canvas>"); |
| 217 document.write("<canvas id=\"canvas_Pie3b\" height=\""+defCanvasHeight+"\" w
idth=\""+defCanvasWidth+"\"></canvas>"); |
| 218 document.write("<canvas id=\"canvas_Pie3c\" height=\""+defCanvasHeight+"\" w
idth=\""+defCanvasWidth+"\"></canvas>"); |
| 219 |
| 220 window.onload = function() { |
| 221 |
| 222 |
| 223 var myPie = new Chart(document.getElementById("canvas_Pie1").getContext("2d"
)).Pie(mydata2,opt1); |
| 224 var myPie = new Chart(document.getElementById("canvas_Pie1b").getContext("2d
")).Pie(mydata2,opt1b); |
| 225 var myPie = new Chart(document.getElementById("canvas_Pie1c").getContext("2d
")).Pie(mydata2,opt1c); |
| 226 var myPie = new Chart(document.getElementById("canvas_Pie2").getContext("2d"
)).Pie(mydata2,opt2); |
| 227 var myPie = new Chart(document.getElementById("canvas_Pie3").getContext("2d"
)).Pie(mydata2,opt3); |
| 228 var myPie = new Chart(document.getElementById("canvas_Pie3b").getContext("2d
")).Pie(mydata2,opt3b); |
| 229 var myPie = new Chart(document.getElementById("canvas_Pie3c").getContext("2d
")).Pie(mydata2,opt3c); |
| 230 |
| 231 } |
| 232 |
| 233 </script> |
| 234 </body> |
| 235 </html> |
OLD | NEW |