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 |
| 15 |
| 16 var mydata1 = { |
| 17 labels : ["January","February","March","April","May","June","July"], |
| 18 datasets : [ |
| 19 { |
| 20 fillColor : "rgba(220,220,220,0.5)", |
| 21 strokeColor : "rgba(220,220,220,1)", |
| 22 pointColor : "rgba(220,220,220,1)", |
| 23 pointStrokeColor : "#fff", |
| 24 data : [0.65,0.59,0.90,0.81,0.56,0.55,0.40], |
| 25 title : "pFirst data" |
| 26 }, |
| 27 { |
| 28 fillColor : "rgba(151,187,205,0.5)", |
| 29 strokeColor : "rgba(151,187,205,1)", |
| 30 pointColor : "rgba(151,187,205,1)", |
| 31 pointStrokeColor : "#fff", |
| 32 data : [0.28,0.48,0.40,0.19,0.96,0.27,1.00], |
| 33 title : "pSecond data" |
| 34 } |
| 35 ] |
| 36 } |
| 37 |
| 38 |
| 39 var mydata2 = [ |
| 40 { |
| 41 value : 30, |
| 42 color: "#D97041", |
| 43 title : "data1" |
| 44 }, |
| 45 { |
| 46 value : 90, |
| 47 color: "#C7604C", |
| 48 title : "data2" |
| 49 }, |
| 50 { |
| 51 value : 24, |
| 52 color: "#21323D", |
| 53 title : "data3" |
| 54 }, |
| 55 { |
| 56 value : 58, |
| 57 color: "#9D9B7F", |
| 58 title : "data4" |
| 59 }, |
| 60 { |
| 61 value : 82, |
| 62 color: "#7D4F6D", |
| 63 title : "data5" |
| 64 }, |
| 65 { |
| 66 value : 8, |
| 67 color: "#584A5E", |
| 68 title : "data6" |
| 69 } |
| 70 ] |
| 71 |
| 72 |
| 73 |
| 74 |
| 75 function annotateAllX(area,ctx,data,statData,posi,posj,othervars) { |
| 76 if(ctx.tpchart=="Pie" || ctx.tpchart=="Doughnut" || ctx.tpchart=="PolarA
rea") { |
| 77 retstring=""; |
| 78 for(i=0;i<data.length;i++) |
| 79 { |
| 80 retstring=retstring+statData[i].v1+"="+statData[i].v3+"<
BR>"; |
| 81 } |
| 82 |
| 83 } else { |
| 84 retstring=statData[posi][posj].v2+'<BR>'; |
| 85 for(var i=0;i<data.datasets.length;i++){ |
| 86 if(typeof statData[i][posj].v3!="undefined")retstring=re
tstring+statData[i][posj].v1+"="+statData[i][posj].v3+"<BR>"; |
| 87 } |
| 88 } |
| 89 return "<%='"+retstring+"'%>"; |
| 90 } |
| 91 |
| 92 var newopts = { |
| 93 inGraphDataShow : true, |
| 94 annotateDisplay : true, |
| 95 rotateLabels : "smart", |
| 96 annotateLabel: annotateAllX, |
| 97 pointHitDetectionRadius : 10, |
| 98 detectAnnotateOnFullLine : true |
| 99 } |
| 100 |
| 101 |
| 102 |
| 103 |
| 104 </SCRIPT> |
| 105 |
| 106 |
| 107 <html> |
| 108 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> |
| 109 <head> |
| 110 <title>Demo ChartNew.js</title> |
| 111 |
| 112 </head> |
| 113 <body> |
| 114 |
| 115 <!div id="divCursor" style="position:absolute"> <!/div> |
| 116 |
| 117 <center> |
| 118 <FONT SIZE=6><B>Demo of ChartNew.js !</B></FONT> <BR> |
| 119 |
| 120 <script> |
| 121 |
| 122 |
| 123 document.write("<canvas id=\"canvas_radar\" height=\""+defCanvasHeight+"\"
width=\""+defCanvasWidth+"\"></canvas>"); |
| 124 document.write("<canvas id=\"canvas_line\" height=\""+defCanvasHeight+"\"
width=\""+defCanvasWidth+"\"></canvas>"); |
| 125 document.write("<canvas id=\"canvas_bar\" height=\""+defCanvasHeight+"\" w
idth=\""+defCanvasWidth+"\"></canvas>"); |
| 126 document.write("<canvas id=\"canvas_stackedbar\" height=\""+defCanvasHeigh
t+"\" width=\""+defCanvasWidth+"\"></canvas>"); |
| 127 document.write("<canvas id=\"canvas_horizontalbar\" height=\""+defCanvasHe
ight+"\" width=\""+defCanvasWidth+"\"></canvas>"); |
| 128 document.write("<canvas id=\"canvas_horizontalstackedbar\" height=\""+defC
anvasHeight+"\" width=\""+defCanvasWidth+"\"></canvas>"); |
| 129 document.write("<canvas id=\"canvas_polararea\" height=\""+defCanvasHeight
+"\" width=\""+defCanvasWidth+"\"></canvas>"); |
| 130 document.write("<canvas id=\"canvas_pie\" height=\""+defCanvasHeight+"\" w
idth=\""+defCanvasWidth+"\"></canvas>"); |
| 131 document.write("<canvas id=\"canvas_doughnut\" height=\""+defCanvasHeight+
"\" width=\""+defCanvasWidth+"\"></canvas>"); |
| 132 |
| 133 |
| 134 setopts=newopts; |
| 135 |
| 136 |
| 137 window.onload = function() { |
| 138 |
| 139 |
| 140 if(1==1) { |
| 141 var myLine = new Chart(document.getElementById("canvas_line").getContext("2d
")).Line(mydata1,setopts); |
| 142 var myLine = new Chart(document.getElementById("canvas_bar").getContext("2d"
)).Bar(mydata1,setopts); |
| 143 var myLine = new Chart(document.getElementById("canvas_stackedbar").getConte
xt("2d")).StackedBar(mydata1,setopts); |
| 144 var myLine = new Chart(document.getElementById("canvas_horizontalbar").getCo
ntext("2d")).HorizontalBar(mydata1,setopts); |
| 145 var myLine = new Chart(document.getElementById("canvas_horizontalstackedbar"
).getContext("2d")).HorizontalStackedBar(mydata1,setopts); |
| 146 var myLine = new Chart(document.getElementById("canvas_radar").getContext("2
d")).Radar(mydata1,setopts); |
| 147 |
| 148 var myLine = new Chart(document.getElementById("canvas_polararea").getContex
t("2d")).PolarArea(mydata2,setopts); |
| 149 var myLine = new Chart(document.getElementById("canvas_pie").getContext("2d"
)).Pie(mydata2,setopts); |
| 150 var myLine = new Chart(document.getElementById("canvas_doughnut").getContext
("2d")).Doughnut(mydata2,setopts); |
| 151 } |
| 152 |
| 153 } |
| 154 |
| 155 </script> |
| 156 </body> |
| 157 </html> |
OLD | NEW |