How to have URL drill down using Struts JFreechart

[Kyaw]

Hi all

with reference to http://www.jfree.org/phpBB2/viewtopic.php?t=18971, does anyone know there is way to utilize 'usemap' attribute in <html:img> so as to achieve url drill-down feature?

If yes, could you share your knowledge. Thanks a lot.

[jwenting]

the imagemap provides you with coordinates. If you pass those to a servlet it can figure out where you want to drill into, if it also knows what the original chart was, and generate the drilldown chart for you.

[Kyaw]

Thanks JWENTING for your explanation. By the way, do you know how to integrate this feature into Rajesh Struts example which he used 2 action class. As of now, I still have no idea how to put this feature in, including how to pass the imagemap info to JSP and from JSP request the second action class. Millions thanks in advance if you have a solution or better alternative.

the imagemap provides you with coordinates. If you pass those to a servlet it can figure out where you want to drill into, if it also knows what the original chart was, and generate the drilldown chart for you.

[jwenting]

I don't use Struts.

The components I maintain just supply the charts and image maps, how to integrate them I leave to the frontend people

[Kyaw]

Hi all

Through scores of trying, i found a solution to implement the url drill down feature.

in the first action class (i use a MappingDispatchAction) , inoculate something like:

chart.createBufferedImage(500,270, cri);
String imagemap = ChartUtilities.getImageMap("map", cri);
session.setAttribute("imagemap", imagemap);

Below is my partial code.

Code: Select all

    public ActionForward display(ActionMapping mapping, ActionForm  form,
            HttpServletRequest request, HttpServletResponse response){
        try
        {
            BudgetChartForm bForm = (BudgetChartForm) form;
            CategoryDataset cDS = this.createDS(form);
            JFreeChart chart = this.createChart(request, cDS);
            BufferedImage img = chart.createBufferedImage(500,270);

            session.setAttribute("img",img);

            ChartRenderingInfo cri = new ChartRenderingInfo(new StandardEntityCollection());
            String filename = ServletUtilities.saveChartAsPNG(chart,500,270,cri,session);
            chart.createBufferedImage(500,270, cri);
            String imagemap = ChartUtilities.getImageMap("map", cri);
            session.setAttribute("imagemap", imagemap);
            session.setAttribute("filename",filename);
            bForm.setImage(filename);
         }catch(Exception ex){
            ex.printStackTrace();
        }

        return mapping.getInputForward();
    }

note: createDS and createChart are private supporting methods to create category dataset and JFreeChart respectively. In the createChart method, don't forget to define something like this:

Code: Select all

       BarRenderer barR = (BarRenderer) plot.getRenderer();

         StandardCategoryURLGenerator urlGen = new StandardCategoryURLGenerator("test.jsp", "series","category");
        barR.setItemURLGenerator(urlGen);

in the JSP, put in these lines to get the <map><area/></map> html map definition after the page has been rendered.

<%

response.setContentType("text/html");
PrintWriter o = response.getWriter();
o.println(session.getAttribute("imagemap"));
%>
as follows:

Code: Select all

    <jsp:useBean id="budgetForm" scope="page" class="BudgetChartForm" />
    <logic:present name="filename" scope="session">
        <%
            
            response.setContentType("text/html");
            PrintWriter o = response.getWriter();
            o.println(session.getAttribute("imagemap"));
        %>
        <html:img page="/displayChartBudget.do" paramName="budgetForm" paramProperty="image" paramId="image" paramScope="session" usemap="#map"  />
        
    </logic:present>

Hope that can help somebody like me before. Nevertherless, if you all have any other better way, please let me know.

[Shilpa Kumar]

Hi Kyaw,

I tried the same which you have mention above. I am not able to view the Chart. when I go to view source, my <map></map> is generated. But unable to view the chart image. Here is my code. can you tell me where I am doing wrong? Thanks in advance.

Code: Select all

<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>

<%@ page import="org.jfree.chart.*"%>
<%@ page import="org.jfree.chart.axis.*"%>
<%@ page import="org.jfree.chart.plot.*"%>
<%@ page import="org.jfree.chart.renderer.category.*"%>
<%@ page import="org.jfree.data.category.*"%>
<%@ page import="org.jfree.ui.*"%>
<%@ page import="java.awt.*"%>
<%@ page import="java.io.*,java.awt.image.*,java.sql.*"%>
<%@ page import="com.keypoint.*"%>
<%@ page import="org.jfree.chart.*"%>
<%@ page import="org.jfree.data.time.*"%>
<%@ page import="org.jfree.chart.entity.StandardEntityCollection"%>
<%@ page import="org.jfree.chart.servlet.ServletUtilities"%>
<%@ page import="org.jfree.chart.imagemap.ImageMapUtilities"%>
<html>
<%!
	String filename = null, fname = null ;
	BufferedImage img = null ;
%>
<%  
	
	TimeSeries t = new TimeSeries("Plan %",Day.class); 
	t.add(new Day(1,5,2006),20); 
	t.add(new Day(1,6,2006),30); 
	t.add(new Day(1,7,2006),50); 
	t.add(new Day(1,8,2006),80); 
	t.add(new Day(1,9,2006),100); 
	TimeSeries t2 = new TimeSeries("Actual %",Day.class); 
	t2.add(new Day(1,5,2006),20); 
	t2.add(new Day(1,6,2006),25); 
	t2.add(new Day(1,7,2006),40); 
	t2.add(new Day(1,8,2006),70); 
	TimeSeriesCollection dataset = new TimeSeriesCollection(); 
	dataset.addSeries(t); 
	dataset.addSeries(t2); 

	JFreeChart chart = ChartFactory.createTimeSeriesChart( 
	"Project Progress", 
	"Date", 
	"Progress", 
	dataset,true,true,false); 

	img = chart.createBufferedImage(508,204); 
	session.setAttribute("img",img); 

	ChartRenderingInfo cri = new ChartRenderingInfo(new StandardEntityCollection()); 
    filename = ServletUtilities.saveChartAsPNG(chart,500,270,cri, session); 
	//PrintWriter o = response.getWriter();
	chart.createBufferedImage(500,270, cri); 
	String imagemap = ChartUtilities.getImageMap("map", cri); 
	session.setAttribute("imagemap", imagemap); 
	session.setAttribute("filename",filename); 

	response.setContentType("text/html"); 
    
    out.println(session.getAttribute("imagemap")); 
	out.println ( "File name = " + filename + "\n") ;
	fname = request.getContextPath() + '/' + filename ;
	//PngEncoder encoder = new PngEncoder( img, false, 0, 9 ); 	
	//response.getOutputStream().write( encoder.pngEncode() );
%>

<IMG SRC="<%=fname%>" USEMAP="#map" />

</html>

[Kyaw]

Hi Shilpa Kumar

From your JSP, it seems like it did not utilize any Struts Action class. My code is only tailored for Struts framework with reference to http://www.jfree.org/phpBB2/viewtopic.php?t=18971


After the page is rendered in HTML, you would get something like this:

Code: Select all

               <map id="map" name="map">
<area shape="rect" coords="435,165,469,166" title="(Actual, Indonesia) = 0" alt="" href="chartTimeByTask2.do?series=Actual&category=Indonesia"/>
<area shape="rect" coords="389,165,423,166" title="(Actual, India) = 0" alt="" href="chartTimeByTask2.do?series=Actual&category=India"/>
<area shape="rect" coords="344,165,378,166" title="(Actual, Taiwan) = 0" alt="" href="chartTimeByTask2.do?series=Actual&category=Taiwan"/>
<area shape="rect" coords="298,165,332,166" title="(Actual, Malaysia) = 0" alt="" href="chartTimeByTask2.do?series=Actual&category=Malaysia"/>
<area shape="rect" coords="253,165,287,166" title="(Actual, Hong Kong) = 0" alt="" href="chartTimeByTask2.do?series=Actual&category=Hong+Kong"/>
<area shape="rect" coords="207,133,241,164" title="(Actual, Korea) = 11" alt="" href="chartTimeByTask2.do?series=Actual&category=Korea"/>
<area shape="rect" coords="162,38,196,165" title="(Actual, Singapore) = 44" alt="" href="chartTimeByTask2.do?series=Actual&category=Singapore"/>
<area shape="rect" coords="116,67,150,165" title="(Actual, China) = 34" alt="" href="chartTimeByTask2.do?series=Actual&category=China"/>
<area shape="rect" coords="71,35,105,165" title="(Actual, Philippines) = 45" alt="" href="chartTimeByTask2.do?series=Actual&category=Philippines"/>
</map>
<img src="/contextPath/displayChartBudget.do?image=jfreechart-48761.png" usemap="#map">

The src of the image is linked to action handler of the second Action Class.

If you just need to do the drill down in plain JSP, you may follow the guide provided by the link below:

http://homepage.ntlworld.com/richard_c_ ... freechart/

Hope that can help.

[eduferoz]

Hey guys , I´d like to share my solution with you. In my project I'm using Struts, and I didn´t need to use double actions or something like that ...

I've just put the imageMap string in my Session and captured it after <img> tag. Check it out :

Here is my Action :

Code: Select all

public ActionForward execute(ActionMapping mapping, ActionForm form,HttpServletRequest request,HttpServletResponse response) throws Exception {
   HttpSession sessao = request.getSession();
		
   response.setContentType("image/jpeg");
   OutputStream output = response.getOutputStream();

   int largura = 600;
  int altura = 300;
  int stilo = 0;
  try {
    largura = Integer.parseInt(request.getParameter("largura"));	
  } catch (Exception e) {
   // nao faz nada pois o usuario pode nao setar esse atributo
  }
  try {
   altura = Integer.parseInt(request.getParameter("altura"));	
 } catch (Exception e) {
  // nao faz nada pois o usuario pode nao setar esse atributo
  }
  try {
  stilo = Integer.parseInt(request.getParameter("stilo"));	
 } catch (Exception e) {
// nao faz nada pois o usuario pode nao setar esse atributo
  }
  JFreeChart chart = gerarGrafico(request, response, largura, altura,stilo);
		
   ChartRenderingInfo info = new ChartRenderingInfo(new StandardEntityCollection());
				
   ChartUtilities.writeChartAsJPEG(output, chart, largura, altura, info);
						
   output.close();
		
   ImageMapUtilities.writeImageMap(new PrintWriter(output), "map", info); 

   String map = ImageMapUtilities.getImageMap("map", info); 
				
   sessao.setAttribute("imageMap", map);
   return mapping.findForward("next");
}

And here is the block of my JSP that matters :

Code: Select all

 <div class="fonte_media" align="center">
	Tipo de Gráfico :
	<html:select name="form" property="tipoGrafico" onchange="javascript:document.forms[1].submit();"  >
		<html:option value="5">LINHAS</html:option>
		<html:option value="2">BARRAS</html:option>
		<html:option value="6">ÁREA</html:option>
	</html:select>
</div>

	<%
	ArrayList configuracao = (ArrayList) request.getAttribute("config");
	ArrayList colecao = (ArrayList) request.getAttribute(com.apply.nassau.websiteCRM.util.Constantes.COLECAO_ANALISE_TRAFEGO);
	%>
<br>

<table bgcolor='#bebebe' border='2' bordercolor='WHITE' valign="top" width="100%" cellpadding="0" cellspacing="0" >
	<tr>
		<td align="center" width="100%"><b>			
			<img src="<%= request.getContextPath() %>/grafico.do?metodo=execute&<%= com.apply.nassau.websiteCRM.util.Util.montaStringGrafico(600,500,colecao,(String)configuracao.get(0),(String)configuracao.get(1),(String)configuracao.get(2),Integer.parseInt((String)configuracao.get(3))) %>" align="middle" 
			usemap="#map" />
			
			<logic:present name="imageMap">							
			  <%= session.getAttribute("imageMap") %>			  
			</logic:present>
			
		</b></td>			
	</tr>
	<tr>

	  <td> </td>
	</tr>
</table>

The wierd thing is that it worked just when I put the "getAttribute" afte the img tag.


Hope it helps ...

Good luck