1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
|
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<!--
/**
* o------------------------------------------------------------------------------o
* | This file is part of the RGraph package - you can learn more at: |
* | |
* | http://www.rgraph.net |
* | |
* | This package is licensed under the RGraph 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.rgraph.net/LICENSE.txt |
* o------------------------------------------------------------------------------o
*/
-->
<title>RGraph: HTML5 Javascript charts library - Tooltips</title>
<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="RGraph: 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.rgraph.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/RGraph.common.core.js"></script>
<script src="../libraries/RGraph.common.tooltips.js"></script>
<script src="../libraries/RGraph.line.js"></script>
<script src="../libraries/RGraph.bar.js"></script>
<script src="../libraries/RGraph.pie.js"></script>
<!--[if IE 8]><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>
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-54706-2']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<!-- Social networking buttons -->
<div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px">
<!-- <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%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> -->
<a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a>
<iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe>
</div>
<script>
// Opera fix
if (navigator.userAgent.indexOf('Opera') == -1) {
document.getElementById("social_icons").style.position = 'fixed';
}
</script>
<div id="google_plusone">
<!-- Place this tag where you want the +1 button to render -->
<g:plusone href="http://www.rgraph.net"></g:plusone>
</div>
<!-- Social networking buttons -->
<div id="breadcrumb">
<a href="../index.html">RGraph: HTML5 Javascript charts library</a>
>
<a href="index.html">Documentation</a>
>
Tooltips
</div>
<h1>RGraph: <span>HTML5 Javascript charts library</span> - Tooltips</h1>
<script>
if (RGraph.isIE8()) {
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 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 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.</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="RGraph.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 RGraph.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']);
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
*/
bar = new RGraph.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)');
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 RGraph ontooltip event handler. The CreateTooltipGraph() function is defined below
*/
RGraph.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 = RGraph.Registry.Get('chart.tooltip').__index__;
var data = stats[idx];
// This data could be dynamic
var g = new RGraph.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 RGraph libraries.
<pre class="code">
<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.tooltips.js"></script>
<script src="RGraph.line.js"></script>
</pre>
</li>
<li>
Define your chart and set the tooltips property.
<pre class="code">
<script>
window.onload = function ()
{
var line = new RGraph.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 RGraph 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> RGraph 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 RGraph registry - <i>RGraph.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>RGraph.Registry.Get('chart.tooltip').__index__</i>
</p>
<pre class="code">
<script src="RGraph.common.core.js" ></script>
<script src="RGraph.common.tooltips.js" ></script>
<script src="RGraph.bar.js" ></script>
<script src="RGraph.line.js" ></script>
<style>
.RGraph_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 RGraph.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">RGraph.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 RGraph.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>RGraph_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 RGraph 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>RGraph.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>
|
