Commit 4708d7cf authored by Wolfgang Fellger's avatar Wolfgang Fellger

Add mousehandler and highlighting to graph

parent fafc6b37
WeightGraph = {
WeightGraph = function (canvas, data) {
// Draw a simple graph in 2D context ctx using data and the given diagram width and height
// (axes and scales use an additional 100px in x and ~25px in y direction)
render: function(ctx, data, diagWidth, diagHeight) {
this.render = function(highlightX) {
var diagWidth = Number(canvas.width) - 100;
var diagHeight = Number(canvas.height) - 30;
var drawHighlight = Boolean(highlightX);
function translate(x, y) {
return {x: (x - xMin) * xScale, y: (y - yMax) * -yScale};
}
......@@ -24,8 +27,11 @@ WeightGraph = {
var xScale = diagWidth / xLength;
var yScale = diagHeight / yLength;
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.save();
ctx.translate(50, 4);
ctx.translate(LEFTSPACE, 4);
// Draw diagram scales and guides
ctx.moveTo(-0.5,0);
......@@ -71,9 +77,55 @@ WeightGraph = {
ctx.fillStyle = '#026';
for (var x = 0; x < data.length; x++) {
translated = translate(data[x][0], data[x][1]);
var distance = Math.abs(translated.x - highlightX);
if (drawHighlight && distance < (drawHighlightAt ? drawHighlightAt.distance : 30)) {
var drawHighlightAt = {
x: translated.x,
y: translated.y,
time: new Date(data[x][0]),
weight: data[x][1],
distance: Math.abs(translated.x - highlightX)
};
}
ctx.beginPath();
ctx.arc(translated.x, translated.y, 4, 0, Math.PI*2);
ctx.fill();
}
if (drawHighlightAt) {
ctx.fillStyle = 'rgba(0, 22, 66, 0.5)';
ctx.beginPath();
ctx.arc(drawHighlightAt.x, drawHighlightAt.y, 10, 0, Math.PI*2);
ctx.fill();
ctx.beginPath();
if (drawHighlightAt.x + 100 + LEFTSPACE > Number(canvas.width))
ctx.translate(-90, 0);
ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
ctx.fillRect(drawHighlightAt.x + 8, drawHighlightAt.y, 80, 30);
var text = drawHighlightAt.time.getDate() + '. ' + (drawHighlightAt.time.getMonth() + 1) + '. ' + drawHighlightAt.time.getFullYear();
ctx.strokeText(text, drawHighlightAt.x + 10, drawHighlightAt.y + 10, 100);
text = (Math.round(drawHighlightAt.weight * 100) / 100) + ' kg';
ctx.strokeText(text, drawHighlightAt.x + 10, drawHighlightAt.y + 25, 100);
}
ctx.restore();
}
var that = this;
this.mousemove = function (event) {
var diagX = event.clientX - LEFTSPACE - 7;
that.render(diagX >= 0 ? diagX : undefined);
}
this.mouseleave = function (event) {
that.render();
}
var LEFTSPACE = 50;
var ctx = canvas.getContext('2d');
canvas.onmousemove = this.mousemove;
canvas.onmouseleave = this.mouseleave;
this.render();
}
......@@ -150,7 +150,7 @@
[{{ int(weight.date.strftime("%s")) * 1000 }}, {{ weight.kg }}],
{% end %}
]
WeightGraph.render(canvas.getContext("2d"), data, canvas.width - 100, canvas.height - 30);
new WeightGraph(canvas, data);
</script>
{% end %}
</section>
......
<!DOCTYPE html>
<html><head>
<title>Graph test</title>
<script src='./static/graph.js'></script>
</head><body>
<canvas id='mycanvas' width=800 height=300></canvas>
<script type='text/javascript'>
var DAY = 3600 * 24 * 1000;
var DATA = [[Date.now() - 5*DAY, 61.5],
[Date.now() - 4*DAY, 62],
[Date.now() - 3*DAY, 63],
[Date.now() - 2*DAY, 64],
[Date.now() - 1.9*DAY, 65.1],
[Date.now() - 1.8*DAY, 64.2],
[Date.now() - 1.7*DAY, 64.3],
[Date.now() - 1*DAY, 70],
[Date.now(), 65 + Math.random()*10]];
new WeightGraph(document.getElementById('mycanvas'), DATA);
</script>
<body></html>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment