Return failure code when lint fails.
[dygraphs.git] / tests / annotation.html
... / ...
CommitLineData
1<!DOCTYPE html>
2<html>
3 <head>
4 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
5 <title>demo</title>
6 <!--[if IE]>
7 <script type="text/javascript" src="../excanvas.js"></script>
8 <![endif]-->
9 <!--
10 <script type="text/javascript" src="dygraph-combined.js"></script>
11 -->
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
18 <style type="text/css">
19 .annotation {
20 }
21 </style>
22 </head>
23 <body>
24 <h3>Annotations Demo</h3>
25 <p>Click any point to add an annotation to it or click "Add Annotation".</p>
26 <input type="button" value="Add Annotation" onclick="add()" />
27 <input type="button" value="Shove to bottom" onclick="bottom(this)" />
28 <div id="events"> </div>
29 <div style="position:absolute; left:200px; top: 200px;" id="g_div"></div>
30 <div style="position:absolute; left:700px; top: 200px;" id="list"></div>
31
32 <script type="text/javascript">
33 var eventDiv = document.getElementById("events");
34 function nameAnnotation(ann) {
35 return "(" + ann.series + ", " + ann.x + ")";
36 }
37
38 g = new Dygraph(
39 document.getElementById("g_div"),
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++) {
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";
50 }
51 return r;
52 },
53 {
54 rollPeriod: 1,
55 showRoller: true,
56 width: 480,
57 height: 320,
58 drawCallback: function(g) {
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 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",
86 icon: 'dollar.png',
87 width: 18,
88 height: 23,
89 tickHeight: 4,
90 text: 'Another one',
91 cssClass: 'annotation',
92 clickHandler: function() {
93 document.getElementById("events").innerHTML += "special handler<br/>";
94 }
95 } );
96 annotations.push( {
97 series: 'parabola',
98 x: '20061012',
99 shortText: 'P',
100 text: 'Parabola Annotation at same x-coord'
101 } );
102 g.setAnnotations(annotations);
103
104 function add() {
105 var x = last_ann + 2;
106 var annnotations = g.annotations();
107 annotations.push( {
108 series: 'line',
109 x: "200610" + x,
110 shortText: x,
111 text: 'Line ' + x,
112 tickHeight: 10
113 } );
114 last_ann = x;
115 g.setAnnotations(annotations);
116 }
117
118 function bottom(el) {
119 var to_bottom = true;
120 if (el.value != 'Shove to bottom') to_bottom = false;
121
122 var anns = g.annotations();
123 for (var i = 0; i < anns.length; i++) {
124 anns[i].attachAtBottom = to_bottom;
125 }
126 g.setAnnotations(anns);
127
128 if (to_bottom) {
129 el.value = 'Lift back up';
130 } else {
131 el.value = 'Shove to bottom';
132 }
133 }
134
135 var saveBg = '';
136 var num = 0;
137 g.updateOptions( {
138 annotationClickHandler: function(ann, point, dg, event) {
139 eventDiv.innerHTML += "click: " + nameAnnotation(ann) + "<br/>";
140 },
141 annotationDblClickHandler: function(ann, point, dg, event) {
142 eventDiv.innerHTML += "dblclick: " + nameAnnotation(ann) + "<br/>";
143 },
144 annotationMouseOverHandler: function(ann, point, dg, event) {
145 document.getElementById(nameAnnotation(ann)).style.fontWeight = 'bold';
146 saveBg = ann.div.style.backgroundColor;
147 ann.div.style.backgroundColor = '#ddd';
148 },
149 annotationMouseOutHandler: function(ann, point, dg, event) {
150 document.getElementById(nameAnnotation(ann)).style.fontWeight = 'normal';
151 ann.div.style.backgroundColor = saveBg;
152 },
153
154 pointClickCallback: function(event, p) {
155 // Check if the point is already annotated.
156 if (p.annotation) return;
157
158 // If not, add one.
159 var ann = {
160 series: p.name,
161 xval: p.xval,
162 shortText: num,
163 text: "Annotation #" + num
164 };
165 var anns = g.annotations();
166 anns.push(ann);
167 g.setAnnotations(anns);
168
169 num++;
170 }
171 });
172 </script>
173</body>
174</html>