projects / dygraphs.git / blame
| Commit | Line | Data |
|---|---|---|
| ce49c2fa DV |
1 | <html> |
| 2 | <head> | |
| 3 | <title>demo</title> | |
| 4 | <!--[if IE]> | |
| 5 | <script type="text/javascript" src="excanvas.js"></script> | |
| 6 | <![endif]--> | |
| 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> | |
| 5c528fa2 DV |
11 | <style type="text/css"> |
| 12 | .annotation { | |
| 13 | background-color: #dddddd | |
| 14 | } | |
| 15 | </style> | |
| ce49c2fa DV |
16 | </head> |
| 17 | <body> | |
| 5c528fa2 DV |
18 | <div style="position:absolute; left:100px; top: 200px;" id="g"></div> |
| 19 | <div style="position:absolute; left:600px; top: 200px;" id="list"></div> | |
| ce49c2fa DV |
20 | |
| 21 | <script type="text/javascript"> | |
| 22 | g = new DateGraph( | |
| 23 | document.getElementById("g"), | |
| 24 | function() { | |
| 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)); | |
| 30 | r += "," + 10*(8*i); | |
| 31 | r += "," + 10*(250 - 8*i); | |
| 32 | r += "," + 10*(125 + 125 * Math.sin(0.3*i)); | |
| 33 | r += "\n"; | |
| 34 | } | |
| 35 | return r; | |
| 36 | }, | |
| 37 | { | |
| 38 | rollPeriod: 1, | |
| 5c528fa2 | 39 | showRoller: true, |
| ce49c2fa | 40 | width: 480, |
| 5c528fa2 DV |
41 | height: 320, |
| 42 | drawCallback: function(g) { | |
| 43 | var ann = g.annotations(); | |
| 44 | var html = ""; | |
| 45 | for (var i = 0; i < ann.length; i++) { | |
| 46 | html += "(" + ann[i].series + ", " + ann[i].x + "): " + ann[i].shortText + " -> " + ann[i].text + "<br/>"; | |
| 47 | } | |
| 48 | document.getElementById("list").innerHTML = html; | |
| 49 | }, | |
| ce49c2fa DV |
50 | } |
| 51 | ); | |
| 5c528fa2 DV |
52 | |
| 53 | var last_ann = 0; | |
| 54 | annotations = []; | |
| 55 | for (var x = 10; x < 15; x += 2) { | |
| 56 | annotations.push( { | |
| 57 | series: 'sine wave', | |
| 58 | x: "200610" + x, | |
| 59 | shortText: x, | |
| 60 | text: 'Stock Market Crash ' + x | |
| 61 | } ); | |
| 62 | last_ann = x; | |
| 63 | } | |
| 64 | annotations.push( { | |
| 65 | series: 'another line', | |
| 66 | x: "20061013", | |
| 67 | shortText: 'X', | |
| 68 | text: 'Another one', | |
| ab5e5c75 DV |
69 | cssClass: 'annotation', |
| 70 | clickHandler: function() { | |
| 71 | document.getElementById("events").innerHTML += "special handler<br/>"; | |
| 72 | } | |
| 5c528fa2 DV |
73 | } ); |
| 74 | g.setAnnotations(annotations); | |
| 75 | ||
| 76 | function add() { | |
| 77 | var x = last_ann + 2; | |
| 78 | var annnotations = g.annotations(); | |
| 79 | annotations.push( { | |
| 80 | series: 'line', | |
| 81 | x: "200610" + x, | |
| 82 | shortText: x, | |
| 83 | text: 'Line ' + x | |
| 84 | } ); | |
| 85 | last_ann = x; | |
| 86 | g.setAnnotations(annotations); | |
| 87 | } | |
| ab5e5c75 DV |
88 | |
| 89 | g.updateOptions( { | |
| 90 | annotationClickHandler: function(ann, point, dg, event) { | |
| 91 | document.getElementById("events").innerHTML += "click: (" + ann.series + ", " + ann.x + ")<br/>"; | |
| 92 | } | |
| 93 | }); | |
| ce49c2fa | 94 | </script> |
| 5c528fa2 DV |
95 | |
| 96 | <input type="button" value="Add Annotation" onclick="add()" /> | |
| ab5e5c75 | 97 | <div id="events"> </div> |
| ce49c2fa DV |
98 | </body> |
| 99 | </html> |