init repo
This commit is contained in:
nikolay ivanov
210
OfficeWeb/sdk/Common/Charts/docs/howto-linking.html
Normal file
210
OfficeWeb/sdk/Common/Charts/docs/howto-linking.html
Normal file
@@ -0,0 +1,210 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user