[dygraphs.git] / tests / annotation.html

<html>
  <head>
    <title>demo</title>
    <!--[if IE]>
    <script type="text/javascript" src="excanvas.js"></script>
    <![endif]-->
    <script type="text/javascript" src="../strftime/strftime-min.js"></script>
    <script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script>
    <script type="text/javascript" src="../dygraph-canvas.js"></script>
    <script type="text/javascript" src="../dygraph.js"></script>
    <style type="text/css">
    .annotation {
      background-color: #dddddd
    }
    </style>
  </head>
  <body>
    <input type="button" value="Add Annotation" onclick="add()" />
    <div id="events"> </div>
    <div style="position:absolute; left:100px; top: 200px;" id="g"></div>
    <div style="position:absolute; left:600px; top: 200px;" id="list"></div>

    <script type="text/javascript">
      g = new DateGraph(
              document.getElementById("g"),
              function() {
                var zp = function(x) { if (x < 10) return "0"+x; else return x; };
                var r = "date,parabola,line,another line,sine wave\n";
                for (var i=1; i<=31; i++) {
                r += "200610" + zp(i);
                r += "," + 10*(i*(31-i));
                r += "," + 10*(8*i);
                r += "," + 10*(250 - 8*i);
                r += "," + 10*(125 + 125 * Math.sin(0.3*i));
                r += "\n";
                }
                return r;
              },
              {
                rollPeriod: 1,
                showRoller: true,
                width: 480,
                height: 320,
                drawCallback: function(g) {
                  var ann = g.annotations();
                  var html = "";
                  for (var i = 0; i < ann.length; i++) {
                    html += "(" + ann[i].series + ", " + ann[i].x + "): " + ann[i].shortText + " -> " + ann[i].text + "<br/>";
                  }
                  document.getElementById("list").innerHTML = html;
                },
              }
          );

      var last_ann = 0;
      annotations = [];
      for (var x = 10; x < 15; x += 2) {
        annotations.push( {
          series: 'sine wave',
          x: "200610" + x,
          shortText: x,
          text: 'Stock Market Crash ' + x
        } );
        last_ann = x;
      }
      annotations.push( {
        series: 'another line',
        x: "20061013",
        icon: 'http://www.planscalendar.com/icons/dollar_sign_32x32.gif',
        shortText: 'A',
        text: 'Another one',
        cssClass: 'annotation',
        clickHandler: function() {
          document.getElementById("events").innerHTML += "special handler<br/>";
        }
      } );
      g.setAnnotations(annotations);

      function add() {
        var x = last_ann + 2;
        var annnotations = g.annotations();
        annotations.push( {
          series: 'line',
          x: "200610" + x,
          shortText: x,
          text: 'Line ' + x,
          tickHeight: 10
        } );
        last_ann = x;
        g.setAnnotations(annotations);
      }

      var eventDiv = document.getElementById("events");
      function nameAnnotation(ann) {
        return "(" + ann.series + ", " + ann.x + ")";
      }
      g.updateOptions( {
        annotationClickHandler: function(ann, point, dg, event) {
          eventDiv.innerHTML += "click: " + nameAnnotation(ann) + "<br/>";
        },
        annotationDblClickHandler: function(ann, point, dg, event) {
          eventDiv.innerHTML += "dblclick: " + nameAnnotation(ann) + "<br/>";
        },
        annotationMouseOverHandler: function(ann, point, dg, event) {
          eventDiv.innerHTML += "mouseenter: " + nameAnnotation(ann) + "<br/>";
        },
        annotationMouseOutHandler: function(ann, point, dg, event) {
          eventDiv.innerHTML += "mouseout: " + nameAnnotation(ann) + "<br/>";
        }
      });
    </script>
</body>
</html>
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>
ce49c2fa DV	17	<body>
70aa9072 DV	18	<input type="button" value="Add Annotation" onclick="add()" />
70aa9072 DV	19	<div id="events"> </div>
5c528fa2 DV	20	<div style="position:absolute; left:100px; top: 200px;" id="g"></div>
5c528fa2 DV	21	<div style="position:absolute; left:600px; top: 200px;" id="list"></div>
ce49c2fa DV	22
	23	<script type="text/javascript">
	24	g = new DateGraph(
	25	document.getElementById("g"),
	26	function() {
	27	var zp = function(x) { if (x < 10) return "0"+x; else return x; };
	28	var r = "date,parabola,line,another line,sine wave\n";
	29	for (var i=1; i<=31; i++) {
	30	r += "200610" + zp(i);
	31	r += "," + 10(i(31-i));
	32	r += "," + 10(8i);
	33	r += "," + 10(250 - 8i);
	34	r += "," + 10(125 + 125 Math.sin(0.3*i));
	35	r += "\n";
	36	}
	37	return r;
	38	},
	39	{
	40	rollPeriod: 1,
5c528fa2	41	showRoller: true,
ce49c2fa	42	width: 480,
5c528fa2 DV	43	height: 320,
	44	drawCallback: function(g) {
	45	var ann = g.annotations();
	46	var html = "";
	47	for (var i = 0; i < ann.length; i++) {
	48	html += "(" + ann[i].series + ", " + ann[i].x + "): " + ann[i].shortText + " -> " + ann[i].text + "<br/>";
	49	}
	50	document.getElementById("list").innerHTML = html;
	51	},
ce49c2fa DV	52	}
ce49c2fa DV	53	);
5c528fa2 DV	54
	55	var last_ann = 0;
	56	annotations = [];
	57	for (var x = 10; x < 15; x += 2) {
	58	annotations.push( {
	59	series: 'sine wave',
	60	x: "200610" + x,
	61	shortText: x,
	62	text: 'Stock Market Crash ' + x
	63	} );
	64	last_ann = x;
	65	}
	66	annotations.push( {
	67	series: 'another line',
	68	x: "20061013",
9a40897e DV	69	icon: 'http://www.planscalendar.com/icons/dollar_sign_32x32.gif',
9a40897e DV	70	shortText: 'A',
5c528fa2	71	text: 'Another one',
ab5e5c75 DV	72	cssClass: 'annotation',
	73	clickHandler: function() {
	74	document.getElementById("events").innerHTML += "special handler<br/>";
	75	}
5c528fa2 DV	76	} );
	77	g.setAnnotations(annotations);
	78
	79	function add() {
	80	var x = last_ann + 2;
	81	var annnotations = g.annotations();
	82	annotations.push( {
	83	series: 'line',
	84	x: "200610" + x,
	85	shortText: x,
9a40897e DV	86	text: 'Line ' + x,
9a40897e DV	87	tickHeight: 10
5c528fa2 DV	88	} );
	89	last_ann = x;
	90	g.setAnnotations(annotations);
	91	}
ab5e5c75	92
70aa9072 DV	93	var eventDiv = document.getElementById("events");
	94	function nameAnnotation(ann) {
	95	return "(" + ann.series + ", " + ann.x + ")";
	96	}
ab5e5c75 DV	97	g.updateOptions( {
ab5e5c75 DV	98	annotationClickHandler: function(ann, point, dg, event) {
70aa9072 DV	99	eventDiv.innerHTML += "click: " + nameAnnotation(ann) + "<br/>";
	100	},
	101	annotationDblClickHandler: function(ann, point, dg, event) {
	102	eventDiv.innerHTML += "dblclick: " + nameAnnotation(ann) + "<br/>";
	103	},
	104	annotationMouseOverHandler: function(ann, point, dg, event) {
	105	eventDiv.innerHTML += "mouseenter: " + nameAnnotation(ann) + "<br/>";
	106	},
	107	annotationMouseOutHandler: function(ann, point, dg, event) {
	108	eventDiv.innerHTML += "mouseout: " + nameAnnotation(ann) + "<br/>";
ab5e5c75 DV	109	}
ab5e5c75 DV	110	});
ce49c2fa DV	111	</script>
	112	</body>
	113	</html>