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