I'm building a gantt chart style timeline using html canvas element.

I am currently attempting to add the functionality which allows the user to click a next/prev button to have the gantt chart scroll to display earlier or later times.

The way I am doing this is to have a span.adjustTime where the id holds a value in seconds for the time to be adjusted (eg 86400 for one day).

I am trying to animate the scrolling so it looks like a scroll, rather than jumping ahead by one day.

I have a small problem in my timing calculation, but the script below is not animating, but rather jumping directly to the final time.

I do have the draw function running on a separate setInterval which updates every second, so I'm hoping it isn't an issue of conflicting timers on the same function on the same element and data.

jQuery('span.adjustTime').click(function() {

    var adjustBy = parseInt(jQuery(this).attr('id').replace('a', ''));
    var data = jQuery('img#logo').data();

    for(var m = 1; m >= 30; m++) {
        gantt.startUnixTime = gantt.startUnixTime + (adjustBy * (m * 0.001));

        var moveTimer = setTimeout(function() {
            draw(document.getElementById('gantt'), data, gantt);

        }, 1000);

        if (m == 30) {
            clearTimeout(moveTimer);
        }
    }
});