Adding zoom to your charts

Share RGraph:   

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>

Comments

Add a new comment...