210 lines
9.6 KiB
HTML
210 lines
9.6 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 links to your charts</title>
|
|
|
|
<meta name="keywords" content="OfficeExcel html5 canvas chart docs links" />
|
|
<meta name="description" content="A HOWTO guide for adding links 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 Javascript charts & HTML5 canvas charts library" />
|
|
|
|
<script src="../libraries/OfficeExcel.bar.js" ></script>
|
|
<script src="../libraries/OfficeExcel.common.core.js" ></script>
|
|
<script src="../libraries/OfficeExcel.common.tooltips.js" ></script>
|
|
|
|
<?php PrintAnalyticsCode() ?>
|
|
</head>
|
|
|
|
<script>
|
|
window.onload = function (e)
|
|
{
|
|
/**
|
|
* The code that produces the chart for the tooltips method
|
|
*/
|
|
var bar_tooltips = new OfficeExcel.Bar('cvs_tooltips', [4,6,3,5,4]);
|
|
bar_tooltips.Set('chart.tooltips', ['Link 1: <a href="http://www.google.com" target="_blank">Google</a>',
|
|
'Link 2: <a href="http://www.yahoo.com" target="_blank">Yahoo</a>',
|
|
'Link 3: <a href="http://www.bing.com" target="_blank">Bing</a>',
|
|
'Link 4: <a href="http://news.bbc.co.uk" target="_blank">BBC News</a>',
|
|
'Link 5: <a href="http://www.facebook.com" target="_blank">Facebook</a>']);
|
|
bar_tooltips.Set('chart.labels', ['Google','Yahoo','Bing','BBC News','Facebook']);
|
|
bar_tooltips.Draw();
|
|
|
|
/**
|
|
* This is the function that is run when a bar is clicked (for the chart defined below)
|
|
*/
|
|
function myEventListener (e, bar)
|
|
{
|
|
switch (bar[5]) {
|
|
case 0: location.href = 'http://www.google.com'; break;
|
|
case 1: location.href = 'http://www.yahoo.com'; break;
|
|
case 2: location.href = 'http://www.bing.com'; break;
|
|
case 3: window.open('http://news.bbc.co.uk', '_blank'); break;
|
|
case 4: window.open('http://www.facebook.com', '_blank', 'top=50,left=50,width=900,height=600'); break;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* The code that produces the chart for the pseudo-events method
|
|
*/
|
|
var bar_events = new OfficeExcel.Bar('cvs_events', [4,6,3,5,4]);
|
|
bar_events.Set('chart.labels', ['Google','Yahoo','Bing','BBC News','Facebook']);
|
|
bar_events.Set('chart.events.click', myEventListener);
|
|
bar_events.Set('chart.events.mousemove', function (e, bar) {e.target.style.cursor = 'pointer';});
|
|
bar_events.Draw();
|
|
|
|
/**
|
|
* The code that produces the chart for the anchor method
|
|
*/
|
|
var bar_anchor = new OfficeExcel.Bar('cvs_anchor', [4,6,3,5,4]);
|
|
bar_anchor.Set('chart.labels', ['Google','Yahoo','Bing','BBC News','Facebook']);
|
|
bar_anchor.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 links to your charts
|
|
</div>
|
|
|
|
<h1>HOWTO: <span>Add links to your charts</span></h1>
|
|
|
|
<p>
|
|
There are a few methods of adding links to your charts or redirecting to new pages when certain user actions are triggered.
|
|
The different methods are listed below.
|
|
</p>
|
|
|
|
<h4>1. Tooltips</h4>
|
|
<p>
|
|
Tooltips are regular HTML DIV tags and so can contain a wide variety of HTML - links, movies, pictures etc They can be formatted
|
|
with CSS (and there's also a specific CSS class that you can use to make them all appear the same - <i>OfficeExcel_tooltip</i>).
|
|
For example:
|
|
</p>
|
|
|
|
<canvas id="cvs_tooltips" width="600" height="250">[No canvas support]</canvas>
|
|
|
|
<pre class="code">
|
|
<script>
|
|
var bar = new OfficeExcel.Bar('cvs', [4,6,3,5,4]);
|
|
bar.Set('chart.tooltips', ['Link 1: <a href="http://www.google.com" target="_blank">Google</a>',
|
|
'Link 2: <a href="http://www.yahoo.com" target="_blank">Yahoo</a>',
|
|
'Link 3: <a href="http://www.bing.com" target="_blank">Bing</a>',
|
|
'Link 4: <a href="http://news.bbc.co.uk" target="_blank">BBC News</a>',
|
|
'Link 5: <a href="http://www.facebook.com" target="_blank">Facebook</a>']);
|
|
bar.Set('chart.labels', ['Google','Yahoo','Bing','BBC News','Facebook']);
|
|
bar.Draw();
|
|
</script>
|
|
</pre>
|
|
|
|
<h4>2. The new pseudo-event listeners</h4>
|
|
<p>
|
|
As of January 2012 new pseudo-event listeners have been added. This means that you can specify a Javascript function to run
|
|
when a bar is clicked. The same function is called for all bars so to determine which bar has been clicked you will have to
|
|
check the index of the bar, as below.
|
|
</p>
|
|
|
|
<canvas id="cvs_events" width="600" height="250">[No canvas support]</canvas>
|
|
|
|
<pre class="code">
|
|
<script>
|
|
/**
|
|
* This is the function that is run when a bar is clicked (for the chart defined below)
|
|
*/
|
|
function myEventListener (e, bar)
|
|
{
|
|
var index = bar[5];
|
|
|
|
switch (index) {
|
|
case 0: location.href = 'http://www.google.com'; break;
|
|
case 1: location.href = 'http://www.yahoo.com'; break;
|
|
case 2: location.href = 'http://www.bing.com'; break;
|
|
case 3: window.open('http://news.bbc.co.uk', '_blank'); break;
|
|
case 4: window.open('http://www.facebook.com', '_blank', 'top=50,left=50,width=900,height=600'); break;
|
|
}
|
|
}
|
|
|
|
var bar = new OfficeExcel.Bar('cvs', [4,6,3,5,4]);
|
|
bar.Set('chart.events.click', myEventListener);
|
|
bar.Set('chart.events.mousemove', function (e, bar) {e.target.style.cursor = 'pointer';});
|
|
bar.Set('chart.labels', ['Google','Yahoo','Bing','BBC News','Facebook']);
|
|
bar.Draw();
|
|
</script>
|
|
</pre>
|
|
|
|
<h5>Note</h5>
|
|
|
|
<p>
|
|
As shown you can either assign a URL to <i>location.href</i>, or alternatively you can use the <i>window.open</i> method. The
|
|
difference is largely immaterial however the <i>window.open</i> method does mean you can open the link in a new window, which
|
|
is something you can't do if you use <i>location.href</i>. You can also specify what browser controls are shown
|
|
(eg. the address bar/buttons etc), the size and the position of the window if you use the <i>window.open</i> method.
|
|
</p>
|
|
|
|
<h4>3. An anchor tag around the canvas</h4>
|
|
<p>
|
|
This method is rather simple but is mentioned for completeness. You can of course link the whole of the canvas in your HTML
|
|
page. The disadvantage with this is that the link will apply to the whole canvas, gutters included, and that there can be
|
|
only one URL.
|
|
</p>
|
|
|
|
<a href="http://www.google.com" target="_blank">
|
|
<canvas id="cvs_anchor" width="600" height="250">[No canvas support]</canvas>
|
|
</a>
|
|
|
|
<pre class="code">
|
|
<a href="http://www.google.com" target="_blank">
|
|
<canvas id="cvs" width="600" height="250">[No canvas support]</canvas>
|
|
</a>
|
|
</pre>
|
|
|
|
<p>
|
|
You could also use the canvas onclick event to trigger some Javascript code and then redirect, like this:
|
|
</p>
|
|
|
|
<pre class="code">
|
|
<canvas id="cvs" width="600" height="250" onclick="alert('Redirecting...');location.href='http://www.google.com'">[No canvas support]</canvas>
|
|
</pre>
|
|
|
|
</body>
|
|
</html> |