Fusion Charts tips ( including xPages )

During a recent Proof of Concept with XPages I was struggling to get fusion charts to work with Xpages so I thought I should write down what I learned. To be honest there is really only one tip that is specific to Xpages but the Fusion Charts bits was useful learning for me.

Fusion Charts is a flash based system that lets you easily create charts, dashboards etc… There is a free version and a paid for version. There are also several other competitors to this and I would be interested to hear how others have found them.

Image:Fusion Charts tips ( including xPages )

There is a demo database here, this can also be downloaded. Xpages it requires 8.5x to run. The help in the Fusion download is also excellent.

Fusion Charts – how do they work ?

There are two things that you need to think about.

1) the html which positions the chart and loads it

The preferred means of adding the chart to your page is to use Javascript embedding. This will make sure that the graph fires up straight away in Internet Explorer. To do this I added the following code to my xpages. In this case it works fine but in another case later adding html directly to the Xpage source didn’t work so well and Matt White suggested I should use a computed field.

The code code references a js library that I imported into the javascript libraries and a swf which I imported as a file resource.

Image:Fusion Charts tips ( including xPages )

2) the data source for the chart

There are two ways that Fusion Charts can reference data. The first is to use a separate xml file and the second is to use the “dataxml” method where the data is captured within the html code on the form.  

I initially went for the dataxml method but then abandoned this and went for external xml files. The following section shows the different methods that I developed and the pros and cons of each

Method 1 – embedding the data on the form using the dataxml approch

http://www.seancull.co.uk/Public/Examples/SC/XPages_C.nsf/using_data_xml_method_hard_coded.xsp

I pasted the html from the example onto the Xpage thinking that I could generate the XML as the page was rendered.

Xpages tip >>>> The problem here was that to deal with the parameters within the html string I converted them to single quotes and Domino converted them back to double quotes – breaking the code. Matt White suggested that I should build the HTML in a computed field ( which I would have had to do later on anyway ) – this cured the problem and the graph worked.

Image:Fusion Charts tips ( including xPages )

What put me off this method was two things.1) constructing the html looked like it would be difficult  to do and worse still it would be difficult to debug   2) there is a warning in fusion documentation that browsers will truncate the data if there is too much

Image:Fusion Charts tips ( including xPages )

Image:Fusion Charts tips ( including xPages )

Method 2 – using an existing xml file in the file resources

http://www.seancull.co.uk/Public/Examples/SC/XPages_C.nsf/using_hard_coded_file_resource.xsp

This worked well but you either need to have pre-imported the file resource or used DXL to have created one programmatically

Note that you need to reference the resource as data.xml?OpenFileResource  rather than data.xml because Fusion charts adds a random parameter to prevent caching so your url becomes data.xml?OpenFileResource&curr=120

Method 3 – Using a web agent to provide the XML on the fly using lists

http://www.seancull.co.uk/Public/Examples/SC/XPages_C.nsf/using_dynamic_agent.xsp

I was concerned that there might be an issue of “lock-up” if the same server was serving the xpage and the xml feed to power the chart but it seems to be ok although I have not done any stress testing.

The agent uses view entries on a categorised view. The category names and totals are added to a list which is then converted to XML. Although using lists is clean and simple it does mean that the order fo the bars on the chart will be alphabetical because that is how the list sorts – this would not work well for graphs by month for example

Note that you need to reference the resource as agentname?OpenAgent  rather than agentname because Fusion charts adds a random parameter to prevent caching so your url becomes agentname?OpenAgent&curr=121

Image:Fusion Charts tips ( including xPages )

Method 4 – Using a web agent to provide the XML on the fly using arrays

http://www.seancull.co.uk/Public/Examples/SC/XPages_C.nsf/using_dynamic_agent_3d.xsp

This method has the advantage that you can do muilti series graphs and the order of the bars will be as per the order in the view ( which you can manipulate easily using sorts in the column )

Note that you need to reference the resource as agentname?OpenAgent  rather than agentname because Fusion charts adds a random parameter to prevent caching so your url becomes agentname?OpenAgent&curr=121

Image:Fusion Charts tips ( including xPages )

Method 5 – Using XML stored on a Notes Document

http://www.seancull.co.uk/Public/Examples/SC/XPages_C.nsf/using_xml_stored_on_a_form.xsp

This builds on method 2 but has the advantage that you can programmatically create a docume
nt easier than a file resource.

Note that you need to change the html properties of the form and call it using ?opendocument as described above

Image:Fusion Charts tips ( including xPages )

Conclusions and queries

1) Free Fusion Charts looks promising and the paid for version has additional functionality including dashboard widgets

2) For complex graphs I would definitely recommend storing the pre-generating the xml on a scheduled basis. I would probably then store that straight into a Notes document as per method 5 above

3) I cant help but feel that there must be an easier way of getting the data out of a categorsied view and into XML. I would imagine that it can be done using XML transform tools but its not an area I am really strong in. I looked at RVEX on Openntf but couldn’t get it to work

4) It would be interesting to know if any of the other charting products could work easily with a javascript array as this could be built up on the xPage using javascript

5) In production I would  build the charts on Custom Controls rather than straight onto the xPage

As ever, please feel free to suggest any improvements ( other than spelling )

Cheers, Sean

web_agent_arrays_method_4.lss
web_agent_lists_method_3.lss
XPages_C.nsf

One Reply to “Fusion Charts tips ( including xPages )”

  1. when i download the XPages_C.nsf database so getting error ,

    How to download XPages_C.nsf, web_agent_arrays_method_4.lss and web_agent_lists_method_3.lss

Leave a Reply

Your email address will not be published. Required fields are marked *

5 + 2 =