Lotus Knows " A Picture is Worth a Thousand Words"

There are many different ways now of integrating charts and graphs to showcase data in “byte” size formats in Domino. This article shows one way of implementing FusionCharts with Xpages in a Notes Application.

For most people, showing them

instead of 

has a greater visual impact that enables them to take better decisions. You can add such charts to your client and web applications using FusionCharts.

What do you need

8.5.x – ideally 8.5.2 if you want the same functionality in client and web

Some basic knowledge of Xpages

Understanding of XML and Domino agents. 

There is a sample database that can be downloaded - http://www.maargasystems.com/modernizing-lotus-applications/SampleCharts.zip

Step 1: Identify the data store for your chart. I have used a simple view called vwByStatistics for this.

Step 2: Download the SWF files from FusionCharts website. I have included the pie chart and bar charts in the Resources->Files. It makes sense to include those inside your design rather than put it on the server as it makes replicating the design to different servers easier.

Step 3: Include the FusionCharts.js files into your script libraries.

Step 4: Each SWF takes as input the data in XML format. The bar and pie chart use a very simple XML in the format as below:

<graph caption= <caption> xAxisName= <name> yAxisName=<name> decimalPrecision='0' formatNumberScale='0' >

<set name=<categoryvalue> value=<value> color='<color> />"

</graph>

In this sample, the XML is generated via an agent – this can be generated by a form / view as well. One reason to use an agent is so that we can combine the data from different sources and generate the appropriate XML.The agent Overall.xml writes the view vwByStatistics as XML.

Step 5: Chart_ByOverall_Pie.xsp contains the code to display the graphs.

The Xpage has 1 combo box to switch between Bar chart and Pie chart – default is set to Bar.

There is 1 div and 1 panel – showing the different charts.The code is very similar in both the div and panel.

• Initiate the chart
• Set the data
• Render the container.

Here is the code in panel showing the pie chart.

var myChart = new FusionCharts("Pie3D.swf", "myChartId",

"1000", "500");

myChart.setDataURL("Overall.xml?openagent");

myChart.render("div3");

Set the visible property of the div and panel based on the selection in the combo box.

Step 6: Ensure that your database has atleast Author access to Anonymous to test. For testing the sample app, ensure that the server and db keywords are set correctly on your server.

 Note for making this work on Notes Clients - You need another page with iFrame pointing to the Xpage. This is created in Home.xsp.

The advantage of using XPages is that you can combine different graphs to create an entire dashboard.