| 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 <SCRIPT> | |
| 6 | |
| 7 var charJSPersonalDefaultOptions = { decimalSeparator : "," , thousandSeparator
: ".", roundNumber : "none", graphTitleFontSize: 2 }; | |
| 8 | |
| 9 defCanvasWidth=1200; | |
| 10 defCanvasHeight=600; | |
| 11 | |
| 12 | |
| 13 var mydata1 = { | |
| 14 labels : [0,5,10,15,20], | |
| 15 datasets : [ | |
| 16 { | |
| 17 pointColor : "black", | |
| 18 strokeColor : "black", | |
| 19 pointStrokeColor : "black", | |
| 20 data : [12.1,25.3,7.9,9.1,31.3], | |
| 21 title : "line1" | |
| 22 }, | |
| 23 { | |
| 24 pointColor : "red", | |
| 25 strokeColor : "red", | |
| 26 pointStrokeColor : "red", | |
| 27 data : [10,21.3,12.5,5.7,22.3], | |
| 28 title : "line2" | |
| 29 } | |
| 30 ] | |
| 31 } | |
| 32 | |
| 33 function fctMouseDownMiddle(event,ctx,config,data,other) | |
| 34 { | |
| 35 if(other != null) window.alert("Click on midlle button"); | |
| 36 else window.alert("You click the middle button but not on a data"); | |
| 37 } | |
| 38 | |
| 39 function fctMouseDownLeft(event,ctx,config,data,other) | |
| 40 { | |
| 41 | |
| 42 if(other != null) window.alert("["+data.labels[other.v12]+","+data.datasets[ot
her.v11].data[other.v12]+"]"); | |
| 43 else window.alert("You click Left but not on a data"); | |
| 44 } | |
| 45 function fctMouseDownRight(event,ctx,config,data,other) | |
| 46 { | |
| 47 if(other != null) window.alert("All other variables : \nv1="+other.v1+"\nv2="+
other.v2+"\nv3="+other.v3+"\nv4="+other.v4+"\nv5="+other.v5+"\nv6="+other.v6+"\n
v7="+other.v7+"\nv8="+other.v8+"\nv9="+other.v9+"\nv10="+other.v10+"\nv11="+othe
r.v11+"\nv12="+other.v12); | |
| 48 else window.alert("You click Right but not on a data"); | |
| 49 } | |
| 50 | |
| 51 function fctMouseMove(event,ctx,config,data,other) | |
| 52 { | |
| 53 var canvas_pos = getMousePos(ctx.canvas, event); | |
| 54 document.getElementById('divmousepos').innerHTML = "Mouse Position : ["+canvas
_pos.x+","+canvas_pos.y+"]"; | |
| 55 } | |
| 56 | |
| 57 function fctMouseOut(event,ctx,config,data,other) | |
| 58 { | |
| 59 var canvas_pos = getMousePos(ctx.canvas, event); | |
| 60 document.getElementById('divmousepos').innerHTML = "Mouse not in canvas"; | |
| 61 } | |
| 62 | |
| 63 var opt1 = { | |
| 64 canvasBorders : true, | |
| 65 canvasBordersWidth : 3, | |
| 66 canvasBordersColor : "black", | |
| 67 datasetFill : false, | |
| 68 graphTitle : "mouse action sample", | |
| 69 graphTitleFontSize: 18, | |
| 70 graphMin : 0, | |
| 71 yAxisMinimumInterval : 5, | |
| 72 bezierCurve: false, | |
| 73 annotateDisplay : true, | |
| 74 inGraphDataShow : true, | |
| 75 mouseDownLeft : fctMouseDownLeft, | |
| 76 mouseDownRight : fctMouseDownRight, | |
| 77 mouseDownMiddle : fctMouseDownMiddle, | |
| 78 mouseMove : fctMouseMove, | |
| 79 mouseOut : fctMouseOut | |
| 80 | |
| 81 | |
| 82 } | |
| 83 | |
| 84 | |
| 85 | |
| 86 </SCRIPT> | |
| 87 | |
| 88 | |
| 89 <html> | |
| 90 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> | |
| 91 <head> | |
| 92 <title>Demo ChartNew.js</title> | |
| 93 </head> | |
| 94 <body> | |
| 95 | |
| 96 <center> | |
| 97 <FONT SIZE=6><B>Demo of ChartNew.js !</B></FONT> <BR> | |
| 98 | |
| 99 <script> | |
| 100 | |
| 101 document.write("<canvas id=\"canvas_Line1\" height=\""+defCanvasHeight+"\" w
idth=\""+defCanvasWidth+"\"></canvas>"); | |
| 102 var element = document.createElement('divmousepos'); | |
| 103 element.id = "divmousepos"; | |
| 104 document.body.appendChild(element); | |
| 105 var mouseDiv = document.getElementById('divmousepos'); | |
| 106 mouseDiv.style.zIndex='3'; | |
| 107 mouseDiv.style.color='rgb(255,255,0)'; | |
| 108 mouseDiv.style.background='rgb(0,102,153)'; | |
| 109 mouseDiv.style.width='700px'; | |
| 110 mouseDiv.style.height='200px'; | |
| 111 mouseDiv.style.left='500px'; | |
| 112 mouseDiv.style.top='90px'; | |
| 113 mouseDiv.innerHTML = "Mouse not in canvas"; | |
| 114 | |
| 115 window.onload = function() { | |
| 116 | |
| 117 | |
| 118 var myLine = new Chart(document.getElementById("canvas_Line1").getContext("2
d")).Line(mydata1,opt1); | |
| 119 } | |
| 120 </script> | |
| 121 </body> | |
| 122 </html> | |
| OLD | NEW |