pickpeters

Fusion charts integration with RichFaces

Recommended Posts

I have a project with JBoss richFaces 3.3.0 GA . I am trying to integrate Fusion charts with this but i am stuck on one thing.

The XML string that i have on the beacking bean is not getting reflected on the front end chart. The chart's dataURL returns null. I haven't formatted the chart anyways.

I tried hardcoding the same chart value outside my panel and the chart got displayed correctly. Does Fusion charts does not support Ajax rendering. Please find below some snippets from my code.

<

script type="text/javascript" src="../../FusionCharts/FusionCharts.js"></script>

<

a4j:form id="myform">

<!--This works fine as  hardcoded--><fc:render chartId="ViewChart1" filename="../../FusionCharts/Doughnut3D.swf" width="600" height="200" xml="#{myBaseBean.myExtendedBean.viewChart}" debugMode="true" registerWithJS="true"></fc:render>

<a4j:form>

 

but when i put the same in :

<

a4j:outputPanel ajaxRendered="true" style="vertical-align: center">

<fc:render chartId="ViewChart" filename="../../FusionCharts/Doughnut3D.swf" width="300" height="300" debugMode="true" registerWithJS="true" xml="#{myBaseBean.myExtendedBean.viewChart}"></fc:render>

</a4j:outputPanel>

This doesn't show anything.

My main aim is to set the viewChart atribute of the myExtendedBean dynamically. I have seen that this is changed in the bean by printing the same but the chart is not rendered.

Any help would be vey useful.

Regards,

pickpeters

Share this post


Link to post
Share on other sites

Hi pickpeters,

Welcome to FusionCharts and JSF.

The tag library works with Rich Faces in general.

I tried it with a4j:outputPanel and xml from a backing bean. It seems to be working. However, I had to surround the outputPanel with <f:view> </f:view> for the ViewRoot.

Here is the sample code that I tested:

<f:view>  
 <a4j:outputPanel ajaxRendered="true" style="vertical-align: center">
<fc:renderHTML chartId="SimpleChart" filename="../FusionCharts/Column3D.swf" width="700" height="300" debugMode="true" xml="#{exampleChartData.xml}"></fc:renderHTML> 
 </a4j:outputPanel>
</f:view>
Is this not working for you? Or are you trying to do something more complex?
regards,
Srividya

 

Share this post


Link to post
Share on other sites

Hi,

I was actually using a wrong JSF1.2 taglib for fusion charts...

I am now able to successfully see the charts working.

Now I have one small problem and a bit strange one. I also have a rich:modalPanel in the same page. After the charts are rendered if the user clicks a link I show him the modal panel. The panle works fine without the charts but the problem is that the modal panel opens at the background of the flash movie if I open the modal panel when the charts are present. Is there any way to make my rich:modal panel appear on top of the flash movie???

Regards,

pickpeters

Share this post


Link to post
Share on other sites

Could successfully solve the above issue too. Just tweaked the FusionCharts.js. (Though I am not usre whether this is allowed or not .)

I added this two lines in

getSWFHTML: function()

1. swfNode = '<embed type="application/x-shockwave-flash" wmode="transparent" src="'+ this.getAttribute('swf') +'" width="'+ this.getAttribute('width') +'" height="'+ this.getAttribute('height') +'" '; (for netscape)

2.swfNode += '<param name="wmode" value="transparent" />'; (for IE)

Regards,

pickpeters

Share this post


Link to post
Share on other sites

Hi,

 

 

 

I'm using Seam + Facelet + PowerCharts Professional for my web development, and I actually come across the same issue with charts floating above the modal panel. And I'm just wondering if anyone can give me some insights.

 

 

 

Attached in model-panel.txt is the code snippet I have in an xhtml file, to allow a blown up view of the same chart in a modal panel. Then I used both methods suggested by pickpeters and

 

http://www.fusioncharts.com/forum/Topic835-36-1.aspx#bm13330

 

 

 

but the problem persists. The blown up chart will sit on top, followed by the smaller charts that are supposedly on the main screen, before the modal panel background (as shown in modal-panel-prob.jpg).

 

 

 

Any suggestions will be greatly appreciated.

 

 

 

Derek

post-4143-128441574706_thumb.jpg

modal-panel.txt

Edited by Guest

Share this post


Link to post
Share on other sites

Hi

I have posted a new jar here: http://www.fusioncharts.com/forum/FindPost17718.aspx

That jar contains the solution to your problem.

You would need to use the attribute windowMode="opaque" for the small chart. ( which needs to stay below other elements )

Example:

<fc:renderHTML chartId="SimpleChart" filename="FusionCharts/Column3D.swf" width="455" height="200" url="Data/Data.xml" windowMode="opaque"  />

Hope it works out well!

Srividya

Share this post


Link to post
Share on other sites

Thanks a lot srividya, I gave the library a try but this is what I got:

 

 

 


An Error Occurred:

8



Stack Trace:

java.lang.ArrayIndexOutOfBoundsException: 8

at com.fusioncharts.jsf.UIHTMLChart.saveState(UIHTMLChart.java:453)

at javax.faces.component.UIComponentBase.processSaveState(UIComponentBase.java:1103)

at javax.faces.component.UIComponentBase.processSaveState(UIComponentBase.java:1119)

at javax.faces.component.UIComponentBase.processSaveState(UIComponentBase.java:1119)

at javax.faces.component.UIComponentBase.processSaveState(UIComponentBase.java:1119)

at javax.faces.component.UIComponentBase.processSaveState(UIComponentBase.java:1119)

at org.ajax4jsf.application.AjaxStateManager.getComponentStateToSave(AjaxStateManager.java:175)

at org.ajax4jsf.application.AjaxStateManager.buildViewState(AjaxStateManager.java:474)

at org.ajax4jsf.application.AjaxStateManager$SeamStateManagerWrapper.saveView(AjaxStateManager.java:105)

at org.jboss.seam.jsf.SeamStateManager.saveView(SeamStateManager.java:89)

...

 

 

 

I'm just thinking, would it have anything to do with the fact that I'm using Java 6?

 

 

 

Cheers, Derek

Share this post


Link to post
Share on other sites

(NB 18/09/09: Added some updates as I realised that I didn't mention the third point, and I forgot to use IFCode for the tags so they don't get displayed...)

 

 

 

Thank you so much Srividya, I got the RichFaces modalPanel working now, and it looks great!!!

 

 

 

Derek

 

 

 

 

 

PS: Interestingly though, this is what I needed to do:

 

 

 

1. I have to use fc:render in the small plots and not fc:renderHTML or symptoms persist (maybe it means fc:renderHTML doesn't work with WMode?). And certainly, windowMode has to be set to "opaque".

 

2. The chart in the modalPanel has to be rendered with fc:renderHTML and not fc:render, or one'll only see a string in the panel -- "Chart."

 

3. In FusionCharts.js, I'll have to have

 

this.addParam('WMode', 'opaque');

 

 

 

Hope this bit of instructions will be useful to others :)

Edited by Guest

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now