5 <script type=
"text/javascript" src=
"excanvas.js"></script>
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>
11 <style type=
"text/css">
17 <h3>Annotations Demo
</h3>
18 <p>Click any point to add an annotation to it or click
"Add Annotation".
</p>
19 <input type=
"button" value=
"Add Annotation" onclick=
"add()" />
20 <input type=
"button" value=
"Shove to bottom" onclick=
"bottom(this)" />
21 <div id=
"events"> </div>
22 <div style=
"position:absolute; left:200px; top: 200px;" id=
"g"></div>
23 <div style=
"position:absolute; left:700px; top: 200px;" id=
"list"></div>
25 <script type=
"text/javascript">
26 var eventDiv = document.getElementById(
"events");
27 function nameAnnotation(ann) {
28 return
"(" + ann.series +
", " + ann.x +
")";
32 document.getElementById(
"g"),
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));
40 r +=
"," +
10*(
250 -
8*i);
41 r +=
"," +
10*(
125 +
125 * Math.sin(
0.3*i));
51 drawCallback: function(g) {
52 var ann = g.annotations();
54 for (var i =
0; i < ann.length; i++) {
55 var name = nameAnnotation(ann[i]);
56 html +=
"<span id='" + name +
"'>"
57 html += name +
": " + ann[i].shortText +
" -> ";
58 html += ann[i].text +
"</span><br/>";
60 document.getElementById(
"list").innerHTML = html;
67 for (var x =
10; x <
15; x +=
2) {
72 text: 'Stock Market Crash ' + x
77 series: 'another line',
84 cssClass: 'annotation',
85 clickHandler: function() {
86 document.getElementById(
"events").innerHTML +=
"special handler<br/>";
89 g.setAnnotations(annotations);
93 var annnotations = g.annotations();
102 g.setAnnotations(annotations);
105 function bottom(el) {
106 var to_bottom = true;
107 if (el.value != 'Shove to bottom') to_bottom = false;
109 var anns = g.annotations();
110 for (var i =
0; i < anns.length; i++) {
111 anns[i].attachAtBottom = to_bottom;
113 g.setAnnotations(anns);
116 el.value = 'Lift back up';
118 el.value = 'Shove to bottom';
125 annotationClickHandler: function(ann, point, dg, event) {
126 eventDiv.innerHTML +=
"click: " + nameAnnotation(ann) +
"<br/>";
128 annotationDblClickHandler: function(ann, point, dg, event) {
129 eventDiv.innerHTML +=
"dblclick: " + nameAnnotation(ann) +
"<br/>";
131 annotationMouseOverHandler: function(ann, point, dg, event) {
132 document.getElementById(nameAnnotation(ann)).style.fontWeight = 'bold';
133 saveBg = ann.div.style.backgroundColor;
134 ann.div.style.backgroundColor = '#ddd';
136 annotationMouseOutHandler: function(ann, point, dg, event) {
137 document.getElementById(nameAnnotation(ann)).style.fontWeight = 'normal';
138 ann.div.style.backgroundColor = saveBg;
141 pointClickCallback: function(event, p) {
142 // Check if the point is already annotated.
143 if (p.annotation) return;
150 text:
"Annotation #" + num
152 var anns = g.annotations();
154 g.setAnnotations(anns);