Adding zoom to your charts

  Read comments...

Summary
Documentation about using the RGraph zoom effect with your charts. It can be useful if parts of your chart are tricky to see and require enlarging.

Notice:
Zoom doesn't work with the textAccessible option unfortunately. Or rather it does but you won't see any text.
[No canvas support]

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:

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


<script>
    graph = new RGraph.Line({
        id: 'cvs',
        data: [4,6,8,7,9,4,3,8,7,4,5,5,5],
        options: {
            textAccessible: false,
            labels: ['Fry','Hav','Jim','Moo','Io','Olga','Tim','Gaz','Jake','Pippa','Lou','Fred','John'],
            contextmenu: [
                
                // First menu item
                ['Clear annotations', function ()
                {
                    RGraph.ClearAnnotations(graph.canvas);
                    RGraph.Clear(graph.canvas);
                    graph.draw();
                }],
                
                // Second menu item
                ['Zoom in', RGraph.Zoom]
                
            ],
            title: 'Chart with zoom (context-menu, annotatable)',
            annotatable: true
        }
    }).draw()
</script>
Share RGraph
X

Comments