Commit | Line | Data |
---|---|---|
54425b14 | 1 | <!DOCTYPE html> |
ce49c2fa DV |
2 | <html> |
3 | <head> | |
93a5bb4c | 4 | <link rel="stylesheet" href="../css/dygraph.css"> |
ce49c2fa | 5 | <title>demo</title> |
ec7ce8a2 DV |
6 | <!-- |
7 | <script type="text/javascript" src="dygraph-combined.js"></script> | |
8 | --> | |
7e5ddc94 DV |
9 | <!-- |
10 | For production (minified) code, use: | |
11 | <script type="text/javascript" src="dygraph-combined.js"></script> | |
12 | --> | |
fbd6834a | 13 | <script type="text/javascript" src="../dist/dygraph.js"></script> |
7e5ddc94 | 14 | |
5c528fa2 DV |
15 | <style type="text/css"> |
16 | .annotation { | |
5c528fa2 DV |
17 | } |
18 | </style> | |
ce49c2fa DV |
19 | </head> |
20 | <body> | |
d14b9eed DV |
21 | <h3>Annotations Demo</h3> |
22 | <p>Click any point to add an annotation to it or click "Add Annotation".</p> | |
70aa9072 | 23 | <input type="button" value="Add Annotation" onclick="add()" /> |
d14b9eed | 24 | <input type="button" value="Shove to bottom" onclick="bottom(this)" /> |
70aa9072 | 25 | <div id="events"> </div> |
3bf2fa91 | 26 | <div style="position:absolute; left:200px; top: 200px;" id="g_div"></div> |
e6d53148 | 27 | <div style="position:absolute; left:700px; top: 200px;" id="list"></div> |
ce49c2fa DV |
28 | |
29 | <script type="text/javascript"> | |
e6d53148 DV |
30 | var eventDiv = document.getElementById("events"); |
31 | function nameAnnotation(ann) { | |
32 | return "(" + ann.series + ", " + ann.x + ")"; | |
33 | } | |
34 | ||
af6e4ad5 DV |
35 | annotations = []; |
36 | var graph_initialized = false; | |
37 | ||
33030f33 | 38 | g = new Dygraph( |
3bf2fa91 | 39 | document.getElementById("g_div"), |
ce49c2fa DV |
40 | function() { |
41 | var zp = function(x) { if (x < 10) return "0"+x; else return x; }; | |
42 | var r = "date,parabola,line,another line,sine wave\n"; | |
43 | for (var i=1; i<=31; i++) { | |
e6d53148 DV |
44 | r += "200610" + zp(i); |
45 | r += "," + 10*(i*(31-i)); | |
46 | r += "," + 10*(8*i); | |
47 | r += "," + 10*(250 - 8*i); | |
48 | r += "," + 10*(125 + 125 * Math.sin(0.3*i)); | |
49 | r += "\n"; | |
ce49c2fa DV |
50 | } |
51 | return r; | |
52 | }, | |
53 | { | |
54 | rollPeriod: 1, | |
5c528fa2 | 55 | showRoller: true, |
ce49c2fa | 56 | width: 480, |
5c528fa2 | 57 | height: 320, |
af6e4ad5 DV |
58 | drawCallback: function(g, is_initial) { |
59 | if (is_initial) { | |
60 | graph_initialized = true; | |
61 | if (annotations.length > 0) { | |
62 | g.setAnnotations(annotations); | |
63 | } | |
64 | } | |
65 | ||
5c528fa2 DV |
66 | var ann = g.annotations(); |
67 | var html = ""; | |
68 | for (var i = 0; i < ann.length; i++) { | |
e6d53148 DV |
69 | var name = nameAnnotation(ann[i]); |
70 | html += "<span id='" + name + "'>" | |
135d9962 DV |
71 | html += name + ": " + (ann[i].shortText || '(icon)') |
72 | html += " -> " + ann[i].text + "</span><br/>"; | |
5c528fa2 DV |
73 | } |
74 | document.getElementById("list").innerHTML = html; | |
3bf2fa91 | 75 | } |
ce49c2fa DV |
76 | } |
77 | ); | |
5c528fa2 DV |
78 | |
79 | var last_ann = 0; | |
5c528fa2 DV |
80 | for (var x = 10; x < 15; x += 2) { |
81 | annotations.push( { | |
82 | series: 'sine wave', | |
83 | x: "200610" + x, | |
84 | shortText: x, | |
85 | text: 'Stock Market Crash ' + x | |
86 | } ); | |
87 | last_ann = x; | |
88 | } | |
89 | annotations.push( { | |
90 | series: 'another line', | |
91 | x: "20061013", | |
ce5e8d36 | 92 | icon: 'dollar.png', |
33030f33 DV |
93 | width: 18, |
94 | height: 23, | |
ce5e8d36 | 95 | tickHeight: 4, |
5c528fa2 | 96 | text: 'Another one', |
ab5e5c75 DV |
97 | cssClass: 'annotation', |
98 | clickHandler: function() { | |
99 | document.getElementById("events").innerHTML += "special handler<br/>"; | |
100 | } | |
5c528fa2 | 101 | } ); |
9bb94ee7 DV |
102 | annotations.push( { |
103 | series: 'parabola', | |
104 | x: '20061012', | |
105 | shortText: 'P', | |
106 | text: 'Parabola Annotation at same x-coord' | |
107 | } ); | |
af6e4ad5 DV |
108 | |
109 | if (graph_initialized) { | |
110 | g.setAnnotations(annotations); | |
111 | } | |
5c528fa2 DV |
112 | |
113 | function add() { | |
114 | var x = last_ann + 2; | |
115 | var annnotations = g.annotations(); | |
116 | annotations.push( { | |
117 | series: 'line', | |
118 | x: "200610" + x, | |
119 | shortText: x, | |
9a40897e DV |
120 | text: 'Line ' + x, |
121 | tickHeight: 10 | |
5c528fa2 DV |
122 | } ); |
123 | last_ann = x; | |
124 | g.setAnnotations(annotations); | |
125 | } | |
ab5e5c75 | 126 | |
d14b9eed DV |
127 | function bottom(el) { |
128 | var to_bottom = true; | |
129 | if (el.value != 'Shove to bottom') to_bottom = false; | |
130 | ||
131 | var anns = g.annotations(); | |
132 | for (var i = 0; i < anns.length; i++) { | |
133 | anns[i].attachAtBottom = to_bottom; | |
134 | } | |
135 | g.setAnnotations(anns); | |
136 | ||
137 | if (to_bottom) { | |
138 | el.value = 'Lift back up'; | |
139 | } else { | |
140 | el.value = 'Shove to bottom'; | |
141 | } | |
142 | } | |
143 | ||
e6d53148 | 144 | var saveBg = ''; |
2ad87eaa | 145 | var num = 0; |
ab5e5c75 DV |
146 | g.updateOptions( { |
147 | annotationClickHandler: function(ann, point, dg, event) { | |
70aa9072 DV |
148 | eventDiv.innerHTML += "click: " + nameAnnotation(ann) + "<br/>"; |
149 | }, | |
150 | annotationDblClickHandler: function(ann, point, dg, event) { | |
151 | eventDiv.innerHTML += "dblclick: " + nameAnnotation(ann) + "<br/>"; | |
152 | }, | |
153 | annotationMouseOverHandler: function(ann, point, dg, event) { | |
e6d53148 DV |
154 | document.getElementById(nameAnnotation(ann)).style.fontWeight = 'bold'; |
155 | saveBg = ann.div.style.backgroundColor; | |
156 | ann.div.style.backgroundColor = '#ddd'; | |
70aa9072 DV |
157 | }, |
158 | annotationMouseOutHandler: function(ann, point, dg, event) { | |
e6d53148 DV |
159 | document.getElementById(nameAnnotation(ann)).style.fontWeight = 'normal'; |
160 | ann.div.style.backgroundColor = saveBg; | |
2ad87eaa DV |
161 | }, |
162 | ||
163 | pointClickCallback: function(event, p) { | |
164 | // Check if the point is already annotated. | |
165 | if (p.annotation) return; | |
166 | ||
167 | // If not, add one. | |
168 | var ann = { | |
169 | series: p.name, | |
170 | xval: p.xval, | |
171 | shortText: num, | |
172 | text: "Annotation #" + num | |
173 | }; | |
174 | var anns = g.annotations(); | |
175 | anns.push(ann); | |
176 | g.setAnnotations(anns); | |
177 | ||
178 | num++; | |
ab5e5c75 DV |
179 | } |
180 | }); | |
ce49c2fa DV |
181 | </script> |
182 | </body> | |
183 | </html> |