Bookmark and share:

RGraph: HTML5 canvas graph library - Zooming your graphs

Canvas mode
Thumbnail mode
Area mode

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.modeDefault: canvas
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
chart.zoom.background Default: true

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>
    var 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>
    var 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>

Making the zoom circular

A circular zoom window It is possible to make the zoom in area mode circular by utilising the border-radius CSS property. Currently support for this is limited to FireFox 4b7+, so it's not part of the main RGraph software. The CSS ncessary to achieve this is thus:

<style>
    .RGraph_zoom_window {
        border-radius: 50px ! important;
    }
</style>

This a graph demonstrating this technique here. Note that browser support for this technique is limited.

Area mode

Another type of zoom available is area. This is somewhat similar to thumbnail, but allows you to draw a rectangle around the specific area that you want to zoom.

Again, this uses some common zoom properties, such as chart.zoom.factor.

Once visible, you can drag the zoomed area around with the left mouse button (a left drag), and drag the zoomed canvas around within the zoom by using the right mouse button (a right-drag). And a double click will expand the zoomed area to cover the whole canvas.

<script>
    var myLine = new RGraph.Line('myc3', [15,30,62,26,46,86,48,51,51,35,32, 35]);
    myLine.Set('chart.zoom.mode', 'area');
    myLine.Set('chart.hmargin', 10);
    myLine.Set('chart.linewidth', 1);
    myLine.Set('chart.title', 'A graph with zoom in area mode');
    myLine.Set('chart.tickmarks', 'endcircle');
    myLine.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
    myLine.Draw();
<script>