4 <link rel=
"stylesheet" href=
"../css/dygraph.css">
7 <script type=
"text/javascript" src=
"dygraph-combined.js"></script>
10 For production (minified) code, use:
11 <script type=
"text/javascript" src=
"dygraph-combined.js"></script>
13 <script type=
"text/javascript" src=
"../dist/dygraph.js"></script>
15 <style type=
"text/css">
21 <h3>Annotations Demo
</h3>
22 <p>Click any point to add an annotation to it or click
"Add Annotation".
</p>
23 <input type=
"button" value=
"Add Annotation" onclick=
"add()" />
24 <input type=
"button" value=
"Shove to bottom" onclick=
"bottom(this)" />
25 <div id=
"events"> </div>
26 <div style=
"position:absolute; left:200px; top: 200px;" id=
"g_div"></div>
27 <div style=
"position:absolute; left:700px; top: 200px;" id=
"list"></div>
29 <script type=
"text/javascript">
30 var eventDiv = document.getElementById(
"events");
31 function nameAnnotation(ann) {
32 return
"(" + ann.series +
", " + ann.x +
")";
36 var graph_initialized = false;
39 document.getElementById(
"g_div"),
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++) {
44 r +=
"200610" + zp(i);
45 r +=
"," +
10*(i*(
31-i));
47 r +=
"," +
10*(
250 -
8*i);
48 r +=
"," +
10*(
125 +
125 * Math.sin(
0.3*i));
58 drawCallback: function(g, is_initial) {
60 graph_initialized = true;
61 if (annotations.length
> 0) {
62 g.setAnnotations(annotations);
66 var ann = g.annotations();
68 for (var i =
0; i < ann.length; i++) {
69 var name = nameAnnotation(ann[i]);
70 html +=
"<span id='" + name +
"'>"
71 html += name +
": " + (ann[i].shortText || '(icon)')
72 html +=
" -> " + ann[i].text +
"</span><br/>";
74 document.getElementById(
"list").innerHTML = html;
80 for (var x =
10; x <
15; x +=
2) {
85 text: 'Stock Market Crash ' + x
90 series: 'another line',
97 cssClass: 'annotation',
98 clickHandler: function() {
99 document.getElementById(
"events").innerHTML +=
"special handler<br/>";
106 text: 'Parabola Annotation at same x-coord'
109 if (graph_initialized) {
110 g.setAnnotations(annotations);
114 var x = last_ann +
2;
115 var annnotations = g.annotations();
124 g.setAnnotations(annotations);
127 function bottom(el) {
128 var to_bottom = true;
129 if (el.value != 'Shove to bottom') to_bottom = false;
131 var anns = g.annotations();
132 for (var i =
0; i < anns.length; i++) {
133 anns[i].attachAtBottom = to_bottom;
135 g.setAnnotations(anns);
138 el.value = 'Lift back up';
140 el.value = 'Shove to bottom';
147 annotationClickHandler: function(ann, point, dg, event) {
148 eventDiv.innerHTML +=
"click: " + nameAnnotation(ann) +
"<br/>";
150 annotationDblClickHandler: function(ann, point, dg, event) {
151 eventDiv.innerHTML +=
"dblclick: " + nameAnnotation(ann) +
"<br/>";
153 annotationMouseOverHandler: function(ann, point, dg, event) {
154 document.getElementById(nameAnnotation(ann)).style.fontWeight = 'bold';
155 saveBg = ann.div.style.backgroundColor;
156 ann.div.style.backgroundColor = '#ddd';
158 annotationMouseOutHandler: function(ann, point, dg, event) {
159 document.getElementById(nameAnnotation(ann)).style.fontWeight = 'normal';
160 ann.div.style.backgroundColor = saveBg;
163 pointClickCallback: function(event, p) {
164 // Check if the point is already annotated.
165 if (p.annotation) return;
172 text:
"Annotation #" + num
174 var anns = g.annotations();
176 g.setAnnotations(anns);