Fusion charts integration with RichFaces

[pickpeters]

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

[srividya_sharma]

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

 

[pickpeters]

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

[pickpeters]

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

[srividya_sharma]

Experts on this topic will help you out soon. Here is what I found:

http://www.fusioncharts.com/forum/FindPost13330.aspx

As far as I know you can change the Wmode dynamically. Need not modify the js file.

[dk7g]

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

modal-panel.txt

Edited September 1, 2009 by Guest

[srividya_sharma]

Hi

Yes, I could re-create the problem here with modalPanel.

Let me try to find a solution quickly.

Srividya

[dk7g]

Thanks very much Srividya!

[srividya_sharma]

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

[dk7g]

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

[srividya_sharma]

Hi Derek,

It is a mistake on my part. Rectifying it... Will post the new jar in few minutes.

Sorry for the inconvenience.

Srividya

[srividya_sharma]

Hi Derek,

Please take the latest version 1.4 jar - http://www.fusioncharts.com/forum/FindPost17718.aspx

This should solve the problem.

Srividya

[dk7g]

(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 September 17, 2009 by Guest

[srividya_sharma]

Hi Derek,

Good to know that it worked out well for you.

Srividya

Ask, and get more out of FusionCharts Everyday!