Generating Charts with Client-side Imagemaps
Client-side image maps allow regions of an image to be linked to a URL. Clicking on such a region behaves the same as clicking on a hypertext link. This can be used to create a degree of interactivity. Target regions are created for chart nodes that have the HREF attribute defined.
In this example the sample pie chart as above is generated, but now when the user clicks on a slice the selected slice is exploded out. Now pieChart is an instance of SampleImageBean. The JSP gets the pieChart's imageMap property to create a map tag in the HTML code.
<%@page contentType="text/html"%>
<jsp:useBean id="pieChart"
scope="page"
class="com.imsl.demo.jsp.SampleImagemapBean"
/>
<html>
<head><title>Pie Chart Imagemap</title></head>
<body>
<h1>Pie Chart Imagemap</h1>
<jsp:setProperty name="pieChart" property="*"/>
<% pieChart.createChart(request); %>
<jsp:getProperty name="pieChart" property="imageMap"/>
<jsp:getProperty name="pieChart" property="imageTag"/>
</body>
</html>
The code for SampleImagemapBean is similar to the code for the previous example SampleChartBean, but with the HREF attribute defined in each slice. The reference is back to SampleImagemapJSP, but with the explode parameter defined. The second change is the addition of a setter method for explode. The line
<jsp:setProperty name="pieChart" property="*"/>
in the JSP file sets properties in the pieChart from parameters in the request. If explode is defined in the HTTP request, then the JSP calls this setter method.
package com.imsl.demo.jsp;
import com.imsl.chart.*;
import java.awt.Color;
public class SampleImagemapBean extends JspBean {
private JspBean bean;
private int explode;
public SampleImagemapBean() {
bean = new JspBean();
bean.setSize(300,300);
bean.setCreateImageMap(true);
}
public void createChart(javax.servlet.http.HttpServletRequest request) {
Chart chart = new Chart();
double y[] = {35., 20., 30., 40.};
Pie pie = new Pie(chart, y);
pie.setLabelType(pie.LABEL_TYPE_TITLE);
pie.setFillOutlineColor(Color.blue);
PieSlice slice[] = pie.getPieSlice();
slice[0].setFillColor(Color.red);
slice[0].setTitle("Red");
slice[1].setFillColor(Color.blue);
slice[1].setTitle("Blue");
slice[1].setFillOutlineColor(Color.yellow);
slice[2].setFillColor(Color.black);
slice[2].setTitle("Black");
slice[3].setFillColor(Color.yellow);
slice[3].setTitle("Yellow");
for (int k = 0; k < slice.length; k++) {
slice[k].setHREF("SampleImagemapJSP.jsp?explode="+k);
}
try {
slice[explode].setExplode(0.3);
} catch (Exception e) {
// ignore out of range values for explode
}
bean.registerChart(chart, request);
}
public void setExplode(int explode) {
this.explode = explode;
}
public String getImageTag() {
return bean.getImageTag();
}
public String getImageMap() {
return bean.getImageMap();
}
}
|
PHONE: 713.784.3131 FAX:713.781.9260 |
