Bookmark and share:
Bookmark with delicious tweet this site Post to Google Buzz! Post to Facebook Share on FriendFeed Stumble! this site

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.modeDefault: canvas
  • chart.zoom.factorDefault: 1.5
  • 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
[No canvas support]
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.

    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);

Thumbnail mode

[No canvas support]

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.out, chart.zoom.shadow

    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]]);

Area mode

[No canvas support]

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.

    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']);