JSF and charting

[Roshnara Rose]

Hi,

I'm trying to display a line chart inside a jsf page.
On click on a button, i want to show a grid containing the chart.
I can get the javascript to show the chart on the page. How i can execute that js while rendering the panel?

My code follows

<h:form id="topTenForm" rendered="#{!(quantityBean.dataPresent)}">
<h:panelGroup>
<h:panelGrid id="topTenPanel" columns="2">
<h:panelGroup id="barGraph">
HERE I WANT TO DISPLAY THE GRAPH
</h:panelGroup>
<h:panelGroup id="topTen">
<t:dataTable value="#{quantityBean.topTenRows}" var="topTen">
</t:dataTable>
</h:panelGroup>
</h:panelGrid>
</h:form>

[Chris Tiearney]

My recommondation would be to try out one of the JSF frameworks out there like ICEfaces or MyFaces (not sure whether MyFaces has libraries for charts though?). Just include the library and then insert the code into your page.

[Roshnara Rose]

Hi,

Now I'm using FusionCharts lib for charting.
From the above code

  <h:panelGroup id="barGraph">
<f:verbatim>      <jsp:include page="graph1.jsp"/>
</f:verbatim>
</h:panelGroup> 

graph1.jsp

<jsp:directive.page import="util.FusionChartsCreator" />
<%
String chartXML = "<chart caption='Monthly Sales Summary' subcaption='For the year 2006' xAxisName='Month' yAxisName='Sales' " +
"numberPrefix='$'><set label='January' value='17400' /><set label='February' value='19800' /><set label='March' value='21800' />" +
"<set label='April' value='23800' /><set label='May' value='29600' /><set label='June' value='27600' />" +
"<set label='July' value='31800' /><set label='August' value='39700' /><set label='September' value='37800' />" +
"<set label='October' value='21900' /><set label='November' value='32900' /><set label='December' value='39800' /></chart>";

String graphCode = FusionChartsCreator.createChartHTML("FusionCharts/Column3D.swf", "", chartXML, "myChart", 600, 300, false);
%>

<%=graphCode%>

This is supposed to display the chart i want and it is displaying in an html page (when i tried with alternate js function). But while running the app, it is not displaying with jsf. The FusionCharts directory, graph1.jsp, WEB-INF and the main jsf page are in the same level in the directory structure.

I debugged with Firebug and the html code for the graph code found is

<span id="topTenForm:barGraph" style="width: 400px;">
<object id="myChart" height="300" width="600" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000">
<param value="always" name="allowScriptAccess"/>
<param value="FusionCharts/Column3D.swf" name="movie"/>
<param value="chartWidth=600&chartHeight=300&debugMode=0&dataXML=<chart caption='Monthly Sales Summary' subcaption='For the year 2006' xAxisName='Month' yAxisName='Sales' numberPrefix='$'><set label='January' value='17400' /><set label='February' value='19800' /><set label='March' value='21800' /><set label='April' value='23800' /><set label='May' value='29600' /><set label='June' value='27600' /><set label='July' value='31800' /><set label='August' value='39700' /><set label='September' value='37800' /><set label='October' value='21900' /><set label='November' value='32900' /><set label='December' value='39800' /></chart>" name="FlashVars"/>
<param value="high" name="quality"/>
<embed height="300" width="600" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" allowscriptaccess="always" name="myChart" quality="high" flashvars="chartWidth=600&chartHeight=300&debugMode=0&dataXML=<chart caption='Monthly Sales Summary' subcaption='For the year 2006' xAxisName='Month' yAxisName='Sales' numberPrefix='$'><set label='January' value='17400' /><set label='February' value='19800' /><set label='March' value='21800' /><set label='April' value='23800' /><set label='May' value='29600' /><set label='June' value='27600' /><set label='July' value='31800' /><set label='August' value='39700' /><set label='September' value='37800' /><set label='October' value='21900' /><set label='November' value='32900' /><set label='December' value='39800' /></chart>" src="FusionCharts/Column3D.swf"/>
</object>
</span>

And it showing a white box without any graph in it. How i can show this in the jsf page? Any specific tags available in jsf for this?

Thanks in advance

Rose

[Tim Holloway]

A white box is about the BEST thing I'd see - Adobe still hasn't release Flash for 64-bit desktops, so if you're planning to sell anything to me, keep that in mind - it's already cost an automobile manufacturer a sale.

I'd say that doing a jsp:include inside a verbatim tag is probably not a good idea no matter what it's intended to so, but that's just a gut feeling.

You MIGHT be able to verbatim a <div> and embed the graphing inside that. It's ugly, but I don't see any obvious faults. A cleaner approach is to use an actual JSF charting tag. None of the core MyFaces taglibs have one, however, nor does RichFaces (that I recall). You'll have to look for a specialty tag provider or write your own. I did that to give me a Google Maps JSF tag.

Although, once again, whether you do it by brute force or via a custom tag, if the resulting HTML generates a Flash-based chart, I won't be able to view it.
[ October 06, 2008: Message edited by: Tim Holloway ]

[Roshnara Rose]

I have tried the chart display with <div> in verbatim tag but the display looks the same, no chart display. I'm not getting any clues for not displaying the chart with the JSF app.

Please share your ideas.

Also i came thru the <a4j:mediaOutput> tag for object/embed tag. Not sure how far it is helpful in this case..