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
[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.

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

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