# Zooming your charts

- Canvas mode
- Thumbnail mode
- Area mode

## Canvas mode

As of November 2009 OfficeExcel 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.modeDefault: canvas 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 chart.zoom.background Default: true |
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.

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

## Thumbnail mode

The zoom has an alternative thumbnail mode, which displays a small thumbnail zoom instead of zooming the entire canvas. The chart 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

    <script>
        var myLine = new OfficeExcel.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 chart', OfficeExcel.Zoom]]);
    </script>

Making the zoom circular
It is possible to make the zoom in area mode circular by utilising the border-radius CSS property. Currently support for this is limited to FireFox 4b7+ and MSIE9, so it's not part of the main OfficeExcel software. The CSS ncessary to achieve this is thus:

<style> .OfficeExcel_zoom_window { border-radius: 50px ! important; } </style> This a chart demonstrating this technique here. Note that browser support for this technique is limited.

## Area mode

Another type of zoom available is area. This is somewhat similar to thumbnail, but allows you to draw a rectangle around the specific area that you want to zoom.

Again, this uses some common zoom properties, such as chart.zoom.factor.

Once visible, you can drag the zoomed area around with the left mouse button (a left drag), and drag the zoomed canvas around within the zoom by using the right mouse button (a right-drag). And a double click will expand the zoomed area to cover the whole canvas.

    <script>
        var myLine = new OfficeExcel.Line('myc3', [15,30,62,26,46,86,48,51,51,35,32, 35]);
        myLine.Set('chart.zoom.mode', 'area');
        myLine.Set('chart.hmargin', 10);
        myLine.Set('chart.linewidth', 1);
        myLine.Set('chart.title', 'A chart with zoom in area mode');
        myLine.Set('chart.tickmarks', 'endcircle');
        myLine.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
        myLine.Draw();
    <script>