[dygraphs.git] / tests / drawing.html

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
    <title>Dygraphs Drawing Demo</title>
    <!--[if IE]>
    <script type="text/javascript" src="../excanvas.js"></script>
    <![endif]-->
    <!--
    For production (minified) code, use:
    <script type="text/javascript" src="dygraph-combined.js"></script>
    -->
    <script type="text/javascript" src="../dygraph-dev.js"></script>

    <script>
    var start_date = new Date("2002/12/29").getTime();
    var end_date = new Date().getTime();
    data = [];
    for (var d = start_date; d < end_date; d += 604800 * 1000) {
      var millis = d + 2 * 3600 * 1000;
      var date = new Date(millis);
      var yyyy = date.getFullYear(),
          mm = date.getMonth(),
          dd = date.getDate();
      data.push( [ new Date(Date.UTC(yyyy, mm, dd)), 50 ]);
    }
    </script>

    <style>
    #tool_zoom {
      background: url('drawing/tool-palette.png');
      background-position: 0px 0px;
      width: 32px;
      height: 33px;
      margin-left: 50px;
      display: inline-block;
    }
    #tool_pencil {
      background: url('drawing/tool-palette.png');
      background-position: -32px 0px;
      width: 32px;
      height: 33px;
      display: inline-block;
    }
    #tool_eraser {
      background: url('drawing/tool-palette.png');
      background-position: -64px 0px;
      width: 33px;
      height: 33px;
      display: inline-block;
    }
    #toolbar {
      display: inline-block;
    }
    </style>
</head>
<body>
  <h2>Time Series Drawing Demo</h2>
  <div id='toolbar'>
    <div id="tool_zoom" onClick='change_tool(this)'></div><div id="tool_pencil" onClick='change_tool(this)'></div><div id="tool_eraser" onClick='change_tool(this)'></div>
  </div>
  <div id="draw_div" style="width: 800px; height: 400px;"></div>

  <script type="text/javascript">
    var isDrawing = false;
    var lastDrawRow = null, lastDrawValue = null;
    var tool = 'pencil';
    var valueRange = [0, 100];

    function setPoint(event, g, context) {
      var pos = Dygraph.findPos(g.graphDiv);
      var canvasx = Dygraph.pageX(event) - pos.x;
      var canvasy = Dygraph.pageY(event) - pos.y;
      var xy = g.toDataCoords(canvasx, canvasy);
      var x = xy[0], value = xy[1];
      var rows = g.numRows();
      var closest_row = -1;
      var smallest_diff = -1;
      // TODO(danvk): binary search
      for (var row = 0; row < rows; row++) {
        var date = g.getValue(row, 0);  // millis
        var diff = Math.abs(date - x);
        if (smallest_diff < 0 || diff < smallest_diff) {
          smallest_diff = diff;
          closest_row = row;
        }
      }

      if (closest_row != -1) {
        if (lastDrawRow === null) {
          lastDrawRow = closest_row;
          lastDrawValue = value;
        }
        var coeff = (value - lastDrawValue) / (closest_row - lastDrawRow);
        if (closest_row == lastDrawRow) coeff = 0.0;
        var minRow = Math.min(lastDrawRow, closest_row);
        var maxRow = Math.max(lastDrawRow, closest_row);
        for (var row = minRow; row <= maxRow; row++) {
          if (tool == 'pencil') {
            var val = lastDrawValue + coeff * (row - lastDrawRow);
            val = Math.max(valueRange[0], Math.min(val, valueRange[1]));
            data[row][1] = val;
            if (val == null || isNaN(val)) console.log(val);
          } else if (tool == 'eraser') {
            data[row][1] = null;
          }
        }
        lastDrawRow = closest_row;
        lastDrawValue = value;
        g.updateOptions({ file: data });
        g.setSelection(closest_row);  // prevents the dot from being finnicky.
      }
    }

    function finishDraw() {
      isDrawing = false;
      lastDrawRow = null;
      lastDrawValue = null;
    }

    function change_tool(tool_div) {
      var ids = ['tool_zoom', 'tool_pencil', 'tool_eraser'];
      for (var i = 0; i < ids.length; i++) {
        var div = document.getElementById(ids[i]);
        if (div == tool_div) {
          div.style.backgroundPosition = -(i * 32) + 'px -32px';
        } else {
          div.style.backgroundPosition = -(i * 32) + 'px 0px';
        }
      }
      tool = tool_div.id.replace('tool_', '');

      var dg_div = document.getElementById("draw_div");
      if (tool == 'pencil') {
        dg_div.style.cursor = 'url(drawing/cursor-pencil.png) 2 30, auto';
      } else if (tool == 'eraser') {
        dg_div.style.cursor = 'url(drawing/cursor-eraser.png) 10 30, auto';
      } else if (tool == 'zoom') {
        dg_div.style.cursor = 'crosshair';
      }
    }
    change_tool(document.getElementById("tool_pencil"));

    g = new Dygraph(document.getElementById("draw_div"), data,
        {
          valueRange: valueRange,
          labels: [ 'Date', 'Value' ],
          labelsUTC: true,
          interactionModel: {
            mousedown: function (event, g, context) {
              if (tool == 'zoom') {
                Dygraph.defaultInteractionModel.mousedown(event, g, context);
              } else {
                // prevents mouse drags from selecting page text.
                if (event.preventDefault) {
                  event.preventDefault();  // Firefox, Chrome, etc.
                } else {
                  event.returnValue = false;  // IE
                  event.cancelBubble = true;
                }
                isDrawing = true;
                setPoint(event, g, context);
              }
            },
            mousemove: function (event, g, context) {
              if (tool == 'zoom') {
              } else {
                if (!isDrawing) return;
                setPoint(event, g, context);
              }
            },
            mouseup: function(event, g, context) {
              if (tool == 'zoom') {
              } else {
                finishDraw();
              }
            },
            mouseout: function(event, g, context) {
              if (tool == 'zoom') {
              }
            },
            dblclick: function(event, g, context) {
              Dygraph.defaultInteractionModel.dblclick(event, g, context);
            },
            mousewheel: function(event, g, context) {
              var normal = event.detail ? event.detail * -1 : event.wheelDelta / 40;
              var percentage = normal / 50;
              var axis = g.xAxisRange();
              var xOffset = g.toDomCoords(axis[0], null)[0];
              var x = event.offsetX - xOffset;
              var w = g.toDomCoords(axis[1], null)[0] - xOffset;
              var xPct = w == 0 ? 0 : (x / w);

              var delta = axis[1] - axis[0];
              var increment = delta * percentage;
              var foo = [increment * xPct, increment * (1 - xPct)];
              var dateWindow = [ axis[0] + foo[0], axis[1] - foo[1] ];

              g.updateOptions({
                dateWindow: dateWindow
              });
              Dygraph.cancelEvent(event);
            }
          },
          strokeWidth: 1.5,
          gridLineColor: 'rgb(196, 196, 196)',
          axes: {
            y: {
              drawAxis: false,
              drawGrid: false
            }
          }
        });
        window.onmouseup = finishDraw;
  </script>

  <p style='font-size: 10pt'>Toolbar/cursor icons are CC-licensed from <a
  href="http://www.fatcow.com/free-icons">FatCow</a>.</p>
</body>
</html>
Commit	Line	Data
8c5fe59e DV	1	<!DOCTYPE html>
	2	<html>
	3	<head>
	4	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
	5	<title>Dygraphs Drawing Demo</title>
	6	<!--[if IE]>
	7	<script type="text/javascript" src="../excanvas.js"></script>
	8	<![endif]-->
7e5ddc94 DV	9	<!--
	10	For production (minified) code, use:
	11	<script type="text/javascript" src="dygraph-combined.js"></script>
	12	-->
	13	<script type="text/javascript" src="../dygraph-dev.js"></script>
	14
fc7d0ef1	15	<script>
8c5fe59e DV	16	var start_date = new Date("2002/12/29").getTime();
	17	var end_date = new Date().getTime();
	18	data = [];
	19	for (var d = start_date; d < end_date; d += 604800 * 1000) {
	20	var millis = d + 2 * 3600 * 1000;
fc7d0ef1 DV	21	var date = new Date(millis);
	22	var yyyy = date.getFullYear(),
	23	mm = date.getMonth(),
	24	dd = date.getDate();
	25	data.push( [ new Date(Date.UTC(yyyy, mm, dd)), 50 ]);
8c5fe59e DV	26	}
8c5fe59e DV	27	</script>
fc7d0ef1 DV	28
fc7d0ef1 DV	29	<style>
8c5fe59e DV	30	#tool_zoom {
8c5fe59e DV	31	background: url('drawing/tool-palette.png');
86cf5a64	32	background-position: 0px 0px;
8c5fe59e DV	33	width: 32px;
	34	height: 33px;
	35	margin-left: 50px;
	36	display: inline-block;
	37	}
	38	#tool_pencil {
	39	background: url('drawing/tool-palette.png');
86cf5a64	40	background-position: -32px 0px;
8c5fe59e DV	41	width: 32px;
	42	height: 33px;
	43	display: inline-block;
	44	}
	45	#tool_eraser {
	46	background: url('drawing/tool-palette.png');
86cf5a64	47	background-position: -64px 0px;
8c5fe59e DV	48	width: 33px;
	49	height: 33px;
	50	display: inline-block;
	51	}
	52	#toolbar {
	53	display: inline-block;
	54	}
	55	</style>
	56	</head>
	57	<body>
	58	<h2>Time Series Drawing Demo</h2>
	59	<div id='toolbar'>
	60	<div id="tool_zoom" onClick='change_tool(this)'></div><div id="tool_pencil" onClick='change_tool(this)'></div><div id="tool_eraser" onClick='change_tool(this)'></div>
	61	</div>
	62	<div id="draw_div" style="width: 800px; height: 400px;"></div>
	63
	64	<script type="text/javascript">
	65	var isDrawing = false;
	66	var lastDrawRow = null, lastDrawValue = null;
	67	var tool = 'pencil';
	68	var valueRange = [0, 100];
	69
	70	function setPoint(event, g, context) {
fc7d0ef1 DV	71	var pos = Dygraph.findPos(g.graphDiv);
	72	var canvasx = Dygraph.pageX(event) - pos.x;
	73	var canvasy = Dygraph.pageY(event) - pos.y;
8c5fe59e DV	74	var xy = g.toDataCoords(canvasx, canvasy);
	75	var x = xy[0], value = xy[1];
	76	var rows = g.numRows();
	77	var closest_row = -1;
	78	var smallest_diff = -1;
	79	// TODO(danvk): binary search
	80	for (var row = 0; row < rows; row++) {
	81	var date = g.getValue(row, 0); // millis
	82	var diff = Math.abs(date - x);
	83	if (smallest_diff < 0 \|\| diff < smallest_diff) {
	84	smallest_diff = diff;
	85	closest_row = row;
	86	}
	87	}
	88
	89	if (closest_row != -1) {
	90	if (lastDrawRow === null) {
	91	lastDrawRow = closest_row;
	92	lastDrawValue = value;
	93	}
	94	var coeff = (value - lastDrawValue) / (closest_row - lastDrawRow);
	95	if (closest_row == lastDrawRow) coeff = 0.0;
	96	var minRow = Math.min(lastDrawRow, closest_row);
	97	var maxRow = Math.max(lastDrawRow, closest_row);
	98	for (var row = minRow; row <= maxRow; row++) {
	99	if (tool == 'pencil') {
	100	var val = lastDrawValue + coeff * (row - lastDrawRow);
	101	val = Math.max(valueRange[0], Math.min(val, valueRange[1]));
	102	data[row][1] = val;
	103	if (val == null \|\| isNaN(val)) console.log(val);
	104	} else if (tool == 'eraser') {
	105	data[row][1] = null;
	106	}
	107	}
	108	lastDrawRow = closest_row;
	109	lastDrawValue = value;
	110	g.updateOptions({ file: data });
	111	g.setSelection(closest_row); // prevents the dot from being finnicky.
	112	}
	113	}
	114
	115	function finishDraw() {
	116	isDrawing = false;
	117	lastDrawRow = null;
	118	lastDrawValue = null;
	119	}
	120
	121	function change_tool(tool_div) {
86cf5a64	122	var ids = ['tool_zoom', 'tool_pencil', 'tool_eraser'];
8c5fe59e	123	for (var i = 0; i < ids.length; i++) {
86cf5a64 DV	124	var div = document.getElementById(ids[i]);
	125	if (div == tool_div) {
	126	div.style.backgroundPosition = -(i * 32) + 'px -32px';
	127	} else {
	128	div.style.backgroundPosition = -(i * 32) + 'px 0px';
	129	}
8c5fe59e	130	}
8c5fe59e DV	131	tool = tool_div.id.replace('tool_', '');
	132
	133	var dg_div = document.getElementById("draw_div");
	134	if (tool == 'pencil') {
	135	dg_div.style.cursor = 'url(drawing/cursor-pencil.png) 2 30, auto';
	136	} else if (tool == 'eraser') {
	137	dg_div.style.cursor = 'url(drawing/cursor-eraser.png) 10 30, auto';
	138	} else if (tool == 'zoom') {
	139	dg_div.style.cursor = 'crosshair';
	140	}
	141	}
	142	change_tool(document.getElementById("tool_pencil"));
	143
	144	g = new Dygraph(document.getElementById("draw_div"), data,
	145	{
	146	valueRange: valueRange,
	147	labels: [ 'Date', 'Value' ],
fc7d0ef1	148	labelsUTC: true,
8c5fe59e DV	149	interactionModel: {
	150	mousedown: function (event, g, context) {
	151	if (tool == 'zoom') {
	152	Dygraph.defaultInteractionModel.mousedown(event, g, context);
	153	} else {
	154	// prevents mouse drags from selecting page text.
	155	if (event.preventDefault) {
	156	event.preventDefault(); // Firefox, Chrome, etc.
	157	} else {
	158	event.returnValue = false; // IE
	159	event.cancelBubble = true;
	160	}
	161	isDrawing = true;
	162	setPoint(event, g, context);
	163	}
	164	},
	165	mousemove: function (event, g, context) {
	166	if (tool == 'zoom') {
8c5fe59e DV	167	} else {
	168	if (!isDrawing) return;
	169	setPoint(event, g, context);
	170	}
	171	},
	172	mouseup: function(event, g, context) {
	173	if (tool == 'zoom') {
8c5fe59e DV	174	} else {
	175	finishDraw();
	176	}
	177	},
	178	mouseout: function(event, g, context) {
	179	if (tool == 'zoom') {
8c5fe59e DV	180	}
	181	},
	182	dblclick: function(event, g, context) {
	183	Dygraph.defaultInteractionModel.dblclick(event, g, context);
	184	},
	185	mousewheel: function(event, g, context) {
	186	var normal = event.detail ? event.detail * -1 : event.wheelDelta / 40;
	187	var percentage = normal / 50;
	188	var axis = g.xAxisRange();
	189	var xOffset = g.toDomCoords(axis[0], null)[0];
	190	var x = event.offsetX - xOffset;
	191	var w = g.toDomCoords(axis[1], null)[0] - xOffset;
	192	var xPct = w == 0 ? 0 : (x / w);
	193
	194	var delta = axis[1] - axis[0];
	195	var increment = delta * percentage;
	196	var foo = [increment * xPct, increment * (1 - xPct)];
	197	var dateWindow = [ axis[0] + foo[0], axis[1] - foo[1] ];
	198
	199	g.updateOptions({
	200	dateWindow: dateWindow
	201	});
	202	Dygraph.cancelEvent(event);
	203	}
	204	},
	205	strokeWidth: 1.5,
	206	gridLineColor: 'rgb(196, 196, 196)',
fc7d0ef1 DV	207	axes: {
	208	y: {
	209	drawAxis: false,
	210	drawGrid: false
	211	}
	212	}
8c5fe59e DV	213	});
	214	window.onmouseup = finishDraw;
	215	</script>
	216
	217	<p style='font-size: 10pt'>Toolbar/cursor icons are CC-licensed from <a
	218	href="http://www.fatcow.com/free-icons">FatCow</a>.</p>
	219	</body>
	220	</html>