515 lines
22 KiB
HTML
515 lines
22 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>Documentation about using tooltips in your charts</title>
|
|
|
|
<meta name="keywords" content="OfficeExcel html5 canvas chart docs tooltips" />
|
|
<meta name="description" content="Documentation about using tooltips in your charts" />
|
|
<meta name="googlebot" content="NOODP">
|
|
|
|
<link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
|
|
<link rel="icon" type="image/png" href="../favicon.png">
|
|
|
|
<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"/>
|
|
|
|
<!-- 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.bar.js"></script>
|
|
<script src="../libraries/OfficeExcel.pie.js"></script>
|
|
<!--[if lt IE 9]><script src="../excanvas/excanvas.original.js"></script><![endif]-->
|
|
|
|
<style>
|
|
.bar_chart_tooltips_css {
|
|
background-color: white ! important;
|
|
border: 2px solid black ! important;
|
|
padding: 3px;
|
|
padding-top: 5px ! important;
|
|
font-size: 14pt ! important;
|
|
text-align: center;
|
|
-webkit-box-shadow: 0 0 15px gray ! important;
|
|
-moz-box-shadow: 0 0 15px gray ! important;
|
|
box-shadow: 0 0 15px gray ! 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>
|
|
>
|
|
Using tooltips in your charts
|
|
</div>
|
|
|
|
<h1>Using <span>tooltips in 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>
|
|
|
|
<div style="float: right; text-align: right">
|
|
<canvas width="600" height="250" id="cvs">[No canvas support]</canvas><br />
|
|
Tooltip effect:
|
|
<select id="effect" onchange="OfficeExcel.Clear(line.canvas); line.Set('chart.tooltips.effect', this.options[this.selectedIndex].value); line.Draw();">
|
|
<option>none</option>
|
|
<option selected>fade</option>
|
|
<option>expand</option>
|
|
<option>contract</option>
|
|
<option>snap</option>
|
|
</select>
|
|
</div>
|
|
|
|
<script>
|
|
/**
|
|
* This is the function which handles the display of all the tooltips (for the line chart) - it is passed the
|
|
* zero-indexed number of the tooltip. Here, that index is just used to get the text from an array, but you
|
|
* could do anything with it. You could even perform an AJAX request to get the tooltip. Note that at this
|
|
* point, ie when the text is being retrieved, the tooltip DIV doesn't exist yet.
|
|
*/
|
|
function myTooltipFunc (idx)
|
|
{
|
|
var tooltips = ['<b>Winner!</b><br />John','Fred','Jane','Lou','Pete','Kev'];
|
|
return tooltips[idx];
|
|
}
|
|
|
|
|
|
window.onload = function ()
|
|
{
|
|
// Has to be a global variable
|
|
line = new OfficeExcel.Line('cvs', [64,34,26,35,51,24]);
|
|
|
|
/**
|
|
* These lines show you some of the alternative methods of specifying tooltips:
|
|
*
|
|
* o An array of strings - one per tooltip
|
|
* o An array of functions - one per tooltip
|
|
* o A single function that handles all of the tooltips
|
|
* o An "id:xxx" string (xxx being the ID tag of a div whose contents are used as the tooltip)
|
|
*
|
|
* Functions are passed a single argument - the zero-indexed number of the tooltip
|
|
*/
|
|
//line.Set('chart.tooltips', ['John', 'Fred', 'Jane', 'Lou', 'Pete', 'Kev']);
|
|
OfficeExcel.isOld() ? null : line.Set('chart.tooltips', [myTooltipFunc, myTooltipFunc, myTooltipFunc, myTooltipFunc, myTooltipFunc, myTooltipFunc]);
|
|
//line.Set('chart.tooltips', myTooltipFunc);
|
|
line.Set('chart.tooltips.effect', 'fade');
|
|
line.Set('chart.hmargin', 10);
|
|
line.Set('chart.linewidth', 2);
|
|
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.colors', ['green']);
|
|
line.Set('chart.tickmarks', 'circle');
|
|
line.Set('chart.labels', ['John', 'Fred', 'Jane', 'Lou', 'Pete', 'Kev']);
|
|
line.Draw();
|
|
|
|
|
|
/* -------------------------------------------------------------------------------------------------------- */
|
|
|
|
|
|
/**
|
|
* Create and display the bar chart
|
|
*
|
|
* A GLOBAL VARIABLE ON PURPOSE
|
|
*/
|
|
bar = new OfficeExcel.Bar('cvs2', [41.2,51.3,64.2,42.1,32.2,43.2,45.8,45.1,61.1]);
|
|
|
|
var grad = bar.context.createLinearGradient(0,25,0,225);
|
|
grad.addColorStop(0, 'blue');
|
|
grad.addColorStop(1, 'white');
|
|
|
|
bar.Set('chart.hmargin', 15);
|
|
bar.Set('chart.colors', [grad]);
|
|
bar.Set('chart.linewidth', 2);
|
|
bar.Set('chart.tickmarks', 'endsquare');
|
|
bar.Set('chart.labels', ['John', 'Pete', 'Glynn', 'Kev', 'Youssef', 'Lou', 'Kiff', 'Liz', 'Fred']);
|
|
bar.Set('chart.background.grid.autofit', true);
|
|
bar.Set('chart.strokecolor', 'rgba(0,0,0,0)');
|
|
OfficeExcel.isOld() ? null : bar.Set('chart.tooltips', getTooltip); // The getTooltip() function (defined below) provides the tooltip text ONLY
|
|
bar.Set('chart.tooltips.css.class', 'bar_chart_tooltips_css');
|
|
bar.Set('chart.tooltips.effect', 'fade');
|
|
bar.Draw();
|
|
|
|
/**
|
|
* This installs the OfficeExcel ontooltip event handler. The CreateTooltipGraph() function is defined below
|
|
*/
|
|
OfficeExcel.AddCustomEventListener(bar, 'ontooltip', CreateTooltipGraph);
|
|
}
|
|
|
|
|
|
/*
|
|
* Used by the bar chart to get the tooltip text.
|
|
*
|
|
* @param idx int The zero indexed number of the tooltip
|
|
*/
|
|
function getTooltip(idx)
|
|
{
|
|
return '<b>' + bar.Get('chart.labels')[idx] + 's stats</b><br /><canvas id="__tooltip_canvas__" width="400" height="150" style="background-color: white; margin: 5px">[No canvas support</canvas>';
|
|
}
|
|
|
|
|
|
/**
|
|
* This is the function that is called (by the ontooltip event) to create the tooltip charts
|
|
*
|
|
* @param obj object The chart object
|
|
*/
|
|
function CreateTooltipGraph(obj)
|
|
{
|
|
// These are the statistics that are shown in the tooltips. This data could quite easily
|
|
// come from your server.
|
|
var stats = [
|
|
[5,8,7,6,9,5,4,6,3,5,4,4],
|
|
[4,6,7,8,6,5,4,4,2,5,8,4],
|
|
[3,2,1,3,4,5,1,5,6,7,4,1],
|
|
[3,5,1,2,4,8,9,6,7,4,5,1],
|
|
[9,6,7,8,7,9,4,5,6,3,5,8],
|
|
[4,8,5,6,4,3,5,4,6,5,7,8],
|
|
[4,3,4,9,8,7,8,6,4,3,5,1],
|
|
[1,2,3,1,2,4,5,1,6,5,3,1],
|
|
[2,3,5,4,3,5,1,3,5,2,6,4]
|
|
];
|
|
|
|
var idx = OfficeExcel.Registry.Get('chart.tooltip').__index__;
|
|
var data = stats[idx];
|
|
|
|
// This data could be dynamic
|
|
var g = new OfficeExcel.Line('__tooltip_canvas__', data);
|
|
g.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
|
|
g.Set('chart.gutter.top', 5);
|
|
g.Set('chart.hmargin', 5);
|
|
g.Set('chart.tickmarks', 'endcircle');
|
|
g.Set('chart.background.grid.autofit', true);
|
|
g.Draw();
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
<ul>
|
|
<li><a href="#introduction">Introduction</a></li>
|
|
<li><a href="#hold">What can they hold?</a></li>
|
|
<li><a href="#how">How can I specify them?</a></li>
|
|
<li><a href="#what">What can I specify?</a></li>
|
|
<li><a href="#charts">Can I show charts in tooltips?</a></li>
|
|
<li><a href="#customise">Can I customise the appearance of tooltips?</a></li>
|
|
<li><a href="#effects">What tooltip effects are available?</a></li>
|
|
<li><a href="#firefox">Tooltips, the clipboard and Firefox</a></li>
|
|
<li><a href="#override">Can I override the tooltip function?</a></li>
|
|
</ul>
|
|
|
|
<a name="introduction"></a>
|
|
<h4>Introduction</h4>
|
|
|
|
<p>
|
|
Tooltips are a very effective and straight forward way to extend your charts and add more information to them, without overloading
|
|
the user.
|
|
</p>
|
|
|
|
<a name="hold"></a>
|
|
<h4>What can they hold?</h4>
|
|
|
|
<p>
|
|
At the base level, tooltips are DIVs, so they can hold a multitude of HTML - images, videos etc. See <a href="#charts">below</a>
|
|
for information on showing charts in tooltips.
|
|
</p>
|
|
|
|
<a name="how"></a>
|
|
<h4>How can I specify them?</h4>
|
|
|
|
<p>
|
|
You can specify them by including the tooltips code and then using the <i>chart.tooltips</i> property. For example:
|
|
</p>
|
|
|
|
<ol>
|
|
<li>
|
|
Include the OfficeExcel libraries.
|
|
<pre class="code">
|
|
<script src="OfficeExcel.common.core.js"></script>
|
|
<script src="OfficeExcel.common.tooltips.js"></script>
|
|
<script src="OfficeExcel.line.js"></script>
|
|
</pre>
|
|
</li>
|
|
|
|
<li>
|
|
Define your chart and set the tooltips property.
|
|
<pre class="code">
|
|
<script>
|
|
window.onload = function ()
|
|
{
|
|
var line = new OfficeExcel.Line('cvs', [64,34,26,35,51,24]);
|
|
<span style="color: green">line.Set('chart.tooltips', ['<b>Winner!</b><br />John', 'Fred', 'Jane', 'Lou', 'Pete', 'Kev']);</span>
|
|
line.Set('chart.tooltips.effect', 'expand');
|
|
line.Set('chart.hmargin', 10);
|
|
line.Set('chart.linewidth', 2);
|
|
line.Set('chart.shadow', true);
|
|
line.Set('chart.shadow.offsetx', 0);
|
|
line.Set('chart.shadow.offsety', 0);
|
|
line.Set('chart.shadow.color', 'green');
|
|
line.Set('chart.shadow.blur', 25);
|
|
line.Set('chart.colors', ['green']);
|
|
line.Set('chart.tickmarks', 'circle');
|
|
line.Set('chart.labels', ['John', 'Fred', 'Jane', 'Lou', 'Pete', 'Kev']);
|
|
line.Draw();
|
|
}
|
|
</script>
|
|
</pre>
|
|
</li>
|
|
</ol>
|
|
|
|
<a name="what"></a>
|
|
<h4>What can I specify?</h4>
|
|
|
|
<p>
|
|
The tooltips that you specify are usually strings (which can contain HTML). They can however also be functions which are called when they're about
|
|
to be displayed. The function should return the text that is used as the tooltip. You have the option to either specify
|
|
one function per data point, or just one function for all of the tooltips. You can mix functions and strings if you wish.
|
|
These functions are passed the numerical, zero-indexed tooltip index and the return value is used as the tooltip
|
|
text. So to summarise:
|
|
</p>
|
|
|
|
<ul>
|
|
<li>
|
|
An array of strings. The string is used as the tooltip. Eg:
|
|
<pre class="code">myGraph.Set('chart.tooltips', ['John', 'Fred', 'Lou']);</pre>
|
|
</li>
|
|
|
|
<li>
|
|
An array of function objects. Each function is called and should return the text to be used. Eg:
|
|
<pre class="code">myGraph.Set('chart.tooltips', [getJohnTooltip, getFredTooltip, getLouTooltip]);</pre>
|
|
</li>
|
|
|
|
<li>
|
|
A single function object. This is probably the most useful. This function is called whenever a tooltip
|
|
is about to be displayed, and passed the numerical, zero-indexed tooltip index of the point on the chart.
|
|
The function should return the text to be used as the tooltip. Note that the function you specify is called
|
|
<i>before</i>
|
|
the tooltip DIV has been created, so you cannot access it. If you wish to customise the appearance
|
|
of the tooltip, you can use either the tooltip <a href="css.html">CSS class</a> or a call to <i>setTimeout()</i>. Eg:
|
|
<pre class="code">myGraph.Set('chart.tooltips', getTooltip);</pre>
|
|
</li>
|
|
|
|
<li>
|
|
An array of DIV ids. This will make working with large tooltips easier. You basically specify the id of a DIV whose
|
|
.innerHTML is then used as the tooltip. Only the contents of the DIV are used, not the DIV itself, so you can hide
|
|
the DIV by setting its <i>display</i> CSS value to <i>none</i>. For example:
|
|
|
|
<pre class="code">myBar.Set('chart.tooltips', ['id:myDiv', ...])</pre>
|
|
</li>
|
|
</ul>
|
|
|
|
<a name="charts"></a>
|
|
<h4>Can I show charts in tooltips?</h4>
|
|
|
|
<canvas style="float: right" id="cvs2" width="600" height="250">[No canvas support]</canvas>
|
|
|
|
<p>
|
|
You can, and with the custom event support that OfficeExcel has, it's reasonably easy. Simply attach your function that
|
|
creates the chart to the <i>ontooltip</i> event. This allows the tooltip HTML to be created and added to the page
|
|
so that the code that creates the chart can run. The sequence is:
|
|
</p>
|
|
|
|
<ol>
|
|
<li style="margin-top: 0">Specify the HTML for the tooltip as normal (including the <canvas> tag).</li>
|
|
<li style="margin-top: 0">Use the <i>ontooltip</i> OfficeExcel event so that a function is called when a tooltip is shown.</li>
|
|
<li style="margin-top: 0">This function should subsequently create the chart.</li>
|
|
</ol>
|
|
|
|
<p>
|
|
The tooltip DIV is to be found in the OfficeExcel registry - <i>OfficeExcel.Registry.Get('chart.tooltip')</i>. And if you want it the
|
|
numerical zero indexed count of the tooltip is to be found in the <i>__index__</i> property:
|
|
<i>OfficeExcel.Registry.Get('chart.tooltip').__index__</i>
|
|
</p>
|
|
|
|
<pre class="code">
|
|
<script src="OfficeExcel.common.core.js" ></script>
|
|
<script src="OfficeExcel.common.tooltips.js" ></script>
|
|
<script src="OfficeExcel.bar.js" ></script>
|
|
<script src="OfficeExcel.line.js" ></script>
|
|
|
|
<style>
|
|
.OfficeExcel_tooltip {
|
|
background-color: white ! important;
|
|
}
|
|
</style>
|
|
|
|
<canvas id="cvs" width="600" height="250">[No canvas support]</canvas>
|
|
|
|
<script>
|
|
window.onload = function ()
|
|
{
|
|
labels = ['Gary','Pete','Lou','Ned','Kev','Fred'];
|
|
|
|
bar = new OfficeExcel.Bar("cvs", [4.5,28,13,26,35,36]);
|
|
bar.Set('chart.tooltips', function (idx) {return labels[idx] + 's stats<br/><canvas id="__tooltip_canvas__" width="400" height="150">[No canvas support]</canvas>';});
|
|
bar.Set('chart.hmargin', 10);
|
|
bar.Set('chart.tickmarks', 'endcircle');
|
|
bar.Set('chart.colors', ['blue']);
|
|
bar.Set('chart.ymax', 100);
|
|
bar.Set('chart.labels', labels);
|
|
bar.Draw();
|
|
|
|
<span style="color: green">OfficeExcel.AddCustomEventListener(line, 'ontooltip', CreateTooltipGraph);</span>
|
|
}
|
|
|
|
|
|
<span style="color: green">
|
|
/**
|
|
* This is the function that is called by the ontooltip event to create the tooltip charts
|
|
*
|
|
* @param obj object The chart object
|
|
*/
|
|
function CreateTooltipGraph(obj)
|
|
{
|
|
// This data could be dynamic
|
|
var line = new OfficeExcel.Line('__tooltip_canvas__', [5,8,7,6,9,5,4,6,3,5,4,4]);
|
|
line.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
|
|
line.Set('chart.hmargin', 5);
|
|
line.Set('chart.tickmarks', 'endcircle');
|
|
line.Set('chart.background.grid.autofit', true);
|
|
line.Draw();
|
|
}
|
|
</span>
|
|
</script>
|
|
</pre>
|
|
|
|
<p>
|
|
If you want to see more source code, simply view the source of this page and look at the code that creates the bar chart.
|
|
There's also a basic stripped-down example <a href="basic_tooltips.html">here</a>.
|
|
</p>
|
|
|
|
<br clear="all" />
|
|
|
|
<a name="customise"></a>
|
|
<h4>Can I customise the appearance of tooltips?</h4>
|
|
|
|
<p>
|
|
Yes. You can either use the default CSS class <i>OfficeExcel_tooltip</i>, or you can specify a specific CSS class that a
|
|
charts tooltips should use with the property <i>chart.tooltips.css.class</i>. The two charts on this page have
|
|
different looking tooltips by using this method - the line chart uses the default look, whilst the bar chart
|
|
overrides the CSS class name and sets it to <i>bar_chart_tooltips_css</i>. For example:
|
|
</p>
|
|
|
|
<pre class="code">bar.Set('chart.tooltips.css.class', 'bar_chart_tooltips_css');</pre>
|
|
|
|
<pre class="code">
|
|
<style>
|
|
.bar_chart_tooltips_css {
|
|
background-color: white ! important;
|
|
border: 2px solid black ! important;
|
|
padding: 3px;
|
|
}
|
|
</style>
|
|
</pre>
|
|
|
|
<p>
|
|
You can read more about OfficeExcel CSS classes <a href="css.html">here</a>.
|
|
</p>
|
|
|
|
<a name="effects"></a>
|
|
<h4>What tooltip effects are available?</h4>
|
|
|
|
<p>
|
|
These effects are available to you:
|
|
</p>
|
|
|
|
<ul>
|
|
<li>fade</li>
|
|
<li>expand</li>
|
|
<li>contract</li>
|
|
<li>snap</li>
|
|
<li>none</li>
|
|
</ul>
|
|
|
|
<p>
|
|
All of them are as their names imply. <i>fade</i> is a straight forward fade in effect, <i>expand</i> is another effect
|
|
which expands outward from the center of the tooltip, <i>contract</i> is like the <i>expand</i> effect but in reverse, <i>snap</i> is an effect which can be used in a limited set of circumstances
|
|
and "snaps" to the current mouse position and <i>none</i> is simply no effect at all. The default effect used
|
|
by all chart types is <i>fade</i>. Note: If you're showing canvases in your tooltips then the <i>expand</i>, <i>contract</i> and <i>snap</i>
|
|
effects will not work - you must use <i>fade</i> or <i>none</i>.
|
|
</p>
|
|
|
|
<p>
|
|
<b>Note:</b> The snap effect is only available to chart types where the tooltip is triggered using the onmousemove event.
|
|
Currently this means the <i>Line chart</i>, <i>Rscatter chart</i>, <i>Scatter chart</i> and Radar chart. It can also
|
|
be negatively effected when using multiple charts on one page.
|
|
</p>
|
|
|
|
|
|
<a name="firefox"></a>
|
|
<h4>Tooltips, the clipboard and Firefox</h4>
|
|
|
|
<p>
|
|
If you're using Firefox, there's a note about tooltips and the clipboard (ie copying text) on the <a href="issues.html">issues page</a>.
|
|
</p>
|
|
|
|
<a name="override"></a>
|
|
<h4>Can I override the tooltip function?</h4>
|
|
|
|
<p>
|
|
You can by stipulating <i>chart.tooltips.override</i>. This should be a function object that handles everything with regard
|
|
to showing the tooltip. Highlighting the chart is still done for you - the override function is only concerned with showing
|
|
the tooltip. The override function is passed these arguments:
|
|
</p>
|
|
|
|
<ul>
|
|
<li>canvas - The HTML canvas element, the same as what you get from document.getElementById()</li>
|
|
<li>text - The tooltip text (id:xxx strings are NOT expanded)</li>
|
|
<li>x - The X coordinate in relation to the entire page</li>
|
|
<li>y - The Y coordinate in relation to the entire page</li>
|
|
<li>index - The numerical index of the tooltip in the original tooltip array</li>
|
|
</ul>
|
|
|
|
<p>
|
|
<b>Note:</b> Although "id:xxx" strings are not expanded for you, you can easily do this yourself by using the
|
|
<i>OfficeExcel.getTooltipText('id:xxx')</i> function.
|
|
</p>
|
|
|
|
<pre class="code">
|
|
<script>
|
|
function tooltip_override (canvas, text, x, y, idx)
|
|
{
|
|
alert('In tooltip override function...');
|
|
}
|
|
myObj.Set('chart.tooltips.override', tooltip_override);
|
|
</script>
|
|
</pre>
|
|
|
|
<div id="foo">Foo</div>
|
|
</body>
|
|
</html> |