Zooming your charts

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.

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.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. 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.ClearAnnotations(graph.canvas);
                                                            RGraph.Clear(graph.canvas);
                                                            graph.Draw();
                                                           }],
                                    ['Zoom in', RGraph.Zoom]
                                   ]);
    graph.Set('chart.title', 'Chart with zoom (context-menu, annotatable)');
    graph.Set('chart.shadow', true);
    graph.Set('chart.annotatable', true);
    graph.Draw();
</script>