update test includes
[dygraphs.git] / tests / annotation.html
CommitLineData
54425b14 1<!DOCTYPE html>
ce49c2fa
DV
2<html>
3 <head>
10494b48 4 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
ce49c2fa
DV
5 <title>demo</title>
6 <!--[if IE]>
a2b2c3a1 7 <script type="text/javascript" src="../excanvas.js"></script>
ce49c2fa 8 <![endif]-->
ec7ce8a2
DV
9 <!--
10 <script type="text/javascript" src="dygraph-combined.js"></script>
11 -->
7e5ddc94
DV
12 <!--
13 For production (minified) code, use:
14 <script type="text/javascript" src="dygraph-combined.js"></script>
15 -->
16 <script type="text/javascript" src="../dygraph-dev.js"></script>
17
5c528fa2
DV
18 <style type="text/css">
19 .annotation {
5c528fa2
DV
20 }
21 </style>
ce49c2fa
DV
22 </head>
23 <body>
d14b9eed
DV
24 <h3>Annotations Demo</h3>
25 <p>Click any point to add an annotation to it or click "Add Annotation".</p>
70aa9072 26 <input type="button" value="Add Annotation" onclick="add()" />
d14b9eed 27 <input type="button" value="Shove to bottom" onclick="bottom(this)" />
70aa9072 28 <div id="events"> </div>
3bf2fa91 29 <div style="position:absolute; left:200px; top: 200px;" id="g_div"></div>
e6d53148 30 <div style="position:absolute; left:700px; top: 200px;" id="list"></div>
ce49c2fa
DV
31
32 <script type="text/javascript">
e6d53148
DV
33 var eventDiv = document.getElementById("events");
34 function nameAnnotation(ann) {
35 return "(" + ann.series + ", " + ann.x + ")";
36 }
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
DV
57 height: 320,
58 drawCallback: function(g) {
59 var ann = g.annotations();
60 var html = "";
61 for (var i = 0; i < ann.length; i++) {
e6d53148
DV
62 var name = nameAnnotation(ann[i]);
63 html += "<span id='" + name + "'>"
135d9962
DV
64 html += name + ": " + (ann[i].shortText || '(icon)')
65 html += " -> " + ann[i].text + "</span><br/>";
5c528fa2
DV
66 }
67 document.getElementById("list").innerHTML = html;
3bf2fa91 68 }
ce49c2fa
DV
69 }
70 );
5c528fa2
DV
71
72 var last_ann = 0;
73 annotations = [];
74 for (var x = 10; x < 15; x += 2) {
75 annotations.push( {
76 series: 'sine wave',
77 x: "200610" + x,
78 shortText: x,
79 text: 'Stock Market Crash ' + x
80 } );
81 last_ann = x;
82 }
83 annotations.push( {
84 series: 'another line',
85 x: "20061013",
ce5e8d36 86 icon: 'dollar.png',
33030f33
DV
87 width: 18,
88 height: 23,
ce5e8d36 89 tickHeight: 4,
5c528fa2 90 text: 'Another one',
ab5e5c75
DV
91 cssClass: 'annotation',
92 clickHandler: function() {
93 document.getElementById("events").innerHTML += "special handler<br/>";
94 }
5c528fa2
DV
95 } );
96 g.setAnnotations(annotations);
97
98 function add() {
99 var x = last_ann + 2;
100 var annnotations = g.annotations();
101 annotations.push( {
102 series: 'line',
103 x: "200610" + x,
104 shortText: x,
9a40897e
DV
105 text: 'Line ' + x,
106 tickHeight: 10
5c528fa2
DV
107 } );
108 last_ann = x;
109 g.setAnnotations(annotations);
110 }
ab5e5c75 111
d14b9eed
DV
112 function bottom(el) {
113 var to_bottom = true;
114 if (el.value != 'Shove to bottom') to_bottom = false;
115
116 var anns = g.annotations();
117 for (var i = 0; i < anns.length; i++) {
118 anns[i].attachAtBottom = to_bottom;
119 }
120 g.setAnnotations(anns);
121
122 if (to_bottom) {
123 el.value = 'Lift back up';
124 } else {
125 el.value = 'Shove to bottom';
126 }
127 }
128
e6d53148 129 var saveBg = '';
2ad87eaa 130 var num = 0;
ab5e5c75
DV
131 g.updateOptions( {
132 annotationClickHandler: function(ann, point, dg, event) {
70aa9072
DV
133 eventDiv.innerHTML += "click: " + nameAnnotation(ann) + "<br/>";
134 },
135 annotationDblClickHandler: function(ann, point, dg, event) {
136 eventDiv.innerHTML += "dblclick: " + nameAnnotation(ann) + "<br/>";
137 },
138 annotationMouseOverHandler: function(ann, point, dg, event) {
e6d53148
DV
139 document.getElementById(nameAnnotation(ann)).style.fontWeight = 'bold';
140 saveBg = ann.div.style.backgroundColor;
141 ann.div.style.backgroundColor = '#ddd';
70aa9072
DV
142 },
143 annotationMouseOutHandler: function(ann, point, dg, event) {
e6d53148
DV
144 document.getElementById(nameAnnotation(ann)).style.fontWeight = 'normal';
145 ann.div.style.backgroundColor = saveBg;
2ad87eaa
DV
146 },
147
148 pointClickCallback: function(event, p) {
149 // Check if the point is already annotated.
150 if (p.annotation) return;
151
152 // If not, add one.
153 var ann = {
154 series: p.name,
155 xval: p.xval,
156 shortText: num,
157 text: "Annotation #" + num
158 };
159 var anns = g.annotations();
160 anns.push(ann);
161 g.setAnnotations(anns);
162
163 num++;
ab5e5c75
DV
164 }
165 });
ce49c2fa
DV
166 </script>
167</body>
168</html>