RGraph: HTML5 canvas graph library - Zooming your graphs

Canvas mode

As of November 2009 RGraph has had the ability to provide a zoom facility. It's designed to be used in conjunction with a context menu as in the example to the right.

You can control the zoom using these properties:

chart.zoom.factorDefault: 1.5
chart.zoom.fade.in Default: true
chart.zoom.fade.out Default: true
chart.zoom.hdir Default: right
chart.zoom.vdir Default: down
chart.zoom.delay Default: 50
chart.zoom.frames Default: 10
chart.zoom.shadow Default: true
chart.zoom.mode Default: canvas
chart.zoom.thumbnail.width Default: 75
chart.zoom.thumbnail.height Default: 75

The possible values of chart.zoom.hdir are: left, center, right. The possible values of chart.zoom.vdir are: up, center, down. chart.zoom.delay is the delay in between frames (in milliseconds) and chart.zoom.frames is the number of frames in the zoom. chart.zoom.shadow is whether the zoomed canvas has a shadow or not. The possible values of chart.zoom.mode are canvas (default) and thumbnail.

<script>
    graph = new RGraph.Line('myc', [4,6,8,7,9,4,3,8,7,4,5,5,5]);
    graph.Set('chart.labels', ['Fry','Hav','Jim','Moo','Io','Olga','Tim','Gaz','Jake','Pippa','Lou','Fred','John']);
    graph.Set('chart.contextmenu', [
                                    ['Clear annotations', function () {RGraph.Clear(graph.canvas); graph.Draw();}],
                                    ['Zoom in', RGraph.Zoom]
                                   ]);
    graph.Set('chart.title', 'Chart with zoom (context, annotatable)');
    graph.Set('chart.shadow', true);
    graph.Set('chart.annotatable', true);
    graph.Draw();
</script>

Thumbnail mode

The zoom has an alternative thumbnail mode, which displays a small thumbnail zoom instead of zooming the entire canvas. The graph to the left shows an example of this.

It uses some of the same properties as the regular zoom, eg chart.fade.in, chart.fade.out, chart.zoom.shadow

<script>
    myLine = new RGraph.Line('myc2', [40,48,45,64,34,22,23,56,56,54,84,44], [4,5,6,7,20,21,1,9,9,8,5,4]);
    myLine.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
    myLine.Set('chart.hmargin', 10);
    myLine.Set('chart.linewidth', 3);
    myLine.Set('chart.title', 'A sample line chart');
    myLine.Set('chart.zoom.mode', 'thumbnail');
    myLine.Set('chart.zoom.vdir', 'center');
    myLine.Set('chart.zoom.thumbnail.width', 100);
    myLine.Set('chart.zoom.thumbnail.height', 100);
    myLine.Set('chart.colors', ['red', 'black']);
    myLine.Set('chart.shadow', true);
    myLine.Set('chart.contextmenu', [['Zoom entire graph', RGraph.Zoom]]);
</script>