230 lines
8.4 KiB
HTML
230 lines
8.4 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>HOWTO: Add events to your charts</title>
|
|
|
|
<meta name="keywords" content="OfficeExcel html5 canvas chart docs links" />
|
|
<meta name="description" content="A HOWTO guide for adding events to your charts" />
|
|
<meta name="googlebot" content="NOODP">
|
|
|
|
<meta property="og:title" content="OfficeExcel: HTML5 Javascript charts library" />
|
|
<meta property="og:description" content="A chart 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>
|
|
|
|
<meta name="keywords" content="OfficeExcel chart html5 javascript canvas" />
|
|
<meta name="description" content="OfficeExcel: HTML5 Javascript charts library" />
|
|
|
|
<script src="../libraries/OfficeExcel.bar.js" ></script>
|
|
<script src="../libraries/OfficeExcel.common.core.js" ></script>
|
|
|
|
<?php PrintAnalyticsCode() ?>
|
|
</head>
|
|
|
|
<script>
|
|
window.onload = function ()
|
|
{
|
|
// -------------------------------------------------------------------------- //
|
|
|
|
|
|
var bar1 = new OfficeExcel.Bar('cvs1', [4,6,5,3,8,9]);
|
|
bar1.Set('chart.labels',['Kev','Louise','Pete','Gary','Fliss']);
|
|
bar1.Draw();
|
|
|
|
|
|
// -------------------------------------------------------------------------- //
|
|
|
|
|
|
function myClick (e, bar)
|
|
{
|
|
var index = bar[5];
|
|
|
|
switch (index) {
|
|
case 0: alert('The first bar was clicked'); break;
|
|
case 1: alert('The second bar was clicked'); break;
|
|
case 2: alert('The third bar was clicked'); break;
|
|
case 3: alert('The fourth bar was clicked'); break;
|
|
case 4: alert('The fifth bar was clicked'); break;
|
|
case 5: alert('The sixth bar was clicked'); break;
|
|
}
|
|
}
|
|
|
|
var bar2 = new OfficeExcel.Bar('cvs2', [4,6,5,3,8,9]);
|
|
bar2.Set('chart.labels',['Kev','Louise','Pete','Gary','Fliss']);
|
|
bar2.Set('chart.events.click', myClick);
|
|
bar2.Draw();
|
|
|
|
|
|
// -------------------------------------------------------------------------- //
|
|
|
|
|
|
function myMousemove (e, bar)
|
|
{
|
|
e.target.style.cursor = 'pointer';
|
|
}
|
|
|
|
var bar3 = new OfficeExcel.Bar('cvs3', [4,6,5,3,8,9]);
|
|
bar3.Set('chart.labels',['Kev','Louise','Pete','Gary','Fliss']);
|
|
bar3.Set('chart.events.click', myClick);
|
|
bar3.Set('chart.events.mousemove', myMousemove);
|
|
bar3.Draw();
|
|
}
|
|
</script>
|
|
<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>
|
|
>
|
|
HOWTO: Add events to your charts
|
|
</div>
|
|
|
|
<h1>HOWTO: <span>Add events to your charts</span></h1>
|
|
|
|
<p>
|
|
Starting from January 2012 adding events to your charts has become much easier. There are two new properties for this:
|
|
</p>
|
|
|
|
<ul>
|
|
<li>chart.events.mousemove</li>
|
|
<li>chart.events.click</li>
|
|
</ul>
|
|
|
|
<p>
|
|
These properties make adding interactivity to you charts very easy. Here's a step-by-step example of using them.
|
|
</p>
|
|
|
|
<h4>1. The chart without the event listeners</h4>
|
|
|
|
<p>
|
|
Here's the basic chart without any event listeners defined:
|
|
</p>
|
|
|
|
<canvas id="cvs1" width="600" height="250">[No canvas support]</canvas>
|
|
|
|
<pre class="code">
|
|
<script>
|
|
var bar1 = new OfficeExcel.Bar('cvs1', [4,6,5,3,8,9]);
|
|
bar1.Set('chart.labels',['Kev','Louise','Pete','Gary','Fliss']);
|
|
bar1.Draw();
|
|
</script>
|
|
</pre>
|
|
|
|
|
|
<!------------------------------------------------------------------------------------->
|
|
|
|
|
|
<h4>2. The chart with the click event listener added</h4>
|
|
|
|
<p>
|
|
The first step would be to add the click event listener. This function is run when a bar is clicked. The function
|
|
that you specify is passed two arguments - the (standard) event object, and a second array of coordinates that
|
|
describe the shape. This array can (but doesn't always) contain the OfficeExcel chart object and the index of the shape.
|
|
The index begins at zero - so the first bar would have an index of zero, the second bar would have an index of one
|
|
and so on.
|
|
</p>
|
|
|
|
<canvas id="cvs2" width="600" height="250">[No canvas support]</canvas>
|
|
|
|
<pre class="code">
|
|
<script>
|
|
<span style="color: green">
|
|
function myClick (e, bar)
|
|
{
|
|
var index = bar[5];
|
|
|
|
switch (index) {
|
|
case 0: alert('The first bar was clicked'); break;
|
|
case 1: alert('The second bar was clicked'); break;
|
|
case 2: alert('The third bar was clicked'); break;
|
|
case 3: alert('The fourth bar was clicked'); break;
|
|
case 4: alert('The fifth bar was clicked'); break;
|
|
case 5: alert('The sixth bar was clicked'); break;
|
|
}
|
|
}</span>
|
|
|
|
var bar2 = new OfficeExcel.Bar('cvs2', [4,6,5,3,8,9]);
|
|
bar2.Set('chart.labels',['Kev','Louise','Pete','Gary','Fliss']);
|
|
<span style="color: green">bar2.Set('chart.events.click', myClick);</span>
|
|
bar2.Draw();
|
|
</script>
|
|
</pre>
|
|
|
|
|
|
<!------------------------------------------------------------------------------------->
|
|
|
|
|
|
<h4>3. The chart with the mousemove event listener added</h4>
|
|
|
|
<p>
|
|
The second step is to add the mousemove event listener. This allows us to change the cursor to
|
|
<i>pointer</i> when the mouse is moved over a bar. Because this is a common operation the pointer
|
|
is automatically changed back to the previous state when it is moved away from the bar.
|
|
</p>
|
|
|
|
<canvas id="cvs3" width="600" height="250">[No canvas support]</canvas>
|
|
|
|
<pre class="code">
|
|
<script>
|
|
<span style="color: green">
|
|
function myMousemove (e, bar)
|
|
{
|
|
// It's automatically changed back to the previous state for you
|
|
e.target.style.cursor = 'pointer';
|
|
}
|
|
</span>
|
|
function myClick (e, bar)
|
|
{
|
|
var index = bar[5];
|
|
|
|
switch (index) {
|
|
case 0: alert('The first bar was clicked'); break;
|
|
case 1: alert('The second bar was clicked'); break;
|
|
case 2: alert('The third bar was clicked'); break;
|
|
case 3: alert('The fourth bar was clicked'); break;
|
|
case 4: alert('The fifth bar was clicked'); break;
|
|
case 5: alert('The sixth bar was clicked'); break;
|
|
}
|
|
}
|
|
|
|
var bar3 = new OfficeExcel.Bar('cvs2', [4,6,5,3,8,9]);
|
|
bar3.Set('chart.labels',['Kev','Louise','Pete','Gary','Fliss']);
|
|
bar3.Set('chart.events.click', myClick);</span>
|
|
<span style="color: green">bar3.Set('chart.events.mousemove', myMousemove);</span>
|
|
bar3.Draw();
|
|
</script>
|
|
</pre>
|
|
|
|
</body>
|
|
</html> |