+/*global Gallery,Dygraph,data */
Gallery.register(
'drawing',
{
name: 'Time Series Drawing Demo',
title: 'Time Series Drawing Demo',
setup: function(parent) {
- parent.innerHTML =
- "<div id='toolbar'>" +
- "<div id='tool_zoom'></div>" +
- "<div id='tool_pencil'></div>" +
- "<div id='tool_eraser'></div>" +
- "</div>" +
- "<div id='draw_div' style='width: 800px; height: 400px;'></div>" +
- "<p style='font-size: 10pt'>Toolbar/cursor icons are CC-licensed from " +
- "<a href='http://www.fatcow.com/free-icons'>FatCow</a>.</p>";
+ parent.innerHTML = [
+ "<div id='toolbar'>",
+ "<div id='tool_zoom'></div>",
+ "<div id='tool_pencil'></div>",
+ "<div id='tool_eraser'></div>",
+ "</div>",
+ "<div id='draw_div' style='width: 600px; height: 300px;'></div>",
+ "<p style='font-size: 10pt'>Toolbar/cursor icons are CC-licensed from ",
+ "<a href='http://www.fatcow.com/free-icons'>FatCow</a>.</p>"].join("\n");
},
run: function() {
+ var change_tool; // defined below.
var zoom = document.getElementById('tool_zoom');
- zoom.onclick = function() { change_tool(zoom) };
+ zoom.onclick = function() { change_tool(zoom); };
var pencil = document.getElementById('tool_pencil');
- pencil.onclick = function() { change_tool(pencil) };
- var eraser = document.getElementById('tool_pencil');
- eraser.onclick = function() { change_tool(eraser) };
+ pencil.onclick = function() { change_tool(pencil); };
+ var eraser = document.getElementById('tool_eraser');
+ eraser.onclick = function() { change_tool(eraser); };
var start_date = new Date("2002/12/29").getTime();
var end_date = new Date().getTime();
var data = [];
for (var d = start_date; d < end_date; d += 604800 * 1000) {
var millis = d + 2 * 3600 * 1000;
- data.push( [ new Date(new Date(millis).strftime("%Y/%m/%d")), 50 ]);
+ data.push( [ new Date(Dygraph.dateString_(millis)), 50 ]);
}
-
+
var isDrawing = false;
var lastDrawRow = null, lastDrawValue = null;
var tool = 'pencil';
var valueRange = [0, 100];
-
+
function setPoint(event, g, context) {
- var canvasx = Dygraph.pageX(event) - Dygraph.findPosX(g.graphDiv);
- var canvasy = Dygraph.pageY(event) - Dygraph.findPosY(g.graphDiv);
+ var graphPos = Dygraph.findPos(g.graphDiv);
+ var canvasx = Dygraph.pageX(event) - graphPos.x;
+ var canvasy = Dygraph.pageY(event) - graphPos.y;
var xy = g.toDataCoords(canvasx, canvasy);
var x = xy[0], value = xy[1];
var rows = g.numRows();
closest_row = row;
}
}
-
+
if (closest_row != -1) {
if (lastDrawRow === null) {
lastDrawRow = closest_row;
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);
+ if (val === null || value === undefined || isNaN(val)) {
+ console.log(val);
+ }
} else if (tool == 'eraser') {
data[row][1] = null;
}
g.setSelection(closest_row); // prevents the dot from being finnicky.
}
}
-
+
function finishDraw() {
isDrawing = false;
lastDrawRow = null;
lastDrawValue = null;
}
-
- var change_tool = function(tool_div) {
+
+ change_tool = function(tool_div) {
var ids = ['tool_zoom', 'tool_pencil', 'tool_eraser'];
for (var i = 0; i < ids.length; i++) {
var div = document.getElementById(ids[i]);
}
}
tool = tool_div.id.replace('tool_', '');
-
+
var dg_div = document.getElementById("draw_div");
if (tool == 'pencil') {
dg_div.style.cursor = 'url(images/cursor-pencil.png) 2 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,
+
+ new Dygraph(document.getElementById("draw_div"), data,
{
valueRange: valueRange,
labels: [ 'Date', 'Value' ],
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 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);
+ event.preventDefault();
}
},
strokeWidth: 1.5,
gridLineColor: 'rgb(196, 196, 196)',
- drawYGrid: false,
- drawYAxis: false
+ axes: {
+ x: {
+ drawAxis: false
+ },
+ y: {
+ drawGrid: false
+ }
+ }
});
window.onmouseup = finishDraw;
}
- });
\ No newline at end of file
+ });