Fusion Charts intergration with JSF

[Parker]

I have ported the code and have it working in my project. It turns out the problem seemed to be with the way the XML was being used as part of the body of the tag. I changed this to a standard tag attribute and all works fine now.

[srividya_sharma]

I have been debating over this for a while. Which is more convenient -Providing the xml as an attribute or as body content

If you can give me pros/cons of both, it would be great.

Why did you opt for xml as attribute in the tag?

Thanks.

[srividya_sharma]

Here is the FusionCharts tag library jar for JSF 1.2, for the benefit of all.

You can provide the xml as attribute if you want to give a binding value from bean, you could also provide xml as the body content, if you want to type it inline. Rest of the usage remains same.

I hope this helps all.

fusionchartstaglibJSF1-2.zip

[JimmyCarroll]

Hey Srividya, great work. This really helps me out. Would you mind posting the source?

[srividya_sharma]

Here is the source. Enjoy!

fusionchartstaglibJSF1_2SRC.zip

[glorysdj]

hi srividya_sharma, when i use this taglib with powercharts in a "binding value from bean" way, a "invalid data" problem happen, any ideas please?

 

thank you

[srividya_sharma]

Can you provide the code snippet of how you are using the tag?

[glorysdj]

ok, here it is

 

 

 

 

 

< fc:renderHTML chartId="devices"

 

filename="myProjects/fusion/power/DragNode.swf"

 

width="900" height="600"

 

xml="#{charts.devicesXML}" />

 

 

 

i can use it to display fusioncharts and fusionmaps very well, but with powercharts, "invalid xml data" problem happens. And i'm sure there's nothing wrong with the xml String.

 

Thanks.

Edited March 29, 2009 by Guest

[srividya_sharma]

I will try to test it with PowerCharts here.

Can you turn the debugMode "on" and tell us what it shows?

[glorysdj]

ok, i've solved the problem.

 

i left some ' & l t ; ' in the xml string. because i wanted to use '< BR >'.

 

i was so careless.

 

it works well with powercharts too, great work!

 

thank you very much!

Edited March 30, 2009 by Guest

[srividya_sharma]

Thank Heavens! Got me nervous for a minute.

[karani]

I tried to modify my current application jsf to use fc:render tag for fusionchart implementation, but it gives me javascript error and doesn't display the chart. It just displays the word 'chart'. I am providing entire xml from my backing bean in the body between the opening and closing fc:render tags. Javascript error gives an issue for # sign where backing bean.xml is mentioned. Can you tell me where I could be going wrong?

Thanks in advance.

[karani]

Okay, now I downloaded the latest fusionchartstaglib-JSF1.2 and it doesn't show me extra piece of code, but instead of displaying the chart it displays 'No data to display'. And I don't know where this message is coming from. Can you please help me debug this? It seems simple, but getting difficult to implement.

[srividya_sharma]

Hi Karani,

Welcome to the FusionCharts JSF forum thread!

Please verify the following:

1. You would need to include FusionCharts.js in your jsf page that renders the chart. Example,

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

Based on the location of the javascript file, above line of code will change.

2. With JSF1.2 taglib jar, you can give the complete xml as part of the body of the fc:render tag

OR

give the xml value from backing bean as an attribute to the tag. (Note: If attribute is provided, the body of the tag is skipped.) Example,

<fc:render chartId="#{exampleChartData.chartId}" filename="#{exampleChartData.filename}" width="#{exampleChartData.width}" height="#{exampleChartData.height}" xml="#{exampleChartData.xml}"></fc:render>

Hope this solves your problem.

[srividya_sharma]

Hi everybody,

I have fixed an issue with registerWithJS attribute from the previous version of the jar. Here is the latest jar (for JSF 1.2).

I hope it has not caused any problems to anybody so far.

regards.

fusionchartstaglibJSF1-2.zip

[karani]

Hi srividya, Thanks for your quick response but I have verified javascript location and I am passing xml as an attribute and data comes from my backing bean. When I do source view on my page, this is what I get...which looks fine to me.

<!-- START Script Block for Chart chart1Id-->

<div id="chart1IdDiv" align="center">

 Chart.

</div>

<script type="text/javascript">

 var chart_chart1Id = new FusionCharts('../FusionCharts/FCF_Column3D.swf', 'chart1Id', '700', '300', '0', '0');

 chart_chart1Id.setDataXML("<chart caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units' decimalPrecision='0' formatNumberScale='0'><set name='Jan' value='462' color='AFD8F8' /><set name='Feb' value='857' color='F6BD0F' /><set name='Mar' value='671' color='8BBA00' /><set name='Apr' value='494' color='FF8E46' /><set name='May' value='761' color='008E8E' /><set name='Jun' value='960' color='D64646' /><set name='Jul' value='629' color='8E468E' /><set name='Aug' value='622' color='588526' /><set name='Sep' value='376' color='B3AA00' /><set name='Oct' value='494' color='008ED6' /><set name='Nov' value='761' color='9D080D' /><set name='Dec' value='960' color='A186BE' /></chart>");

 chart_chart1Id.render('chart1IdDiv');

</script>

<!--END Script Block for Chart chart1Id-->

Can you tell me, what could be wrong here? and where is 'No data display' message coming from? If you can tell me that then I may be able to troubleshoot more. Also, will it make any difference if I have debugMode='true'? and how should I debug this then?

I hope you can help me with this. I do have other jsf/html tags on my page, will it create any issue?

Thanks.

Do you support during US daytime?

[karani]

Hey Srividya, I think, I resolved the issue. Issue was that I was using your taglib.jar and the js provided in the zip posted in your older replies. And I figured from other topic replies, that Fusionchart free version uses graph and purchased version uses chart tag. And while troubleshooting, I had converted graph tag to chart tag. Anyway, it is resolved. I wanted to find if I were to use purchased version (which we have already bought) where will I get jsf taglib.jar?

Thanks.

[karani]

Hi Srividya, I again resolved the issue for using chart option. so now my chart appears fine. I have this chart appearing in an IFRAME. I need to make this chart clickable. When you click on bar of this column3D chart, user should get navigated to another application placed on another IFRAME on the same page. Now, I am able to do it using link option and providing appropriate URL. and it opens the correct page in the 2nd application. but the issue is, since its an IFRAME, I should be able to navigate to my original app with the chart. all IFRAMEs are in 'tab'. but when I click on the first tab, it doesn't display that chart to me. when I hit REFRESH on this page (F5), it brings the chart back. I am getting data from backing bean.

Hope you understand the issue, please let me know if you need any more clarification.

Thanks.

Note: myJS function uses ajax functionality to go to other app page. but when I try to come back to the original tab, i get the page without the chart.

[srividya_sharma]

Hi Karani,

Good to hear that your issue with the xml got resolved.

The tag library jar can be used with FusionCharts free as well as v3. In fact, the only thing that will change when you purchase v3, are the swf files. Of course, you would be using more features in v3, with slight difference in the xml.

Can you tell me about the "tab" you are talking about. Usually, in an iframe both frames are visible.

regards

Srividya

[karani]

so I have 2 IFRAMEs present in a richfaces 'tab'. one IFRAME has a page which displays fusionchart and 2nd IFRAMEd tab displays some other application. now when I click on fusionchart, I would like to go to a page of my 2nd tab application. Since IFRAME applications are independant, when you click on the tabs...it brings you the last visited page of your application. so having said that, when I click on the first tab again, it should show me fusioncharts again. but that doesn't happen. It takes me to the first page but fusionchart doesn't appear. when I hit REFRESH, it brings Fusionchart back. Can you help me? there seems to be some issue with session I am assuming. This entire use case was working correctly, before we implemented fusionchart. we were using Jfreechart, we are in a process of implementing fC in place of Jfreechart. Hope this helps.

[srividya_sharma]

Hi Karani,

What is the message on the chart? Again, turning debugMode "on" will also help.

Srividya

[srividya_sharma]

Also, can you post the code snippet of the tabs and the Iframes?

Regarding your earlier question, when you set debugMode "true", the chart will display detailed debug messages, looking at them you could get a clue as to what could have gone wrong.

Edited April 10, 2009 by Guest

[karani]

There is no message on the chart. but logic of index.jsp is -

<rich:tab label="Home" name="Home">

<jsp:include page="/jsp/home.jsp"/>

 </rich:tab>

 <rich:tab label="Id1 Tab" name="Id1Tab" >

<IFRAME ID="Id1" NAME="Id1"

SRC="<%= mgr.getId1URL() %>" width="1100" height="650">

</IFRAME>

 </rich:tab>

This index.jsp also has a javascript function that is required by fusion chart -

<SCRIPT LANGUAGE="JavaScript">

  function myJS(myVar){

alert(myVar);

<%

document.getElementById('IndexForm:DataInput').value = myVar.toLowerCase();

document.getElementById('IndexForm:Id1Link').onclick();

  }

</script>

And AJAX functionality is used to set the value for IndexForm:DataInput.

home.jsp has Fusionchart implementation for JSF -

<fc:render chartId="chart1Id" filename="../FusionCharts/Column3D.swf" width="700" height="300" xml="#{Backingbean.xml}" registerWithJS="1"></fc:render>

Backingbean.xml has entire chart tag along with all the set tag with -

xml+="<set name='Jan' value='462' color='AFD8F8' link='j-myJS-India' />";

So, with myJS functionality, I am able to navigate to the page on app Id1...but when I click back on the tab of home.jsp fusioncharts disappear.

Hope this can help you give an idea of my code.

Thanks a ton.

[srividya_sharma]

It will take me some time, but let me try to replicate a similar situation here. Will keep you posted.

[karani]

Sure. Do let me know if you want me to give you any clarification or if you have specific question. Are you online? Do you have chat option on this forum?

[karani]

Just wanted to update you that, I kept debugMode="true" but when I click back on that tab, ofcourse that window doesn't appear anymore.

[srividya_sharma]

Are there any cache headers, you said refresh brings back the chart right?

Edited April 10, 2009 by Guest

[karani]

No, there are no cache headers, but when I hit F5, the URL for the page gets submitted again and with that, app Id1 page gets displayed and then when I click on the home page tab, it brings the chart on home page.

[srividya_sharma]

Please try putting these headers in the jsp with the chart and index.jsp:

response.setHeader("Cache-Control","no-cache"); //HTTP 1.1
response.setHeader("Pragma","no-cache"); //HTTP 1.0
response.setDateHeader ("Expires", 0); 

[karani]

Hey Srividya,

I tried to put it between head tags but didnt help

Thanks.