|
franta-hg@1
|
1 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
|
|
franta-hg@1
|
2 |
<html>
|
|
franta-hg@1
|
3 |
<head>
|
|
franta-hg@1
|
4 |
<title>Cewolf Tutorial(5): Create ImageMap and Tooltip Information</title>
|
|
franta-hg@1
|
5 |
<meta name="author" content="Guido Laures">
|
|
franta-hg@1
|
6 |
<link href="../cewolf.css" rel="stylesheet" type="text/css">
|
|
franta-hg@1
|
7 |
</head>
|
|
franta-hg@1
|
8 |
<body>
|
|
franta-hg@1
|
9 |
<h1>Tutorial: Step 5</h1>
|
|
franta-hg@1
|
10 |
<h2>Create ImageMap and Tooltip Information</h2>
|
|
franta-hg@1
|
11 |
<p> To provide your chart with additionnal tooltips and image map
|
|
franta-hg@1
|
12 |
information you have to provide an additional Java class or enhance an
|
|
franta-hg@1
|
13 |
existing one like the one below. In this tutorial we will add some
|
|
franta-hg@1
|
14 |
methods to the datasetproducer class which had been introduced at the
|
|
franta-hg@1
|
15 |
beginning of this tutorial. </p>
|
|
franta-hg@1
|
16 |
<p> </p>
|
|
franta-hg@1
|
17 |
<pre>...<br> public String generateLink(Object data, int series, Object category) {<br> return seriesNames[series];<br> }<br><br> public String generateToolTip(CategoryDataset arg0, int series, int arg2) {<br> return seriesNames[series];<br> }<br>...<br></pre>
|
|
franta-hg@1
|
18 |
<p> As you can see it is very easy to implement a class that produces
|
|
franta-hg@1
|
19 |
image map and tooltips information. First of all it has to implement the
|
|
franta-hg@1
|
20 |
interfaces <tt>CategoryItemLinkGenerator</tt> and <tt>CategoryToolTipGenerator</tt>
|
|
franta-hg@1
|
21 |
(as it produces a CategoryDataset). For other data types refer to the <a
|
|
franta-hg@1
|
22 |
href="../apidoc/index.html">cewolf java api</a>. </p>
|
|
franta-hg@1
|
23 |
<p> To let your class produce links and tooltips for the chart image you
|
|
franta-hg@1
|
24 |
have to change the <cewolf:img> tag as follows: </p>
|
|
franta-hg@1
|
25 |
<p> </p>
|
|
franta-hg@1
|
26 |
<pre><cewolf:img chartid="line" renderer="cewolf" width="400" height="300"><br> <cewolf:map id="pageViews"/><br></cewolf:img><br></pre>
|
|
franta-hg@1
|
27 |
<p> Reload your page and you will see tooltips and links on data points.
|
|
franta-hg@1
|
28 |
Internet Explorer browsers are handled slightly different as others as
|
|
franta-hg@1
|
29 |
they are able to render a tooltip based on the <tt>alt</tt> attribute
|
|
franta-hg@1
|
30 |
inside an image map. All other browser need the overlib.js for this.
|
|
franta-hg@1
|
31 |
Cewolf tries to determine the used browser and renders a correct page
|
|
franta-hg@1
|
32 |
transparently. </p>
|
|
franta-hg@1
|
33 |
<p> For further information on using Cewolf refer to the <a
|
|
franta-hg@1
|
34 |
href="../taglib.html">Tag Library Reference</a> and the <a
|
|
franta-hg@1
|
35 |
href="../apidoc/index.html">Cewolf JavaDoc</a>. </p>
|
|
franta-hg@1
|
36 |
<p> <b>If you want to see more examples of how to implement catchy charts
|
|
franta-hg@1
|
37 |
in your webapp, you should deploy the example webapp (downloadable from
|
|
franta-hg@1
|
38 |
the <a href="http://cewolf.sf.net" alt="Cewolf Homepage">Cewolf home
|
|
franta-hg@1
|
39 |
page</a> and have a look at its sourcecode.</b> </p>
|
|
franta-hg@1
|
40 |
<a height="30" target="new" href="http://sourceforge.net"><img
|
|
franta-hg@1
|
41 |
alt="SourceForge Logo" border="0" height="30"
|
|
franta-hg@1
|
42 |
src="http://sourceforge.net/sflogo.php?group_id=57282&type=5"></a>
|
|
franta-hg@1
|
43 |
</body>
|
|
franta-hg@1
|
44 |
</html>
|