Install the Cewolf Servlet in your Web App
The rendering of the entire chart is finally provided via a servlet. This has to be installed in your web application. Cewolf provides a servlet class de.laures.cewolf.CewolfRenderer which does the job.
To configure your web application you have to edit the /WEB-INF/web.xml file. Add the following lines to it:
<servlet>聽聽聽 <servlet-name>CewolfServlet</servlet-name>聽聽聽 <servlet-class>de.laures.cewolf.CewolfRenderer</servlet-class></servlet>
Additionally you should provide a servlet-mapping to tell the container which URL maps to your Cewolf rendering servlet.
<servlet-mapping>聽聽聽 <servlet-name>CewolfServlet</servlet-name>聽
聽 <url-pattern>/cewolf/*</url-pattern></servlet-mapping>
You also need to tell CeWolf to load on startup:
聽<load-on-startup>1</load-on-startup>
To test the correct installation you should start your web app and try to call the rendering servlet with a browser (e.g. http://localhost:8080/myapp/cewolf?state). Cewolf should answer: "Cewolf servlet up and running." Here is a copy of the example web.xml:
<web-app>
聽 <servlet>
聽聽聽 <servlet-name>CewolfServlet</servlet-name>
聽聽聽 <servlet-class>de.laures.cewolf.CewolfRenderer</servlet-class>
聽<!-- sets storage implementation -->
聽聽聽 <init-param>
聽聽聽聽聽聽聽 <param-name>storage</param-name>
聽聽聽聽聽聽聽 <param-value>de.laures.cewolf.storage.TransientSessionStorage</param-value>
聽聽聽 </init-param>
聽<!-- sets overlib.js location relative to webapp -->
聽聽聽 <init-param>
聽聽聽聽聽聽聽 <param-name>overliburl</param-name>
聽聽聽聽聽聽聽 <param-value>etc/overlib.js</param-value>
聽聽聽 </init-param>
聽<!-- turn on or off debugging logging -->
聽聽聽 <init-param>
聽聽聽聽聽聽聽 <param-name>debug</param-name>
聽聽聽聽聽聽聽 <param-value>true</param-value>
聽聽聽 </init-param>
聽聽聽 <load-on-startup>1</load-on-startup>
聽 </servlet>
聽 <servlet-mapping>
聽聽聽 <servlet-name>CewolfServlet</servlet-name>
聽聽聽 <url-pattern>/cewolf/*</url-pattern>
聽 </servlet-mapping>
聽 <session-config>
聽聽聽 <session-timeout>1</session-timeout>
聽 </session-config>
聽 <mime-mapping>
聽聽聽聽聽 <extension>css</extension>
聽聽聽聽聽 <mime-type>text/css</mime-type>
聽 </mime-mapping>
聽 <welcome-file-list>
聽 聽<welcome-file>
聽聽聽聽聽 index.html
聽聽聽 </welcome-file>
聽 聽<welcome-file>
聽聽聽聽聽 index.htm
聽聽聽 </welcome-file>
聽 </welcome-file-list>
聽
聽<!-- resource-ref>
聽聽 <description>
聽聽聽聽 Resource reference to a factory for java.sql.Connection
聽聽聽聽 instances that may be used for talking to a particular
聽聽聽聽 database that is configured in the server.xml file.
聽聽 </description>
聽聽 <resource-ref-name>
聽聽聽聽 jdbc/testdb
聽聽 </resource-ref-name>
聽聽 <res-type>
聽聽聽聽 javax.sql.DataSource
聽聽 </res-type>
聽聽 <res-auth>
聽聽聽聽 Container
聽聽 </res-auth>
聽</resource-ref -->
</web-app>
Tutorial: Step 4
Define the chart in your JSP
<%@page contentType="text/html"%><%@taglib uri='/WEB-INF/cewolf.tld' prefix='cewolf' %><HTML><BODY><H1>Page View Statistics</H1><HR><jsp:useBean id="pageViews" class="de.laures.cewolf.example.PageViewCountData"/><cewolf:chart聽聽聽聽 id="line"聽聽聽聽 title="Page View Statistics"聽聽聽聽 type="line"聽聽聽聽 xaxislabel="Page"聽聽聽聽 yaxislabel="Views">聽聽聽 <cewolf:data>聽聽聽聽聽聽聽 <cewolf:producer id="pageViews"/>聽聽聽 </cewolf:data></cewolf:chart><p><cewolf:img chartid="line" renderer="cewolf" width="400" height="300"/><P></BODY></HTML>
As you can see there are different tags of the cewolf taglib involved. The first <cewolf:chart> tag defines a chart with all its parameters. The concrete rendering is handled by the <cewolf:img> tag which adds the correct <img> tag in the rendered HTML page. The connection between both cewolf tags inside the JSP is specified by using the same id attributes.
When calling this JSP from a client browser you should see the page view statistic chart. If you got a broken image have a look at your container's log files.
Tutorial: Step 5
Create ImageMap and Tooltip Information
To provide your chart with additionnal tooltips and image map information you have to provide an additional Java class or enhance an existing one like the one below. In this tutorial we will add some methods to the datasetproducer class which had been introduced at the beginning of this tutorial.
...聽 public String generateLink(Object data, int series, Object category) {聽聽聽 return seriesNames[series];聽 }聽 public String generateToolTip(CategoryDataset arg0, int series, int arg2) {聽聽聽 return seriesNames[series];聽 }...
As you can see it is very easy to implement a class that produces image map and tooltips information. First of all it has to implement the interfaces CategoryItemLinkGenerator and CategoryToolTipGenerator (as it produces a CategoryDataset). For other data types refer to the cewolf java api.
To let your class produce links and tooltips for the chart image you have to change the <cewolf:img> tag as follows:
<cewolf:img chartid="line" renderer="cewolf" width="400" height="300">聽聽聽 <cewolf:map id="pageViews"/></cewolf:img>
Reload your page and you will see tooltips and links on data points. Internet Explorer browsers are handled slightly different as others as they are able to render a tooltip based on the alt attribute inside an image map. All other browser need the overlib.js for this. Cewolf tries to determine the used browser and renders a correct page transparently.
For further information on using Cewolf refer to the Tag Library Reference and the Cewolf JavaDoc.
If you want to see more examples of how to implement catchy charts in your webapp, you should deploy the example webapp (downloadable from the Cewolf home page and have a look at its sourcecode.
聽
]]>