1 <?php ob_start('ob_gzhandler') ?>
5 <meta http-equiv="X-UA-Compatible" content="chrome=1">
8 * o------------------------------------------------------------------------------o
9 * | This file is part of the RGraph package - you can learn more at: |
11 * | http://www.rgraph.net |
13 * | This package is licensed under the RGraph license. For all kinds of business |
14 * | purposes there is a small one-time licensing fee to pay and for non |
15 * | commercial purposes it is free to use. You can read the full license here: |
17 * | http://www.rgraph.net/LICENSE.txt |
18 * o------------------------------------------------------------------------------o
21 <title>RGraph: HTML5 canvas graph library - Tooltips</title>
23 <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
24 <link rel="icon" type="image/png" href="../favicon.png">
26 <script src="../libraries/RGraph.common.core.js"></script>
27 <script src="../libraries/RGraph.common.tooltips.js"></script>
28 <script src="../libraries/RGraph.line.js"></script>
29 <script src="../libraries/RGraph.bar.js"></script>
30 <script src="../libraries/RGraph.pie.js"></script>
31 <!--[if IE 8]><script src="../excanvas/excanvas.compressed.js"></script><![endif]-->
34 .bar_chart_tooltips_css {
35 background-color: white ! important;
36 border: 2px solid black ! important;
38 -webkit-box-shadow: 0 0 15px gray ! important;
39 -moz-box-shadow: 0 0 15px gray ! important;
40 box-shadow: 0 0 15px gray ! important;
46 <!-- Social networking buttons -->
47 <script src="../libraries/RGraph.common.core.js" ></script>
50 function HideTwitterDIV ()
52 document.getElementById("twitter_div").style.opacity = 0;
53 document.getElementById("twitter_div").style.display = 'none';
57 function ShowTwitterDIV (e)
59 var e = RGraph.FixEventObject(document.all ? event : e);
60 var div = document.getElementById("twitter_div");
61 var img = document.getElementById("twitter_icon");
63 div.style.display = 'block';
64 div.style.left = (RGraph.getCanvasXY(img)[0] + img.offsetWidth - div.offsetWidth + 110) + 'px';
65 div.style.top = (RGraph.getCanvasXY(img)[1] - 1) + 'px';
70 setTimeout('document.getElementById("twitter_div").style.opacity = 0.2;', 25);
71 setTimeout('document.getElementById("twitter_div").style.opacity = 0.4;', 50);
72 setTimeout('document.getElementById("twitter_div").style.opacity = 0.6;', 100);
73 setTimeout('document.getElementById("twitter_div").style.opacity = 0.8;', 125);
74 setTimeout('document.getElementById("twitter_div").style.opacity = 1.0;', 150);
82 * This code installs the event handler that hides the Twitter DIV
85 window.attachEvent('onload', function () {document.body.attachEvent('onclick', HideTwitterDIV);});
87 window.addEventListener('click', HideTwitterDIV, false);
91 <!-- The twitter DIV -->
92 <div id="twitter_div" style="position: absolute;top: 0;left: 0;background-color: #eee;border: 2px dashed black;box-shadow: 0 0 15px #aaa;-moz-box-shadow: 0 0 15px #aaa;-webkit-box-shadow: 0 0 15px #aaa;padding: 3px;display: none;opacity: 0;z-index: 99;">
93 <a href="http://twitter.com/home/?status=RGraph%3A+HTML5+canvas+graph+library+based+on+the+HTML5+canvas+tag+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas" target="_blank" title="Share on Twitter" rel="nofollow" style="text-decoration: none">Tweet about RGraph</a><br>
94 <a href="http://twitter.com/_rgraph" style="text-decoration: none" rel="nofollow" target="_blank">Follow for HTML5 news</a>
97 <div id="social_icons" class="warning" style="top: 0; left: 5px; position: absolute">
100 if (navigator.userAgent.indexOf('Opera') == -1) {
101 document.getElementById("social_icons").style.position = 'fixed';
102 document.getElementById("twitter_div").style.position = 'fixed';
107 <b style="display: inline-block; position: relative; top: 1px">Bookmark and share:</b>
111 <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20graph%20library%20supporting%20a%20wide%20range%20of%20different%20graph%20types:Bar,%20Bipolar,%20Donut,%20Funnel,%20Gantt,%20Horizontal%20Bar,%20LED,%20Line,%20Meter,%20Odometer,%20Pie,%20Progress%20Bar,%20Rose,%20RScatter,%20Scatter%20and%20Traditional%20Radar&title=RGraph:%20HTML5%20canvas%20graph%20library%20based%20on%20the%20HTML5%20canvas%20tag" target="_blank">
112 <img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" align="absmiddle" />
115 <a href="" target="_blank" onmouseover="if (document.getElementById('twitter_div').style.display == 'none') ShowTwitterDIV(event);" onclick="event.stopPropagation(); event.cancelBubble = true; return false">
116 <img src="../images/twitter.png" id="twitter_icon" alt="tweet this site" width="22" height="22" border="0" align="absmiddle" />
121 <a title="Post to Google Buzz!" href="" onclick="window.open('http://www.google.com/buzz/post?url=http://www.rgraph.net&imageurl=http://www.rgraph.net/images/logo.png', 'google_buzz_window', 'width=800,height=400,top=100,left=100'); return false">
122 <img src="../images/buzz.png" width="22" height="22" alt="Post to Google Buzz!" align="absmiddle" style="position: relative; top: -2px; border: 0" border="0"/>
126 <a title="Share RGraph on Facebook" href="" onclick="window.open('http://www.facebook.com/sharer.php?u=http://www.rgraph.net&t=RGraph:%20HTML5%20canvas%20graph%20library', 'facebook_window', 'width=500,height=300,top=100,left=100'); return false">
127 <img src="../images/facebook.png" width="22" height="22" alt="Post to Facebook" align="absmiddle" style="position: relative; top: -2px; border: 0" border="0"/>
130 <a href="mailto:share@friendfeed.com" title="Share on FriendFeed">
131 <img src="../images/friendfeed.png" width="22" height="22" alt="Share on FriendFeed" border="0" align="absmiddle" />
134 <a href="http://www.stumbleupon.com/submit?url=http://www.rgraph.net" target="_blank" title="Share on StumbleUpon" >
135 <img src="../images/stumble.png" alt="Stumble! this site" width="22" height="22" border="0" align="absmiddle" />
140 <!-- /Social networking buttons -->
142 <div id="breadcrumb">
143 <a href="../index.html">RGraph: HTML5 canvas graph library</a>
145 <a href="index.html">Documentation</a>
150 <h1>RGraph: HTML5 canvas graph library - Tooltips</h1>
153 if (RGraph.isIE8()) {
154 document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the graphs, 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 RGraph 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. Click <a href="http://groups.google.com/group/rgraph/browse_thread/thread/c5651ff8c56b8f3c#" target="_blank">here</a> to see some screenshots.</div>');
158 <div style="float: right; text-align: right">
159 <canvas width="600" height="250" id="cvs">[No canvas support]</canvas><br />
161 <select id="effect" onchange="RGraph.Clear(line.canvas); line.Set('chart.tooltips.effect', this.options[this.selectedIndex].value); line.Draw();">
162 <option>none</option>
163 <option selected>fade</option>
164 <option>expand</option>
165 <option>contract</option>
166 <option>snap</option>
172 * This is the function which handles the display of all the tooltips (for the line chart) - it is passed the
173 * zero-indexed number of the tooltip. Here, that index is just used to get the text from an array, but you
174 * could do anything with it. You could even perform an AJAX request to get the tooltip. Note that at this
175 * point, ie when the text is being retrieved, the tooltip DIV doesn't exist yet.
177 function myTooltipFunc (idx)
179 var tooltips = ['<b>Winner!</b><br />John','Fred','Jane','Lou','Pete','Kev'];
180 return tooltips[idx];
184 window.onload = function ()
186 // Has to be a global variable
187 line = new RGraph.Line('cvs', [64,34,26,35,51,24]);
190 * These lines show you some of the alternative methods of specifying tooltips:
192 * o An array of strings - one per tooltip
193 * o An array of functions - one per tooltip
194 * o A single function that handles all of the tooltips
195 * o An "id:xxx" string (xxx being the ID tag of a div whose contents are used as the tooltip)
197 * Functions are passed a single argument - the zero-indexed number of the tooltip
199 //line.Set('chart.tooltips', ['John', 'Fred', 'Jane', 'Lou', 'Pete', 'Kev']);
200 //line.Set('chart.tooltips', [myTooltipFunc, myTooltipFunc, myTooltipFunc, myTooltipFunc, myTooltipFunc, myTooltipFunc]);
201 line.Set('chart.tooltips', myTooltipFunc);
202 line.Set('chart.tooltips.effect', 'fade');
203 line.Set('chart.gutter', 30);
204 line.Set('chart.hmargin', 10);
205 line.Set('chart.linewidth', 2);
206 line.Set('chart.shadow', true);
207 line.Set('chart.shadow.offsetx', 0);
208 line.Set('chart.shadow.offsety', 0);
209 line.Set('chart.shadow.blur', 15);
210 line.Set('chart.colors', ['green']);
211 line.Set('chart.tickmarks', 'circle');
212 line.Set('chart.labels', ['John', 'Fred', 'Jane', 'Lou', 'Pete', 'Kev']);
216 /* -------------------------------------------------------------------------------------------------------- */
220 * Create and display the bar chart
222 bar = new RGraph.Bar('cvs2', [41.2,51.3,64.2,42.1,32.2,43.2,45.8,45.1,61.1]);
224 var gradient = bar.context.createLinearGradient(0,25,0,225);
225 gradient.addColorStop(1, 'white');
226 gradient.addColorStop(0, 'blue');
228 bar.Set('chart.hmargin', 15);
229 bar.Set('chart.colors', [gradient]);
230 bar.Set('chart.linewidth', 2);
231 bar.Set('chart.tickmarks', 'endsquare');
232 bar.Set('chart.labels', ['John', 'Pete', 'Glynn', 'Kev', 'Youssef', 'Lou', 'Kiff', 'Liz', 'Fred']);
233 bar.Set('chart.background.grid.autofit', true);
234 bar.Set('chart.strokecolor', 'rgba(0,0,0,0)');
235 bar.Set('chart.tooltips', getTooltip); // The getTooltip() function (defined below) provides the tooltip text ONLY
236 bar.Set('chart.tooltips.css.class', 'bar_chart_tooltips_css');
237 bar.Set('chart.tooltips.effect', 'fade');
241 * This installs the RGraph ontooltip event handler. The CreateTooltipGraph() function is defined below
243 RGraph.AddCustomEventListener(bar, 'ontooltip', CreateTooltipGraph);
248 * Used by the bar chart to get the tooltip text.
250 * @param idx int The zero indexed number of the tooltip
252 function getTooltip(idx)
254 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>';
259 * This is the function that is called (by the ontooltip event) to create the tooltip charts
261 * @param obj object The graph object
263 function CreateTooltipGraph(obj)
265 // These are the statistics that are shown in the tooltips. This data could quite easily
266 // come from your server.
268 [5,8,7,6,9,5,4,6,3,5,4,4],
269 [4,6,7,8,6,5,4,4,2,5,8,4],
270 [3,2,1,3,4,5,1,5,6,7,4,1],
271 [3,5,1,2,4,8,9,6,7,4,5,1],
272 [9,6,7,8,7,9,4,5,6,3,5,8],
273 [4,8,5,6,4,3,5,4,6,5,7,8],
274 [4,3,4,9,8,7,8,6,4,3,5,1],
275 [1,2,3,1,2,4,5,1,6,5,3,1],
276 [2,3,5,4,3,5,1,3,5,2,6,4]
279 var idx = RGraph.Registry.Get('chart.tooltip').__index__;
280 var data = stats[idx];
282 // This data could be dynamic
283 var g = new RGraph.Line('__tooltip_canvas__', data);
284 g.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
285 g.Set('chart.gutter', 20);
286 g.Set('chart.hmargin', 5);
287 g.Set('chart.tickmarks', 'endcircle');
288 g.Set('chart.background.grid.autofit', true);
296 <li><a href="#introduction">Introduction</a></li>
297 <li><a href="#hold">What can they hold?</a></li>
298 <li><a href="#how">How can I specify them?</a></li>
299 <li><a href="#what">What can I specify?</a></li>
300 <li><a href="#graphs">Can I show graphs in tooltips?</a></li>
301 <li><a href="#customise">Can I customise the appearance of tooltips?</a></li>
302 <li><a href="#effects">What tooltip effects are available?</a></li>
303 <li><a href="#firefox">Tooltips, the clipboard and Firefox</a></li>
304 <li><a href="#override">Can I override the tooltip function?</a></li>
307 <a name="introduction"></a>
308 <h4>Introduction</h4>
311 Tooltips are a very effective and straight forward way to extend your graphs and add more information to them, without overloading
316 <h4>What can they hold?</h4>
319 At the base level, tooltips are DIVs, so they can hold a multitude of HTML - images, videos etc. See <a href="#graphs">below</a>
320 for information on showing graphs in tooltips.
324 <h4>How can I specify them?</h4>
327 You can specify them by including the tooltips code and then using the <i>chart.tooltips</i> property. For example:
332 Include the RGraph libraries.
334 <script src="RGraph.common.core.js"></script>
335 <script src="RGraph.common.tooltips.js"></script>
336 <script src="RGraph.line.js"></script>
341 Define your graph and set the tooltips property.
344 window.onload = function ()
346 var line = new RGraph.Line('cvs', [64,34,26,35,51,24]);
347 <span style="color: green">line.Set('chart.tooltips', ['<b>Winner!</b><br />John', 'Fred', 'Jane', 'Lou', 'Pete', 'Kev']);</span>
348 line.Set('chart.tooltips.effect', 'expand');
349 line.Set('chart.gutter', 30);
350 line.Set('chart.hmargin', 10);
351 line.Set('chart.linewidth', 2);
352 line.Set('chart.shadow', true);
353 line.Set('chart.shadow.offsetx', 0);
354 line.Set('chart.shadow.offsety', 0);
355 line.Set('chart.shadow.color', 'green');
356 line.Set('chart.shadow.blur', 25);
357 line.Set('chart.colors', ['green']);
358 line.Set('chart.tickmarks', 'circle');
359 line.Set('chart.labels', ['John', 'Fred', 'Jane', 'Lou', 'Pete', 'Kev']);
368 <h4>What can I specify?</h4>
371 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
372 to be displayed. The function should return the text that is used as the tooltip. You have the option to either specify
373 one function per data point, or just one function for all of the tooltips. You can mix functions and strings if you wish.
374 These functions are passed the numerical, zero-indexed tooltip index and the return value is used as the tooltip
375 text. So to summarise:
380 An array of strings. The string is used as the tooltip. Eg:
381 <pre class="code">myGraph.Set('chart.tooltips', ['John', 'Fred', 'Lou']);</pre>
385 An array of function objects. Each function is called and should return the text to be used. Eg:
386 <pre class="code">myGraph.Set('chart.tooltips', [getJohnTooltip, getFredTooltip, getLouTooltip]);</pre>
390 A single function object. This is probably the most useful. This function is called whenever a tooltip
391 is about to be displayed, and passed the numerical, zero-indexed tooltip index of the graph. The function should
392 return the text to be used as the tooltip. Note that the function you specify is called <i>before</i>
393 the tooltip DIV has been created, so you cannot access it. If you wish to customise the appearance
394 of the tooltip, you can use either the tooltip <a href="css.html">CSS class</a> or a call to <i>setTimeout()</i>. Eg:
395 <pre class="code">myGraph.Set('chart.tooltips', getTooltip);</pre>
399 An array of DIV ids. This will make working with large tooltips easier. You basically specify the id of a DIV whose
400 .innerHTML is then used as the tooltip. Only the contents of the DIV are used, not the DIV itself, so you can hide
401 the DIV by setting its <i>display</i> CSS value to <i>none</i>. An example of this in action is the
402 <a href="../examples/line.html">first line chart</a>. For example:
404 <pre class="code">myBar.Set('chart.tooltips', ['id:myDiv', ...])</pre>
408 <a name="graphs"></a>
409 <h4>Can I show graphs in tooltips?</h4>
411 <canvas style="float: right" id="cvs2" width="600" height="250">[No canvas support]</canvas>
414 You can, and with the custom event support that RGraph has (as of 10th July 2010), it's reasonably easy. Simply attach your function that
415 creates the graph to the <i>ontooltip</i> event. This allows the tooltip HTML to be created and added to the page
416 so that the code that creates the graph can run. The sequence is:
420 <li style="margin-top: 0">Specify the HTML for the tooltip as normal (including the <canvas> tag).</li>
421 <li style="margin-top: 0">Use the <i>ontooltip</i> RGraph event so that a function is called when a tooltip is shown.</li>
422 <li style="margin-top: 0">This function should subsequently create the graph.</li>
426 The tooltip DIV is to be found in the RGraph registry - <i>RGraph.Registry.Get('chart.tooltip')</i>. And if you want it the
427 numerical zero indexed count of the tooltip is to be found in the <i>__index__</i> property:
428 <i>RGraph.Registry.Get('chart.tooltip').__index__</i>
432 <script src="RGraph.common.core.js" ></script>
433 <script src="RGraph.common.tooltips.js" ></script>
434 <script src="RGraph.bar.js" ></script>
435 <script src="RGraph.line.js" ></script>
439 background-color: white ! important;
443 <canvas id="cvs" width="600" height="250">[No canvas support]</canvas>
446 window.onload = function ()
448 labels = ['Gary','Pete','Lou','Ned','Kev','Fred'];
450 bar = new RGraph.Bar("cvs", [4.5,28,13,26,35,36]);
451 bar.Set('chart.tooltips', function (idx) {return labels[idx] + 's stats<br/><canvas id="__tooltip_canvas__" width="400" height="150">[No canvas support]</canvas>';});
452 bar.Set('chart.hmargin', 10);
453 bar.Set('chart.tickmarks', 'endcircle');
454 bar.Set('chart.colors', ['blue']);
455 bar.Set('chart.ymax', 100);
456 bar.Set('chart.gutter', 30);
457 bar.Set('chart.labels', labels);
460 <span style="color: green">RGraph.AddCustomEventListener(line, 'ontooltip', CreateTooltipGraph);</span>
464 <span style="color: green">
466 * This is the function that is called by the ontooltip event to create the tooltip charts
468 * @param obj object The graph object
470 function CreateTooltipGraph(obj)
472 // This data could be dynamic
473 var line = new RGraph.Line('__tooltip_canvas__', [5,8,7,6,9,5,4,6,3,5,4,4]);
474 line.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
475 line.Set('chart.gutter', 20);
476 line.Set('chart.hmargin', 5);
477 line.Set('chart.tickmarks', 'endcircle');
478 line.Set('chart.background.grid.autofit', true);
486 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.
491 <a name="customise"></a>
492 <h4>Can I customise the appearance of tooltips?</h4>
495 Yes. You can either use the default CSS class <i>RGraph_tooltip</i>, or you can specify a specific CSS class that a
496 graphs tooltips should use with the property <i>chart.tooltips.css.class</i>. The two graphs on this page have
497 different looking tooltips by using this method - the line graph uses the default look, whilst the bar chart
498 overrides the CSS class name and sets it to <i>bar_chart_tooltips_css</i>. For example:
501 <pre class="code">bar.Set('chart.tooltips.css.class', 'bar_chart_tooltips_css');</pre>
505 .bar_chart_tooltips_css {
506 background-color: white ! important;
507 border: 2px solid black ! important;
514 You can read more about RGraph CSS classes <a href="css.html">here</a>.
517 <a name="effects"></a>
518 <h4>What tooltip effects are available?</h4>
521 These effects are available to you:
533 All of them are as their names imply. <i>fade</i> is a straight forward fade in effect, <i>expand</i> is another effect
534 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
535 and "snaps" to the current mouse position and <i>none</i> is simply no effect at all. The default effect used
536 by all graph 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>
537 effects will not work - you must use <i>fade</i> or <i>none</i>.
541 <b>Note:</b> The snap effect is only available to graph types where the tooltip is triggered using the onmousemove event.
542 Currently this means the <i>Line chart</i>, <i>Rscatter graph</i>, <i>Scatter graph</i> and Tradar chart. It can also
543 be negatively effected when using multiple graphs on one page.
547 <a name="firefox"></a>
548 <h4>Tooltips, the clipboard and Firefox</h4>
551 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>.
554 <a name="override"></a>
555 <h4>Can I override the tooltip function?</h4>
558 You can by stipulating <i>chart.tooltips.override</i>. This should be a function object that handles everything with regard
559 to showing the tooltip. Highlighting the graph is still done for you - the override function is only concerned with showing
560 the tooltip. The override function is passed these arguments:
564 <li>canvas - The HTML canvas element, the same as what you get from document.getElementById()</li>
565 <li>text - The tooltip text (id:xxx strings are NOT expanded)</li>
566 <li>x - The X coordinate in relation to the entire page</li>
567 <li>y - The Y coordinate in relation to the entire page</li>
568 <li>index - The numerical index of the tooltip in the original tooltip array</li>
572 <b>Note:</b> Although "id:xxx" strings are not expanded for you, you can easily do this yourself by using the
573 <i>RGraph.getTooltipText('id:xxx')</i> function.
578 function tooltip_override (canvas, text, x, y, idx)
580 alert('In tooltip override function...');
582 myObj.Set('chart.tooltips.override', tooltip_override);