Question

I have been working on two different approaches to create a graphical canvas with html5 code, allowing graphical representation and horizontal scrolling of the graph. the canvas represents a timeline of sorts. as we scroll horizontally, the idea is to represent several years in the format of a timeline… example: say the historical development of computers… I m plotting points on the graph in reference to xy co-ordinates. this is currently se manually. later on I plan to make it based on sql queries. then as i scroll more, points plotted in future years/past years are displayed accordingly…giving it a continuous timeline feeling.

I have been trying to attempt this with 2 approaches in html5 canvas..some have suggested using SVG, silverlight, GDI +….

approach 1:-

http://jsfiddle.net/7KaKf/1/

method – a grid is created, points are plotted on the grid with a variable list, click mouse on the canvas – triggering is activated, drag canvas to scroll horizontally, click again on the canvas and scrolling is disabled.

advantage to this approach – horizontal scrolling works like a charm!!!

however, the issue in this approach is that i am not sure how to bind y axis lables on this grid such that every scrollable frame has a consistent label for both x axis and y axis.

note: you can view my next approach to see what i mean by labels.

approach 2:-

http://jsfiddle.net/WNpKE/10/

The issue with the 2nd approach, is mostly like in the function that capture the mouse scrolling/dragging event and tries to repaint the canvas elements:-

window.onmousemove = function (e) {
  var evt = e || event;
  if (dragging) {
    var delta = evt.offsetX - lastX;
    translated += delta;

    //console.log(translated);

    ctx.restore();
    ctx.clearRect(0, 0, 930, 900);
    ctx.save();
    ctx.translate(translated, 0);
    lastX = evt.offsetX;
    timeline();
  }
}

Another issue could be, even though timeline() is being recalled as the canvas scrolls, the grid is painted statically, between x = 65 and x = 930/ hence no other grid is being drawn.

Although labeling is possible with this approach (which was proving to be difficult with the first approach), the grid is not consistent and once i scroll out of the first frame, the grid dissappears…. although the plotted points in the future are still visible when we scroll.

In my first approach I use a grid that keeps repeating itself as we scroll on the canvas…however labeling becomes difficult with that…and in the 2nd approach, i label, however creating that style of repeating grid becomes difficult. I have come to quite the roadblock. somehow I need to combine both methods to create the solution. Can anyone help ?

If someone could also give me links to cool canvas related theory material. I would appreciate it. 🙂

updated 2nd approach and the solution :-

http://jsfiddle.net/WNpKE/12/

With this approach the y axis labels remain constant. the background grid is replicating. Although this is sort of the solution that I was looking for (it is not perfect), any modifications are most welcome.

Answer 1

Although my solution is not perfect yet, but the solution can be found on:-

http://jsfiddle.net/WNpKE/12/

Solution:- creating the x-y grid separately as a function.

grid = (function (dX, dY) {
                        var can = document.createElement("canvas"),
                            ctx = can.getContext('2d');
                        can.width = dX;
                        can.height = dY;
                        // fill canvas color
                        ctx.fillStyle = 'black';
                        ctx.fillRect(0, 0, dX, dY);

                        // x axis
                        ctx.strokeStyle = 'orange';
                        ctx.moveTo(.5, 0.5);
                        ctx.lineTo(dX + .5, 0.5);
                        ctx.stroke();

                        // y axis
                        ctx.moveTo(.5, .5);
                        ctx.lineTo(.5, dY + .5);
                        ctx.stroke();

                        return ctx.createPattern(can, 'repeat');
                    })(72, 50);