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 |