852 lines
35 KiB
HTML
852 lines
35 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>Miscellaneous documentation</title>
|
|
|
|
<meta name="keywords" content="OfficeExcel html5 canvas misc docs" />
|
|
<meta name="description" content="Miscellaneous documentation" />
|
|
<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="/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.tooltips.js" ></script>
|
|
<script src="../libraries/OfficeExcel.line.js" ></script>
|
|
<script src="../libraries/OfficeExcel.scatter.js" ></script>
|
|
|
|
<!--[if lt IE 9]><script src="../excanvas/excanvas.original.js"></script><![endif]-->
|
|
|
|
<?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>
|
|
>
|
|
Miscellaneous documentation
|
|
</div>
|
|
|
|
<h1>Miscellaneous <span>documentation</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="#fallback.content">Canvas fallback content and visually impaired users</a></li>
|
|
<li><a href="#limits">Upper and lower limits for horizontal bars</a></li>
|
|
<li><a href="#canvas.width.height">Setting the canvas width and height</a></li>
|
|
<li><a href="#canvas.coordinates">The canvas coordinate system</a></li>
|
|
<li><a href="#older.browsers">OfficeExcel and older browsers</a></li>
|
|
<li><a href="#msie">OfficeExcel and Microsoft Internet Explorer</a></li>
|
|
<li><a href="#debugging">Debugging tips</a></li>
|
|
<li><a href="#inspecting">Inspecting an OfficeExcel chart</a></li>
|
|
<li><a href="#context.menus">Double click context menus</a></li>
|
|
<li><a href="#event.handlers">Adding your own event handlers</a></li>
|
|
<li><a href="#crlf">Carriage returns and newlines in labels</a></li>
|
|
<li><a href="#character.set">Character set issues</a></li>
|
|
<li><a href="#OfficeExcel.identify">How to identify an OfficeExcel object</a></li>
|
|
<li><a href="#static.y.axis">Static Y axis</a></li>
|
|
<li><a href="#reducing.white.space">Reducing white space</a></li>
|
|
<li><a href="#in.graph">In-graph labels</a></li>
|
|
<li><a href="#shorthand.ingraph.labels">Shorthand for in-graph labels</a></li>
|
|
<li><a href="#dom2.events">DOM2 Event handlers</a></li>
|
|
<li><a href="#data.types">Data types</a></li>
|
|
<li><a href="#create.your.own">Creating your own chart type</a></li>
|
|
<li><a href="#world.map">World map</a></li>
|
|
<li><a href="#text">Adding text to your charts</a></li>
|
|
<li><a href="#crosshairs">Crosshairs</a></li>
|
|
<li><a href="#log.scale">Logarithmic scale</a></li>
|
|
<li><a href="#known.issues">Known issues</a></li>
|
|
</ul>
|
|
|
|
<a name="fallback.content"></a>
|
|
<br /> <br /> <br />
|
|
<h4>Canvas fallback content and visually impaired users</h4>
|
|
|
|
<p>
|
|
When using the canvas element you should be aware of the accessibility of your charts, for example where vision limited users are
|
|
concerned. Screen readers, for example, may not be able to convert a chart into something that is reasonable, so you should
|
|
consider
|
|
doing this yourself, possibly using the canvas fallback content (ie the content in between the canvas tags). A possible example
|
|
would be to put a table of data inside the canvas tag that the chart on the canvas represents. Doing this goes a long way
|
|
towards making the data available to everyone. You might also wish to consider using the <a href="zoom.html">full canvas
|
|
zoom</a> or the <a href="resizing.html">resizing feature</a> to enable people to enlarge the chart.
|
|
</p>
|
|
|
|
<a name="limits"></a>
|
|
<br /> <br /> <br />
|
|
<h4>Upper and lower limits for horizontal bars</h4>
|
|
|
|
<p>
|
|
If you don't wish to specify an upper or lower limit for horizontal bars, and you just want them to extend to the upper or lower
|
|
limits of the chart, whatever they may be, you can specify null for the value determining how far they extend. For cases where
|
|
the X axis is in the middle and you're specifying a negative start value, or you want the bar to extend all the way to the
|
|
bottom, you can simply specify an arbitrary length (eg -999999). Eg:
|
|
</p>
|
|
|
|
<pre class="code">myBar.Set('chart.background.hbars', [[0, null, 'green'], [0,-999999,'red']]);</pre>
|
|
|
|
<a name="canvas.width.height"></a>
|
|
<br /> <br /> <br />
|
|
<h4>Setting the canvas width and height</h4>
|
|
|
|
<p>
|
|
To set the canvas width and height you must use the HTML width/height attributes and NOT CSS. If you do use CSS, the canvas
|
|
will be scaled, and not enlarged, to fit the new width/height. Eg:
|
|
</p>
|
|
|
|
<pre class="code"><canvas id="myCanvas" width="200" height="100">[No canvas support]<canvas></pre>
|
|
|
|
<p>
|
|
<b>Note:</b>
|
|
When you resize the canvas using CSS, not only will it be scaled (not enlarged), but it will also NOT be cleared. You can
|
|
see this effect on the <a href="animation.html">animation page</a> with the jQuery animation example.
|
|
</p>
|
|
|
|
<a name="canvas.coordinates"></a>
|
|
<br /> <br /> <br />
|
|
<h4>The canvas coordinate system</h4>
|
|
<p>
|
|
The canvas coordinate system starts in the top left of the canvas (at [0,0] - the X value increasing as you go right
|
|
and the Y value as you go down), much like the CSS coordinates for the entire page. The
|
|
gutter goes around the canvas (ie top/bottom/left/right - where the labels and titles are placed), and the actual chart
|
|
sits in the middle.
|
|
</p>
|
|
|
|
<a name="older.browsers"></a>
|
|
<br /> <br /> <br />
|
|
<h4>OfficeExcel and older browsers</h4>
|
|
|
|
<p>
|
|
Older versions of browsers are supported (assuming they have canvas support), however, if they don't support the canvas text
|
|
or shadow APIs these will naturally be unavailable. The charts will still be drawn, though without shadows or text.
|
|
</p>
|
|
|
|
<a name="msie"></a>
|
|
<br /> <br /> <br />
|
|
<h4>OfficeExcel and Microsoft Internet Explorer</h4>
|
|
|
|
<p>
|
|
You can now use OfficeExcel with Internet Explorer 8 in conjunction with ExCanvas, (which brings a degree of <canvas> support to MSIE).
|
|
Bear in mind though that shadows are not available and thus are simulated. Microsoft Internet Explorer 9 has native <canvas>
|
|
support.
|
|
</p>
|
|
|
|
<a name="debugging"></a>
|
|
<br /> <br /> <br />
|
|
|
|
<h4>Debugging tips</h4>
|
|
|
|
<p>
|
|
If you're having a hard time debugging your chart, try these:
|
|
</p>
|
|
|
|
<ul>
|
|
<li>Ensure you have only one chart on the page</li>
|
|
<li>Make sure you have disabled your web browsers cache (the Firefox <a href="https://addons.mozilla.org/en-US/firefox/addon/60" target="_blank">Web Developer toolbar</a> can do this for Firefox)</li>
|
|
<li>
|
|
Try using <a href="http://www.getfirebug.com" target="_blank">Firebug</a> for Firefox or the
|
|
Webkit developer tools for Google Chrome (CTRL_SHIFT+J) and Safari (CTRL+ALT+C). There's a
|
|
video about using the Chrome developer tools
|
|
<a href="http://www.youtube.com/watch?v=N8SS-rUEZPg&feature=youtu.be" target="_blank">here</a>. These are very useful
|
|
tools that make development much easier.
|
|
</li>
|
|
<li>Reduce the page to the bare minimum.</li>
|
|
<li>Start with a very basic chart and build it up slowly.</li>
|
|
</ul>
|
|
|
|
|
|
|
|
<a name="inspecting"></a>
|
|
<br /> <br /> <br />
|
|
<h4>Inspecting an OfficeExcel chart</h4>
|
|
|
|
<p>
|
|
To help when debugging your OfficeExcel charts and canvas elements, you can use you browsers built in debugging tools.
|
|
An example is the WebKit developer tools which are available in Google Chrome and Apple Safari. There is a screenshot
|
|
of these tools (in docked mode) <a href="../images/introspection.png" target="_blank"><b>here</b></a>. To view these
|
|
tools in Google Chrome press CTRL+SHIFT+J. Inspect the canvas, and then the associated object can be found via
|
|
the <i>__object__</i> property.
|
|
</p>
|
|
|
|
|
|
<a name="context.menus"></a>
|
|
<br /> <br /> <br />
|
|
<h4>Double click context menus</h4>
|
|
|
|
<p>
|
|
Windows Opera, Windows Safari, Mac Safari and Mac Firefox all attach the context menu to the double click event (left mouse button),
|
|
not the right, in order to make it more reliable.
|
|
</p>
|
|
|
|
|
|
<a name="event.handlers"></a>
|
|
<br /> <br /> <br />
|
|
<h4>Adding your own event handlers</h4>
|
|
|
|
<p>
|
|
Because each OfficeExcel object exposes the canvas element (the same as what you get from <i>document.getElementById()</i>),
|
|
you can use normal procedures to add your own event handlers. Eg If you wanted to add your own onclick handler you could
|
|
do this:
|
|
</p>
|
|
|
|
<pre class="code">
|
|
<script>
|
|
var myBar = new OfficeExcel.Bar('cvs', [7,4,2,6,3,4,8]);
|
|
myBar.Draw();
|
|
|
|
myBar.canvas.onclick = function ()
|
|
{
|
|
}
|
|
</script>
|
|
</pre>
|
|
<p>
|
|
But what if, for example, you're using an OfficeExcel feature which
|
|
uses the event handler that you need? In this case you can use the standard DOM2 method <i>addEventListener()</i>. This will add
|
|
your new event handler without replacing any existing one (ie the one installed by OfficeExcel). For example:
|
|
</p>
|
|
|
|
<pre class="code">
|
|
<script>
|
|
var myBar = new OfficeExcel.Bar('cvs', [7,4,2,6,3,4,8]);
|
|
myBar.Draw();
|
|
|
|
function myFunc ()
|
|
{
|
|
}
|
|
|
|
myBar.canvas.addEventListener('click', myFunc, false)
|
|
</script>
|
|
</pre>
|
|
|
|
|
|
<a name="crlf"></a>
|
|
<br /> <br /> <br />
|
|
<h4>Carriage returns and newlines in labels</h4>
|
|
|
|
<p>
|
|
You can put carriage returns in your labels by using the string <i>\r\n</i>. This means your labels will span multiple lines.
|
|
Like so:
|
|
</p>
|
|
|
|
<pre class="code">myBar.Set('chart.labels', 'John\r\n(Winner!)', ...)</pre>
|
|
|
|
|
|
<a name="character.set"></a>
|
|
<br /> <br /> <br />
|
|
<h4>Character set issues</h4>
|
|
|
|
<p>
|
|
If you're seeing strange, unrecognised characters in your text labels or titles, you may need to specify the correct
|
|
character set that the browser should use. In PHP you can do this with the <i>header()</i> function (which, as the
|
|
name suggests, sends a HTTP header):
|
|
</p>
|
|
|
|
<pre class="code"><?php
|
|
header("Content-Type: text/html; charset=ISO-8859-1");
|
|
?></pre>
|
|
|
|
<p>
|
|
If you use Apache, you could use the <i>header</i> directive, though this may be overridden by other directives,
|
|
eg <i>AddDefaultCharset</i>.
|
|
</p>
|
|
|
|
<a name="OfficeExcel.identify"></a>
|
|
<br /> <br /> <br />
|
|
<h4>How to identify an OfficeExcel object</h4>
|
|
|
|
<p>
|
|
Because identity can sometimes be a tricky affair, there are a few OfficeExcel properties that you can use to check whether an object
|
|
is an OfficeExcel object:
|
|
</p>
|
|
|
|
<ul>
|
|
<li><i>obj.isOfficeExcel</i> - This is a boolean that you can use to clearly identify an OfficeExcel object.</li>
|
|
<li><i>obj.type</i> - This identifies the type of an OfficeExcel object. It is a string which contains a one word description of the objects chart type, eg bar/line/pie.</li>
|
|
</ul>
|
|
|
|
|
|
<!------------------------------------------------------------------------------------------------------------->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<a name="static.y.axis"></a>
|
|
<br /> <br /> <br />
|
|
<h4>Static Y axis</h4>
|
|
|
|
<!--
|
|
The HTML and script necessary for a chart with a static Y axis. The libraries are included at the top of the page
|
|
in the <HEAD>
|
|
-->
|
|
<div style="position: relative; float: right; margin-right: 10px">
|
|
<!-- The width here is set further down the page in script -->
|
|
<canvas id="axes" width="0" height="175" style="position: absolute; top: 0; left: 0; z-index: 100"></canvas>
|
|
<div style="width: 600px; overflow: auto">
|
|
<canvas id="cvs" width="1000" height="200"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
ShowGraphOne = function ()
|
|
{
|
|
/**
|
|
* This is the script that draws the chart
|
|
*/
|
|
line = new OfficeExcel.Line('cvs', [3,15,22,26,28,24,22,25,23,24,26,23,24,25,27,28,29,26,23,22,24,21,24,25]);
|
|
line.Set('chart.noaxes', true); // We draw the Y axis ourselves further down the page
|
|
line.Set('chart.gutter.top', 25);
|
|
line.Set('chart.gutter.bottom', 30);
|
|
line.Set('chart.gutter.left', 60);
|
|
line.Set('chart.hmargin', 5);
|
|
line.Set('chart.linewidth', 3);
|
|
line.Set('chart.shadow', true);
|
|
line.Set('chart.shadow.offsetx', 0);
|
|
line.Set('chart.shadow.offsety', 0);
|
|
line.Set('chart.shadow.blur', 15);
|
|
line.Set('chart.shadow.color', 'red');
|
|
line.Set('chart.tooltips', [
|
|
'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December',
|
|
'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'
|
|
]);
|
|
line.Set('chart.labels', [
|
|
'Jan `09','\r\nFeb 09', 'Mar 09','\r\nApr 09','May 09','\r\nJun 09','Jul 09','\r\nAug 09','Sep 09','\r\nOct 09','Nov 09', '\r\nDec 09',
|
|
'Jan 10', '\r\nFeb 10', 'Mar 10','\r\nApr 10','May 10','\r\nJun 10','Jul 10','\r\nAug 10','Sep 10','\r\nOct 10','Nov 10', '\r\nDec 10'
|
|
]);
|
|
line.Draw();
|
|
|
|
|
|
|
|
/**
|
|
* And this is the script that draws the left axis, on the other canvas (that doesn't move)
|
|
*/
|
|
ca = document.getElementById("axes")
|
|
co = ca.getContext('2d');
|
|
|
|
|
|
/**
|
|
* This sets the smaller canvas to cover the whole of the charts left gutter
|
|
*/
|
|
ca.width = line.Get('chart.gutter.left') + 1;
|
|
|
|
|
|
OfficeExcel.Clear(ca, 'white');
|
|
|
|
|
|
/**
|
|
* This draws the static axis
|
|
*/
|
|
|
|
co.beginPath();
|
|
co.moveTo(AA(this, line.Get('chart.gutter.left')), line.Get('chart.gutter.top'));
|
|
co.lineTo(AA(this, line.Get('chart.gutter.left')), line.canvas.height - line.Get('chart.gutter.bottom'));
|
|
|
|
// Draw the tickmarks on the axis
|
|
var numTicks = 10;
|
|
for (var i=0; i<=numTicks; ++i) {
|
|
co.moveTo(line.Get('chart.gutter.left'), AA(this, line.Get('chart.gutter.top') + (((line.canvas.height - line.Get('chart.gutter.top') - line.Get('chart.gutter.bottom')) / numTicks) * i)));
|
|
co.lineTo(line.Get('chart.gutter.left') - 3, AA(this, line.Get('chart.gutter.top') + (((line.canvas.height - line.Get('chart.gutter.top') - line.Get('chart.gutter.bottom')) / numTicks) * i)));
|
|
}
|
|
|
|
co.stroke();
|
|
|
|
|
|
|
|
/**
|
|
* This draws the labels for the static axis
|
|
*/
|
|
co.beginPath();
|
|
var color = 'black';
|
|
var size = 10;
|
|
|
|
for (var i=0; i<5; ++i) {
|
|
co.fillStyle = color;
|
|
co.textAlign = 'right';
|
|
co.textBaseline = 'middle';
|
|
var h = line.canvas.height - line.Get('chart.gutter.top') - line.Get('chart.gutter.bottom');
|
|
|
|
OfficeExcel.Text(co, 'Verdana', size, line.Get('chart.gutter.left') - 4, line.Get('chart.gutter.top') + (h * (i/5)), line.max - (line.max * (i/5)));
|
|
}
|
|
|
|
// Draw zero
|
|
OfficeExcel.Text(co,
|
|
'Verdana',
|
|
size,
|
|
line.Get('chart.gutter.left') - 4,
|
|
165,
|
|
'0');
|
|
co.fill();
|
|
}
|
|
</script>
|
|
|
|
A static Y axis is useful if you have a wide chart but limited space. Whilst not part of the OfficeExcel libraries itself, it can be
|
|
achieved with a little HTML, like the chart shown. The HTML and the script to achieve this is shown below.
|
|
It involves placing an extra canvas above the chart with the Y axis drawn on it. This canvas doesn't
|
|
move when the main canvas scrolls left and right.
|
|
|
|
<p />
|
|
|
|
<b>Note:</b> Because Firefox doesn't support the event.offsetX and event.offsetY properties and they have to be simulated,
|
|
scrolling in conjunction with tooltips in this case and this browser doesn't work.
|
|
|
|
<pre class="code">
|
|
<div style="position: relative; float: right; margin-right: 10px; margin-top: 10px">
|
|
<!-- The width here is set further down the page in script -->
|
|
<canvas id="axes" width="0" height="175" style="position: absolute; top: 0; left: 0; z-index: 100"></canvas>
|
|
<div style="width: 600px; overflow: auto">
|
|
<canvas id="cvs" width="1000" height="200"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
window.onload = function ()
|
|
{
|
|
/**
|
|
* This is the script that draws the chart
|
|
*/
|
|
line = new OfficeExcel.Line('cvs', [3,15,22,26,28,24,22,25,23,24,26,23,24,25,27,28,29,26,23,22,24,21,24,25]);
|
|
line.Set('chart.noaxes', true); // We draw the Y axis ourselves
|
|
line.Set('chart.gutter.top', 25);
|
|
line.Set('chart.gutter.bottom', 35);
|
|
line.Set('chart.gutter.left', 50);
|
|
line.Set('chart.hmargin', 5);
|
|
line.Set('chart.linewidth', 3);
|
|
line.Set('chart.shadow', true);
|
|
line.Set('chart.shadow.offsetx', 0);
|
|
line.Set('chart.shadow.offsety', 0);
|
|
line.Set('chart.shadow.blur', 15);
|
|
line.Set('chart.shadow.color', 'red');
|
|
line.Set('chart.tooltips', [
|
|
'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December',
|
|
'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'
|
|
]);
|
|
line.Set('chart.labels', [
|
|
'Jan 09','\r\nFeb 09', 'Mar 09','\r\nApr 09','May 09','\r\nJun 09','Jul 09','\r\nAug 09','Sep 09','\r\nOct 09','Nov 09', '\r\nDec 09',
|
|
'Jan 10', '\r\nFeb 10', 'Mar 10','\r\nApr 10','May 10','\r\nJun 10','Jul 10','\r\nAug 10','Sep 10','\r\nOct 10','Nov 10', '\r\nDec 10'
|
|
]);
|
|
line.Draw();
|
|
|
|
|
|
|
|
/**
|
|
* And this is the script that draws the left axis, on the other canvas (that doesn't move)
|
|
*/
|
|
ca = document.getElementById("axes")
|
|
co = ca.getContext('2d');
|
|
|
|
|
|
/**
|
|
* This sets the smaller canvas to cover the whole of the charts left gutter
|
|
*/
|
|
ca.width = line.Get('chart.gutter.left') + 1;
|
|
|
|
|
|
OfficeExcel.Clear(ca, 'white');
|
|
|
|
|
|
/**
|
|
* This draws the static axis
|
|
*/
|
|
co.beginPath();
|
|
co.moveTo(line.Get('chart.gutter.left'), line.Get('chart.gutter.top'));
|
|
co.lineTo(line.Get('chart.gutter.left'), line.canvas.height - line.Get('chart.gutter.bottom'));
|
|
|
|
// Draw the tickmarks on the axis
|
|
var numTicks = 10;
|
|
for (var i=0; i<=numTicks; ++i) {
|
|
co.moveTo(line.Get('chart.gutter.left'), line.Get('chart.gutter.top') + (((ca.height - line.Get('chart.gutter.top') - line.Get('chart.gutter.bottom')) / numTicks) * i));
|
|
co.lineTo(line.Get('chart.gutter.left') - 3, line.Get('chart.gutter.top') + (((ca.height - line.Get('chart.gutter.top') - line.Get('chart.gutter.bottom')) / numTicks) * i));
|
|
}
|
|
|
|
co.stroke();
|
|
|
|
|
|
|
|
/**
|
|
* This draws the labels for the static axis
|
|
*/
|
|
co.beginPath();
|
|
var color = 'black';
|
|
var size = 10;
|
|
|
|
for (var i=0; i<5; ++i) {
|
|
co.fillStyle = color;
|
|
co.textAlign = 'right';
|
|
co.textBaseline = 'middle';
|
|
var h = line.canvas.height - line.Get('chart.gutter.top') - line.Get('chart.gutter.bottom');
|
|
|
|
OfficeExcel.Text(co,
|
|
'Verdana',
|
|
size,
|
|
line.Get('chart.gutter.left') - 4,
|
|
line.Get('chart.gutter.top') + (h * (i/5)),
|
|
line.max - (line.max * (i/5)));
|
|
}
|
|
co.fill();
|
|
}
|
|
</script>
|
|
</pre>
|
|
<!------------------------------------------------------------------------------------------------------------->
|
|
|
|
|
|
<br clear="all" />
|
|
<br clear="all" />
|
|
|
|
|
|
<!-- This chart is an example of how you can eliminate the gutter white space by translating before you draw the chart. -->
|
|
|
|
<a name="reducing.white.space"></a>
|
|
<br /> <br /> <br />
|
|
<h4>Reducing white space</h4>
|
|
|
|
<canvas id="myc" width="600" height="250" style="float: right; border: dashed 1px gray; margin-right: 10px"></canvas>
|
|
|
|
<script>
|
|
ShowGraphTwo = function ()
|
|
{
|
|
var arg1 = [73, 65, 76, 75, 69, 73, 54, 61, 89, 77];
|
|
var arg2 = [264, 240, 240, 256, 200, 208, 240, 216, 248, 240]
|
|
|
|
var line1 = new OfficeExcel.Line('myc', arg1 , arg2);
|
|
line1.Set('chart.colors', ['red', 'silver']);
|
|
line1.Set('chart.background.barcolor1', 'white');
|
|
line1.Set('chart.background.barcolor2', 'white');
|
|
line1.Set('chart.labels', ['Jan 2000',
|
|
'Feb 2001',
|
|
'Mar 2002',
|
|
'Apr 2003',
|
|
'May 2004',
|
|
'Jun 2005',
|
|
'Jul 2006',
|
|
'Aug 2007',
|
|
'Sep 2008',
|
|
'Oct 2009'])
|
|
line1.Set('chart.filled', true);
|
|
line1.Set('chart.fillstyle', ['#fcc', '#cfc']);
|
|
line1.Set('chart.gutter.top', 5);
|
|
line1.Set('chart.gutter.bottom', 55);
|
|
line1.Set('chart.gutter.left', 55);
|
|
line1.Set('chart.gutter.right', 35);
|
|
line1.Set('chart.background.grid', true);
|
|
line1.Set('chart.ymax', 365)
|
|
line1.Set('chart.yaxispos', 'right');
|
|
line1.Set('chart.title.xaxis', 'Month');
|
|
line1.Set('chart.title.yaxis', 'Temperature');
|
|
line1.Set('chart.title.xaxis.pos', -0.3);
|
|
line1.Set('chart.title.yaxis.pos', 0.5);
|
|
line1.Set('chart.text.angle', 30);
|
|
line1.Set('chart.tooltips', [
|
|
'January 2000','February 2001','March 2002','April 2003','May 2004','June 2005','July 2006','August 2007','September 2008','October 2009',
|
|
'January 2000','February 2001','March 2002','April 2003','May 2004','June 2005','July 2006','August 2007','September 2008','October 2009'
|
|
]);
|
|
line1.Draw();
|
|
}
|
|
</script>
|
|
|
|
<p>
|
|
New in June 2011 is the ability to set the gutters independently. This removes the necessity to translate
|
|
and adjust the coordinates to get more space and is far more straight-forward. The new properties are:
|
|
|
|
<ul>
|
|
<li>chart.gutter.left</li>
|
|
<li>chart.gutter.right</li>
|
|
<li>chart.gutter.top</li>
|
|
<li>chart.gutter.bottom</li>
|
|
</ul>
|
|
|
|
You can read more about this change <a href="gutters.html"><b>here</b></a>.
|
|
</p>
|
|
|
|
|
|
<br clear="all" />
|
|
|
|
|
|
<a name="in.graph"></a>
|
|
<br /> <br /> <br />
|
|
<h4>In-graph labels</h4>
|
|
|
|
<p>
|
|
As well as an array of strings, like this:
|
|
</p>
|
|
|
|
<pre class="code">obj.Set('chart.labels.ingraph', ['First label','Second label']);</pre>
|
|
|
|
<p>
|
|
The string can also be an array, consisting of color and placement information, like this:
|
|
</p>
|
|
|
|
<pre class="code">obj.Set('chart.labels.ingraph', ['First label',<span style="color: green">['Second label', 'red', 'yellow', -1, 50]</span> ]);</pre>
|
|
|
|
|
|
<p>
|
|
You can read more information about this <a href="ingraph.html">here</a>.
|
|
</p>
|
|
|
|
<a name="shorthand.ingraph.labels"></a>
|
|
<br /> <br /> <br />
|
|
<h4>Shorthand for in-graph labels</h4>
|
|
<p>
|
|
Instead of providing a full array of <i>null</i> elements for in-graph labels which may get a little unwieldy,
|
|
you can instead specify an integer that specifies how many elements to skip. Like this:
|
|
</p>
|
|
|
|
<pre class="code">line.Set('chart.labels.ingraph', [6, 'July', 3, 'November']);</pre>
|
|
|
|
<br clear="all" />
|
|
<br clear="all" />
|
|
|
|
<a name="dom2.events"></a>
|
|
<br /> <br /> <br />
|
|
<h4>DOM2 Event handlers</h4>
|
|
<p>
|
|
All the charts have now (1st October 2010) been converted to DOM2 for tooltips event registration. This allows them to
|
|
be far more co-operative if you're using events. Tooltips will not be compatible with MSIE8 - the charts will still be
|
|
drawn, albeit without tooltips.
|
|
</p>
|
|
|
|
|
|
|
|
<br clear="all" />
|
|
|
|
|
|
|
|
|
|
<a name="data.types"></a>
|
|
<br /> <br /> <br />
|
|
<h4>Data types</h4>
|
|
<p>
|
|
If your data values aren't the correct type - ie numbers - it can cause problems. Pay particular attention to this
|
|
when you're getting your data from data sources which may be classed as strings, such as JSON or AJAX requests.
|
|
</p>
|
|
|
|
|
|
|
|
|
|
<a name="create.your.own"></a>
|
|
<br /> <br /> <br />
|
|
<h4>Creating your own chart type</h4>
|
|
<p>
|
|
If you wish to create your own chart type, there is a skeleton file
|
|
<a href="../libraries/OfficeExcel.skeleton.js" target="_blank"><b>here</b></a> that you can use as a starting point.
|
|
This file contains the bare bones of an OfficeExcel object, such as the .Get() and .Set() methods, as well as examples
|
|
of common properties.
|
|
</p>
|
|
|
|
|
|
<a name="world.map"></a>
|
|
<br /> <br /> <br />
|
|
<h4>World map</h4>
|
|
<p>
|
|
There is no function in OfficeExcel to do mapping, either of the World or a smaller region. If this is what you want then you
|
|
may be interested in this HTML5 canvas based mapping system:
|
|
<a href="http://joncom.be/code/excanvas-world-map/" target="_blank">http://joncom.be/code/excanvas-world-map/</a>
|
|
</p>
|
|
|
|
|
|
<a name="text"></a>
|
|
<br /> <br /> <br />
|
|
<h4>Adding text to your charts</h4>
|
|
<p>
|
|
You can add arbitrary text to your charts by using the OfficeExcel API. For example you could use this code after the call to .Draw():
|
|
</p>
|
|
|
|
<pre class="code">
|
|
function DrawSubTitle (obj)
|
|
{
|
|
var context = obj.context;
|
|
|
|
context.beginPath();
|
|
context.fillStyle = 'gray';
|
|
OfficeExcel.Text(context,
|
|
'Verdana',
|
|
7,
|
|
obj.canvas.width / 2,
|
|
obj.Get('chart.gutter.top') - 6,
|
|
'The subtitle',
|
|
'center',
|
|
'center');
|
|
context.fill();
|
|
}
|
|
|
|
DrawSubTitle(myLine);
|
|
</pre>
|
|
|
|
<a name="crosshairs"></a>
|
|
<br /> <br /> <br />
|
|
<h4>Crosshairs</h4>
|
|
|
|
<div style="width: 600px; float: right">
|
|
<canvas id="scatter_crosshairs" width="600" height="250">[No canvas support]</canvas>
|
|
<input type="text" style="margin-left: 25px; width: 550px" id="crosshairs.out" />
|
|
</div>
|
|
|
|
<script>
|
|
function ShowGraphThree ()
|
|
{
|
|
var data = [[84,68],[45,65],[185,54],[222,62],[354,45],[153,21]];
|
|
|
|
var scatter = new OfficeExcel.Scatter('scatter_crosshairs', data);
|
|
scatter.Set('chart.xmax', 365);
|
|
scatter.Set('chart.labels', ['Q1','Q2','Q3','Q4']);
|
|
|
|
/**
|
|
* Configure the crosshairs
|
|
*/
|
|
if (!OfficeExcel.isOld()) {
|
|
scatter.Set('chart.crosshairs', true);
|
|
scatter.Set('chart.crosshairs.coords', true);
|
|
scatter.Set('chart.crosshairs.coords.labels.x', 'Day');
|
|
scatter.Set('chart.crosshairs.coords.labels.y', 'Amount');
|
|
scatter.Set('chart.crosshairs.coords.fixed', true);
|
|
scatter.Set('chart.crosshairs.color', 'gray');
|
|
scatter.Set('chart.crosshairs.linewidth', 1);
|
|
}
|
|
|
|
scatter.Draw();
|
|
|
|
OfficeExcel.AddCustomEventListener(scatter, 'oncrosshairs', myFunc);
|
|
}
|
|
|
|
window.onload = function ()
|
|
{
|
|
ShowGraphOne();
|
|
ShowGraphTwo();
|
|
ShowGraphThree();
|
|
ShowGraphFour();
|
|
}
|
|
|
|
/**
|
|
* Now add the custom event listener that updates the text box with the coordinates
|
|
*/
|
|
function myFunc (obj)
|
|
{
|
|
var x = obj.canvas.__crosshairs_x__;
|
|
var y = obj.canvas.__crosshairs_y__;
|
|
|
|
document.getElementById("crosshairs.out").value = x + ',' + y;
|
|
}
|
|
</script>
|
|
|
|
<p>
|
|
Some charts type have the ability to use crosshairs. The supported charts are:
|
|
</p>
|
|
|
|
<ul>
|
|
<li>Bar charts</li>
|
|
<li>Line charts</li>
|
|
<li>Scatter charts</li>
|
|
<li>Waterfall charts</li>
|
|
</ul>
|
|
|
|
<p>
|
|
There are various options that control the crosshairs, though because some apply to the readout, they are only applicable to
|
|
the Scatter chart. The crosshairs can be customised by stipulating the linewidth, the color and whether only the horizontal,
|
|
vertical or both lines are shown.
|
|
</p>
|
|
|
|
<h4>Crosshairs and the Scatter chart</h4>
|
|
<p>
|
|
Because the X axis is scaled, the Scatter chart has the extra ability of having a coordinates readout when
|
|
the crosshairs are in use. This is shown in the example above. The appropriate properties are:
|
|
</p>
|
|
|
|
<ul>
|
|
<li>obj.canvas.__crosshairs_x__</li>
|
|
<li>obj.canvas.__crosshairs_y__</li>
|
|
<li>obj.canvas.__crosshairs_labels__ (this is the coordinates readout)</li>
|
|
</ul>
|
|
|
|
<p>
|
|
In the above example the coordinates are put in the text input by using the custom event <i>oncrosshairs</i>. This is as
|
|
follows:
|
|
</p>
|
|
|
|
<pre class="code">
|
|
function myFunc (obj)
|
|
{
|
|
var x = obj.canvas.__crosshairs_x__;
|
|
var y = obj.canvas.__crosshairs_y__;
|
|
|
|
document.getElementById("crosshairs.out").value = x + ',' + y;
|
|
}
|
|
OfficeExcel.AddCustomEventListener(scatter, 'oncrosshairs', myFunc);
|
|
</pre>
|
|
|
|
<a name="log.scale"></a>
|
|
<br /> <br /> <br />
|
|
<h4>Logarithmic scale</h4>
|
|
|
|
<canvas id="log_scale_example" width="600" height="250" style="float: right">[No canvas support]</canvas>
|
|
<script>
|
|
function ShowGraphFour ()
|
|
{
|
|
var g4 = new OfficeExcel.Line('log_scale_example', [0.1,2.1,2.3,2.5,3.85,4.6,4.4]);
|
|
g4.Set('chart.gutter.left', 60);
|
|
g4.Set('chart.ylabels.specific', ['100,000','10,000','1000','1000','10']);
|
|
g4.Set('chart.labels', ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday']);
|
|
g4.Draw();
|
|
}
|
|
</script>
|
|
|
|
<p>
|
|
It's possible to get a logarithmic scale in OfficeExcel by using <i>chart.scale.specific</i>. The actual scale that is used
|
|
when drawing the chart is 0-5 (for example), and the scale that is displayed is 10/100/1000/10,000/100,000. This
|
|
example is shown.
|
|
</p>
|
|
|
|
|
|
<br clear="all" />
|
|
|
|
|
|
<a name="known.issues"></a>
|
|
<br /> <br /> <br />
|
|
<h4>Known issues</h4>
|
|
|
|
<p>
|
|
There's a few known issues documented <a href="issues.html">here</a>
|
|
</p>
|
|
|
|
|
|
<p />
|
|
</body>
|
|
</html> |