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