srividya_sharma

Fusion Charts intergration with JSF

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 by Guest

Share this post


Link to post
Share on other sites

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 by Guest

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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. :(

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 by Guest

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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); 

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