Client Side Image Maps

All charts, except for Area and Stacked Area, can create a html client side image map. This allows your charts to be interactive! Client Side Image Maps are only supported through PNG and JPEG encoded images; SVG formatted charts will not work! The server examples contained in the jChartsServletExamples.war demo web application demonstrate this functionality. And of course, the source is available to assist you! There are several steps needed to get your chart to generate the image map data. The process will require two trips to the server; one to create the chart and generate map coordinates, and another to stream the chart back to your client.

Generating the Image Map Coordinates

The first trip will create your chart Object, just as before (there are no properties to set), and render the chart into a buffer by calling: chart.renderWithImageMap();, which will generate all the map coordinates. You can use this trip to return the image map coordinates by calling: chart.getImageMap(); and placing the returned ImageMap Object into the HttpServletRequest, or just hit the chart in the HttpSession. You should also store the chart Object in the HttpSession as the chart has been rendered into a buffer, so there is no need to re-render the chart when you want to pull it back to the client!

//---create the chart Object same as always do; no special properties to set. Chart myChart= new AxisChart(...); //---HERE IS WHERE IT IS DIFFERENT... //---this call will render the chart to an internal BufferedImage, creating all the image map coordinates chart.renderWithImageMap(); //---get the ImageMap information from the chart ImageMap imageMap= chart.getImageMap(); //---set the ImageMap into the HttpServletRequest so can get it out in JSP, or you could just pull the chart out of the HttpSession... httpServletRequest.setAttribute( ChartServlet.IMAGE_MAP, imageMap ); //---set the Chart into the HttpSession so we can stream it in another request without rendering again... //---ChartServlet.CHART is the key i use in the demo to store my chart in the HttpSession... httpServletRequest.getSession( true ).setAttribute( ChartServlet.CHART, chart );

Notice I did not call the XXXEncoder.encode(...) method in the first server request. That will come in the second server trip.

Back In your JSP

For The second part of this first trip to the server, we have the Chart in the HttpSession, and the ImageMap Object in the HttpServletRequest. Our JSP needs to pull the ImageMap out of the HttpServletRequest and render all the map areas from the Chart. For maximum flexibility, the ImageMapArea Object allows you to pass a String containing the non coordinate attributes of the HTML 'area' element. In this example, I pass the 'href' element which calls a javascript method when the user clicks on the Image Map Area and displays the value, legend label, and axis label. You are free to pass 'onClick', 'mouserOver', and or any combination of the allowed HTML attributes. Also, we can not forget about the Chart Object sitting in the HttpSession. Our JSP contains an 'img' tag which will call a Servlet to stream the rendered Chart down to the browser; this is the second trip to the server.

... <img border="0" src="ChartServlet" useMap="#chartMap"> ... <map name="chartMap"> <% StringBuffer html= new StringBuffer( 100 ); ImageMap imageMap= (ImageMap) request.getAttribute( ChartServlet.IMAGE_MAP ); Iterator iterator= imageMap.getIterator(); while( iterator.hasNext() ) {     ImageMapArea imageMapArea= (ImageMapArea) iterator.next();     html.append( "href=\"javascript:showValues(" );     html.append( imageMapArea.getValue() );     html.append( ",'" );     html.append( imageMapArea.getLengendLabel() );     html.append( "','" );     html.append( imageMapArea.getXAxisLabel() );     html.append( "');\"" ); %> <%= imageMapArea.toHTML( html.toString() ) %> <%     //---reuse same StringBuffer Object     html.delete( 0, html.length() ); } %> </map> ...

Encode The Chart

This is the last step! The previous step rendered the Chart into an internal buffer and wrote the HTML Image Map element out to our JSP. Now we simply need to make a request to the server as normal server generated charts do. All you need to do is pull the rendered chart out of the HttpSession and call XXXEncoder.encode(...). Internally, jCharts will simply pull the chart from the buffer and stream it back to the client; it will not re-draw the chart.

... public void service( HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse ) throws ServletException, IOException {     Chart chart= (Chart) httpServletRequest.getSession().getAttribute( CHART );     //---call encode just like you would normally     JPEGEncoder13.encode( chart, 1.0f, httpServletResponse );     httpServletRequest.getSession().removeAttribute( CHART ); }