314 lines
14 KiB
HTML
314 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
|
<!--
|
|
/**
|
|
* o------------------------------------------------------------------------------o
|
|
* | This file is part of the OfficeExcel package - you can learn more at: |
|
|
* | |
|
|
* | http://www.OfficeExcel.net |
|
|
* | |
|
|
* | This package is licensed under the OfficeExcel license. For all kinds of business |
|
|
* | purposes there is a small one-time licensing fee to pay and for non |
|
|
* | commercial purposes it is free to use. You can read the full license here: |
|
|
* | |
|
|
* | http://www.OfficeExcel.net/LICENSE.txt |
|
|
* o------------------------------------------------------------------------------o
|
|
*/
|
|
-->
|
|
<title>The zoom feature of OfficeExcel</title>
|
|
|
|
<meta name="keywords" content="OfficeExcel html5 canvas chart docs zoom" />
|
|
<meta name="description" content="Documentation about using the OfficeExcel zoom effect with your charts" />
|
|
<meta name="googlebot" content="NOODP">
|
|
|
|
<meta property="og:title" content="OfficeExcel: HTML5 Javascript charts library" />
|
|
<meta property="og:description" content="A charts library based on the HTML5 canvas tag" />
|
|
<meta property="og:image" content="http://www.OfficeExcel.net/images/logo.jpg"/>
|
|
|
|
<link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
|
|
<link rel="icon" type="image/png" href="../images/favicon.png">
|
|
|
|
<!-- Place this tag in your head or just before your close body tag -->
|
|
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
|
|
|
|
<script src="../libraries/OfficeExcel.common.core.js" ></script>
|
|
<script src="../libraries/OfficeExcel.common.annotate.js" ></script>
|
|
<script src="../libraries/OfficeExcel.common.context.js" ></script>
|
|
<script src="../libraries/OfficeExcel.common.zoom.js" ></script>
|
|
<script src="../libraries/OfficeExcel.bar.js" ></script>
|
|
<script src="../libraries/OfficeExcel.line.js" ></script>
|
|
<!--[if lt IE 9]><script src="../excanvas/excanvas.original.js"></script><![endif]-->
|
|
|
|
<style>
|
|
.OfficeExcel_zoom_window {
|
|
border: 2px solid #ccc ! important;
|
|
box-shadow: 0 0 15px #aaa ! important;;
|
|
-moz-box-shadow: 0 0 15px #aaa ! important;
|
|
-webkit-box-shadow: 0 0 15px #aaa ! important;
|
|
}
|
|
</style>
|
|
|
|
<?php PrintAnalyticsCode() ?>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
|
|
<!-- Social networking buttons -->
|
|
<?php
|
|
$prefix = substr($_SERVER['SERVER_NAME'], 0, 3);
|
|
require("/OfficeExcel.{$prefix}/social.html");
|
|
?>
|
|
<!-- Social networking buttons -->
|
|
|
|
<div id="breadcrumb">
|
|
<a href="../index.html">OfficeExcel: HTML5 Javascript charts library</a>
|
|
>
|
|
<a href="./index.html">Documentation</a>
|
|
>
|
|
Zooming your charts
|
|
</div>
|
|
|
|
<h1>Zooming <span>your charts</span></h1>
|
|
|
|
<script>
|
|
if (OfficeExcel.isOld()) {
|
|
document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the OfficeExcel Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>');
|
|
}
|
|
</script>
|
|
|
|
|
|
<ul>
|
|
<li><a href="#canvas">Canvas mode</a></li>
|
|
<li><a href="#thumbnail">Thumbnail mode</a></li>
|
|
<li><a href="#area">Area mode</a></li>
|
|
</ul>
|
|
|
|
|
|
<a name="canvas"></a>
|
|
<h2>Canvas mode</h2>
|
|
|
|
<table border="0" width="100%">
|
|
<tr>
|
|
<td>
|
|
<p>
|
|
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.
|
|
</p>
|
|
|
|
<p>
|
|
You can control the zoom using these properties:
|
|
</p>
|
|
|
|
<ul>
|
|
<li>chart.zoom.mode<i>Default: canvas</i></li>
|
|
<li>chart.zoom.factor<i>Default: 1.5</i></li>
|
|
<li>chart.zoom.fade.in <i>Default: true</i></li>
|
|
<li>chart.zoom.fade.out <i>Default: true</i></li>
|
|
<li>chart.zoom.hdir <i>Default: right</i></li>
|
|
<li>chart.zoom.vdir <i>Default: down</i></li>
|
|
<li>chart.zoom.delay <i>Default: 50</i></li>
|
|
<li>chart.zoom.frames <i>Default: 10</i></li>
|
|
<li>chart.zoom.shadow <i>Default: true</i></li>
|
|
<li>chart.zoom.mode <i>Default: canvas</i></li>
|
|
<li>chart.zoom.thumbnail.width <i>Default: 75</i></li>
|
|
<li>chart.zoom.thumbnail.height <i>Default: 75</i></li>
|
|
<li>chart.zoom.background <i>Default: true</i></li>
|
|
</ul>
|
|
</td>
|
|
|
|
<td style="text-align: center">
|
|
<canvas width="600" height="250" id="myc">[No canvas support]</canvas>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td colspan="2">
|
|
The possible values of <i>chart.zoom.hdir</i> are: <i>left</i>, <i>center</i>, <i>right</i>.
|
|
The possible values of <i>chart.zoom.vdir</i> are: <i>up</i>, <i>center</i>, <i>down</i>. <i>chart.zoom.delay</i>
|
|
is the delay in between frames (in milliseconds) and <i>chart.zoom.frames</i> is the number of frames in the zoom. <i>chart.zoom.shadow</i>
|
|
is whether the zoomed canvas has a shadow or not. The possible values of <i>chart.zoom.mode</i> are <i>canvas</i> (default)
|
|
and <i>thumbnail</i>.
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<script>
|
|
window.onload = function ()
|
|
{
|
|
var graph = new OfficeExcel.Bar('myc', [[4,6],[6, 8],[8,6],[7,5],[9,4],[4,7],[3,5],[8,6],[7,6],[4,7],[5,4],[5,6],[6,4]]);
|
|
graph.Set('chart.colors', ['#f66', '#66f']);
|
|
graph.Set('chart.strokecolor', 'rgba(0,0,0,0)');
|
|
graph.Set('chart.labels', ['Fry','Hav','Jim','Moo','Io','Olga','Tim','Gaz','Jake','Pippa','Lou','Fred','John']);
|
|
|
|
if (!OfficeExcel.isOld()) {
|
|
graph.Set('chart.contextmenu', [
|
|
['Clear annotations', function () {OfficeExcel.Clear(graph.canvas); graph.Draw();}],
|
|
['Zoom in', OfficeExcel.Zoom]
|
|
]);
|
|
graph.Set('chart.annotatable', true);
|
|
graph.Set('chart.zoom.hdir', 'left');
|
|
graph.Set('chart.zoom.factor', 1.5);
|
|
graph.Set('chart.zoom.vdir', 'center');
|
|
graph.Set('chart.zoom.frames', 50); // Number of frames
|
|
graph.Set('chart.zoom.delay', 5); // Delay between each frame
|
|
graph.Set('chart.zoom.shadow', 'rgba(0,0,0,0.7)'); // Show a shadow on the zoomed chart
|
|
graph.Set('chart.zoom.background', true);
|
|
}
|
|
|
|
graph.Set('chart.title', 'Chart with zoom (context, annotatable)');
|
|
graph.Set('chart.shadow', true);
|
|
graph.Set('chart.shadow.color', '#999');
|
|
graph.Draw();
|
|
|
|
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.colors', ['red', 'black']);
|
|
myLine.Set('chart.shadow', true);
|
|
|
|
if (!OfficeExcel.isOld()) {
|
|
myLine.Set('chart.contextmenu', [['Zoom entire chart', OfficeExcel.Zoom]]);
|
|
myLine.Set('chart.zoom.delay', 15);
|
|
myLine.Set('chart.zoom.factor', 1.5);
|
|
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.Draw();
|
|
|
|
myLine2 = new OfficeExcel.Line('myc3', [15,30,62,26,46,86,48,51,51,35,32, 35]);
|
|
myLine2.Set('chart.background.grid.width', 0.5);
|
|
myLine2.Set('chart.shadow.offsetx', 1);
|
|
myLine2.Set('chart.shadow.offsety', 1);
|
|
myLine2.Set('chart.shadow.blur', 2);
|
|
myLine2.Set('chart.shadow', true);
|
|
|
|
if (!OfficeExcel.isOld()) {
|
|
myLine2.Set('chart.zoom.mode', 'area');
|
|
}
|
|
|
|
myLine2.Set('chart.hmargin', 10);
|
|
myLine2.Set('chart.linewidth', 2);
|
|
myLine2.Set('chart.title', 'A chart with zoom in area mode');
|
|
myLine2.Set('chart.tickmarks', 'endcircle');
|
|
myLine2.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
|
|
myLine2.Draw();
|
|
}
|
|
</script>
|
|
|
|
<br clear="all" />
|
|
|
|
<pre class="code">
|
|
<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>
|
|
</pre>
|
|
|
|
|
|
<a name="thumbnail"></a>
|
|
<h2>Thumbnail mode</h2>
|
|
|
|
<canvas id="myc2" width="600" height="250" style="float: left">[No canvas support]</canvas>
|
|
|
|
<p>
|
|
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.
|
|
</p>
|
|
|
|
<p>
|
|
It uses some of the same properties as the regular zoom, eg <i>chart.fade.in</i>, <i>chart.fade.out</i>, <i>chart.zoom.shadow</i>
|
|
</p>
|
|
|
|
<br clear="all" />
|
|
|
|
<pre class="code">
|
|
<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>
|
|
</pre>
|
|
|
|
<p>
|
|
<b>Making the zoom circular</b><br /><br />
|
|
<img src="../images/border-radius.png" width="171" height="159" alt="A circular zoom window" style="float: right; border: 1px gray solid" />
|
|
It is possible to make the zoom in area mode circular by utilising the <i>border-radius</i> 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:
|
|
</p>
|
|
|
|
<pre class="code" style="width: 700px" />
|
|
<style>
|
|
.OfficeExcel_zoom_window {
|
|
border-radius: 50px ! important;
|
|
}
|
|
</style>
|
|
</pre>
|
|
|
|
This a chart demonstrating this technique <a href="zoom_thumbnail.html">here</a>. Note that browser support for this technique is limited.
|
|
|
|
<br clear="all" />
|
|
|
|
|
|
<a name="area"></a>
|
|
<h2>Area mode</h2>
|
|
|
|
<canvas id="myc3" width="600" height="250" style="float: right">[No canvas support]</canvas>
|
|
|
|
<p>
|
|
Another type of zoom available is <i>area</i>. This is somewhat similar to thumbnail, but allows you to draw a rectangle around
|
|
the specific area that you want to zoom.
|
|
</p>
|
|
|
|
<p>
|
|
Again, this uses some common zoom properties, such as <i>chart.zoom.factor</i>.
|
|
</p>
|
|
|
|
<p>
|
|
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.
|
|
</p>
|
|
|
|
<br clear="all" />
|
|
|
|
<pre class="code">
|
|
<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>
|
|
</pre>
|
|
|
|
</body>
|
|
</html> |