5 title
: 'Dynamic Annotations Demo',
6 setup
: function(parent
) {
8 "<p>Click any point to add an annotation to it or click 'Add Annotation'.</p>",
9 "<button id='add'>Add Annotation></button>",
10 "<button id='bottom'>Shove to bottom</button>",
11 "<div id='list'></div>",
12 "<div id='g_div'></div>",
13 "<div id='events'></div>" ].join("\n");
17 var eventDiv
= document
.getElementById("events");
18 function nameAnnotation(ann
) {
19 return "(" + ann
.series
+ ", " + ann
.x
+ ")";
23 document
.getElementById("g_div"),
25 var zp
= function(x
) { if (x
< 10) return "0"+x
; else return x
; };
26 var r
= "date,parabola,line,another line,sine wave\n";
27 for (var i
=1; i
<=31; i
++) {
28 r
+= "200610" + zp(i
);
29 r
+= "," + 10*(i
*(31-i
));
31 r
+= "," + 10*(250 - 8*i
);
32 r
+= "," + 10*(125 + 125 * Math
.sin(0.3*i
));
42 drawCallback
: function(g
) {
43 var ann
= g
.annotations();
45 for (var i
= 0; i
< ann
.length
; i
++) {
46 var name
= nameAnnotation(ann
[i
]);
47 html
+= "<span id='" + name
+ "'>"
48 html
+= name
+ ": " + (ann
[i
].shortText
|| '(icon)')
49 html
+= " -> " + ann
[i
].text
+ "</span><br/>";
51 document
.getElementById("list").innerHTML
= html
;
58 for (var x
= 10; x
< 15; x
+= 2) {
63 text
: 'Stock Market Crash ' + x
68 series
: 'another line',
70 icon
: 'images/dollar.png',
75 cssClass
: 'annotation',
76 clickHandler
: function() {
77 eventDiv
.innerHTML
+= "special handler<br/>";
80 g
.setAnnotations(annotations
);
82 document
.getElementById('add').onclick
= function() {
84 var annnotations
= g
.annotations();
93 g
.setAnnotations(annotations
);
96 var bottom
= document
.getElementById('bottom');
98 bottom
.onclick
= function() {
99 var to_bottom
= bottom
.textContent
== 'Shove to bottom';
101 var anns
= g
.annotations();
102 for (var i
= 0; i
< anns
.length
; i
++) {
103 anns
[i
].attachAtBottom
= to_bottom
;
105 g
.setAnnotations(anns
);
108 bottom
.textContent
= 'Lift back up';
110 bottom
.textContent
= 'Shove to bottom';
117 annotationClickHandler
: function(ann
, point
, dg
, event
) {
118 eventDiv
.innerHTML
+= "click: " + nameAnnotation(ann
) + "<br/>";
120 annotationDblClickHandler
: function(ann
, point
, dg
, event
) {
121 eventDiv
.innerHTML
+= "dblclick: " + nameAnnotation(ann
) + "<br/>";
123 annotationMouseOverHandler
: function(ann
, point
, dg
, event
) {
124 document
.getElementById(nameAnnotation(ann
)).style
.fontWeight
= 'bold';
125 saveBg
= ann
.div
.style
.backgroundColor
;
126 ann
.div
.style
.backgroundColor
= '#ddd';
128 annotationMouseOutHandler
: function(ann
, point
, dg
, event
) {
129 document
.getElementById(nameAnnotation(ann
)).style
.fontWeight
= 'normal';
130 ann
.div
.style
.backgroundColor
= saveBg
;
133 pointClickCallback
: function(event
, p
) {
134 // Check if the point is already annotated.
135 if (p
.annotation
) return;
142 text
: "Annotation #" + num
144 var anns
= g
.annotations();
146 g
.setAnnotations(anns
);