Commit | Line | Data |
---|---|---|
ce49c2fa DV |
1 | <html> |
2 | <head> | |
3 | <title>demo</title> | |
4 | <!--[if IE]> | |
5 | <script type="text/javascript" src="excanvas.js"></script> | |
6 | <![endif]--> | |
7 | <script type="text/javascript" src="../strftime/strftime-min.js"></script> | |
8 | <script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script> | |
9 | <script type="text/javascript" src="../dygraph-canvas.js"></script> | |
10 | <script type="text/javascript" src="../dygraph.js"></script> | |
5c528fa2 DV |
11 | <style type="text/css"> |
12 | .annotation { | |
5c528fa2 DV |
13 | } |
14 | </style> | |
ce49c2fa DV |
15 | </head> |
16 | <body> | |
70aa9072 DV |
17 | <input type="button" value="Add Annotation" onclick="add()" /> |
18 | <div id="events"> </div> | |
e6d53148 DV |
19 | <div style="position:absolute; left:200px; top: 200px;" id="g"></div> |
20 | <div style="position:absolute; left:700px; top: 200px;" id="list"></div> | |
ce49c2fa DV |
21 | |
22 | <script type="text/javascript"> | |
e6d53148 DV |
23 | var eventDiv = document.getElementById("events"); |
24 | function nameAnnotation(ann) { | |
25 | return "(" + ann.series + ", " + ann.x + ")"; | |
26 | } | |
27 | ||
ce49c2fa DV |
28 | g = new DateGraph( |
29 | document.getElementById("g"), | |
30 | function() { | |
31 | var zp = function(x) { if (x < 10) return "0"+x; else return x; }; | |
32 | var r = "date,parabola,line,another line,sine wave\n"; | |
33 | for (var i=1; i<=31; i++) { | |
e6d53148 DV |
34 | r += "200610" + zp(i); |
35 | r += "," + 10*(i*(31-i)); | |
36 | r += "," + 10*(8*i); | |
37 | r += "," + 10*(250 - 8*i); | |
38 | r += "," + 10*(125 + 125 * Math.sin(0.3*i)); | |
39 | r += "\n"; | |
ce49c2fa DV |
40 | } |
41 | return r; | |
42 | }, | |
43 | { | |
44 | rollPeriod: 1, | |
5c528fa2 | 45 | showRoller: true, |
ce49c2fa | 46 | width: 480, |
5c528fa2 DV |
47 | height: 320, |
48 | drawCallback: function(g) { | |
49 | var ann = g.annotations(); | |
50 | var html = ""; | |
51 | for (var i = 0; i < ann.length; i++) { | |
e6d53148 DV |
52 | var name = nameAnnotation(ann[i]); |
53 | html += "<span id='" + name + "'>" | |
54 | html += name + ": " + ann[i].shortText + " -> "; | |
55 | html += ann[i].text + "</span><br/>"; | |
5c528fa2 DV |
56 | } |
57 | document.getElementById("list").innerHTML = html; | |
58 | }, | |
ce49c2fa DV |
59 | } |
60 | ); | |
5c528fa2 DV |
61 | |
62 | var last_ann = 0; | |
63 | annotations = []; | |
64 | for (var x = 10; x < 15; x += 2) { | |
65 | annotations.push( { | |
66 | series: 'sine wave', | |
67 | x: "200610" + x, | |
68 | shortText: x, | |
69 | text: 'Stock Market Crash ' + x | |
70 | } ); | |
71 | last_ann = x; | |
72 | } | |
73 | annotations.push( { | |
74 | series: 'another line', | |
75 | x: "20061013", | |
ce5e8d36 DV |
76 | icon: 'dollar.png', |
77 | iconWidth: 18, | |
78 | iconHeight: 23, | |
79 | tickHeight: 4, | |
5c528fa2 | 80 | text: 'Another one', |
ab5e5c75 DV |
81 | cssClass: 'annotation', |
82 | clickHandler: function() { | |
83 | document.getElementById("events").innerHTML += "special handler<br/>"; | |
84 | } | |
5c528fa2 DV |
85 | } ); |
86 | g.setAnnotations(annotations); | |
87 | ||
88 | function add() { | |
89 | var x = last_ann + 2; | |
90 | var annnotations = g.annotations(); | |
91 | annotations.push( { | |
92 | series: 'line', | |
93 | x: "200610" + x, | |
94 | shortText: x, | |
9a40897e DV |
95 | text: 'Line ' + x, |
96 | tickHeight: 10 | |
5c528fa2 DV |
97 | } ); |
98 | last_ann = x; | |
99 | g.setAnnotations(annotations); | |
100 | } | |
ab5e5c75 | 101 | |
e6d53148 | 102 | var saveBg = ''; |
2ad87eaa | 103 | var num = 0; |
ab5e5c75 DV |
104 | g.updateOptions( { |
105 | annotationClickHandler: function(ann, point, dg, event) { | |
70aa9072 DV |
106 | eventDiv.innerHTML += "click: " + nameAnnotation(ann) + "<br/>"; |
107 | }, | |
108 | annotationDblClickHandler: function(ann, point, dg, event) { | |
109 | eventDiv.innerHTML += "dblclick: " + nameAnnotation(ann) + "<br/>"; | |
110 | }, | |
111 | annotationMouseOverHandler: function(ann, point, dg, event) { | |
e6d53148 DV |
112 | document.getElementById(nameAnnotation(ann)).style.fontWeight = 'bold'; |
113 | saveBg = ann.div.style.backgroundColor; | |
114 | ann.div.style.backgroundColor = '#ddd'; | |
70aa9072 DV |
115 | }, |
116 | annotationMouseOutHandler: function(ann, point, dg, event) { | |
e6d53148 DV |
117 | document.getElementById(nameAnnotation(ann)).style.fontWeight = 'normal'; |
118 | ann.div.style.backgroundColor = saveBg; | |
2ad87eaa DV |
119 | }, |
120 | ||
121 | pointClickCallback: function(event, p) { | |
122 | // Check if the point is already annotated. | |
123 | if (p.annotation) return; | |
124 | ||
125 | // If not, add one. | |
126 | var ann = { | |
127 | series: p.name, | |
128 | xval: p.xval, | |
129 | shortText: num, | |
130 | text: "Annotation #" + num | |
131 | }; | |
132 | var anns = g.annotations(); | |
133 | anns.push(ann); | |
134 | g.setAnnotations(anns); | |
135 | ||
136 | num++; | |
ab5e5c75 DV |
137 | } |
138 | }); | |
ce49c2fa DV |
139 | </script> |
140 | </body> | |
141 | </html> |