Adding zoom to your charts

As shown in the chart above, you can now add zoom functionality to your SVG charts. It probably best suits a Scatter chart which has many points where being able to zoom in on an area might provide a bit of extra clarity. The zoom functionality is available for all of the SVG charts though.

To use it, just include the RGraph.svg.common.zoom.js library and add the zoom option to your charts configuration. Once you've done that you can click and drag to highlight an area to zoom in on. When you click and drag the box drawn will stick to the correct dimensions that match the width and height of the SVG tag.

When the SVG changes to the zoomed-in area you can click and drag the zoomed area left, right, up and down. Try it on the example above. And you can use your mouse wheel to increase or decrease the zoom level (ie zoom in/out).

When you've finished you can press your Esc key on your keyboard to revert the chart back to the original. Here's the code that poduces the chart above.

<script src="RGraph.svg.common.core.js" ></script>
<script src="RGraph.svg.common.zoom.js" ></script>
<script src="RGraph.svg.scatter.js" ></script>

<div style="text-align: center">
    <div id="cc" style="width: 600px; height: 250px"></div>
</div>

<script>
    new RGraph.SVG.Scatter({
        id: 'cc',
        data: [{x:10,y:5},{x:11,y:6},{x:13,y:2},{x:15,y:2},{x:11,y:3},{x:13,y:1},{x:48,y:3},{x:11,y:9}],
        options: {
            xaxisScaleMax: 50,
            zoom: true,
            xaxisLabels: ['Monday','Tuesday','Wednesday','Thursday','Friday'],
            xaxisLabelsSize: 14,
            xaxisLabelsBold: true
        }
    }).draw();
</script>