Lotus Notes

Recently in my new project I have implemented flash/xml based charts powered by (www.fusioncharts.com). Great thing is that it's free to download and use. You need to pay if you wish to go for advance charts.So, Lets discuss those which can be downloaded with no cost. There are number of charts like, 3D/2D Column & Bar Charts,Line Charts,2D/3D Pie & Doughnut Charts,Area Charts,Stacked Charts, Gantt Chart and many more. Have a look here,
(http://www.fusioncharts.com/free/Gallery.asp).

FusionCharts are .swf file which takes xml data as a input and draws flash charts on .For domino implementation just add swf file in your File Resource , build your xml string, pass it in the chart and get the nice flash chart.

Actually, I have been implemented this long back in PHP, but never got such requirement to do in Lotus Notes. But when I got the requirement , I consider FusionCharts only because it's simple and great.

In this blog I will discuss everything starting from form designing to displaying chart. I will be using Bar chart in this example.Let's start now..

1- We are going to display number of "Site visitors" by month. To do so , Add text field in your form A called "Site Name". In next row add caption start from "Jan" to "Dec" ( in separate column) and at the end "Total" caption. Now add one number field for each month and one for calculating "Total" for the year. Put a formula on "Total" field to calculate total ( Jan+Feb+..+Dec).Here is the visual,



2- Run your form in notes and create some sample docs by feeding entry for each month.Something like,



3- Create one more form B ,which will share the same form name as Notes form ( which used to create document earlier) which will be used to open the document on web with chart.here is the visual,



4- Open Form B in designer and add first text field (Computed for Display) called "ColumnChart" and write following formula,

tmpProtocol:= "http" + @If(HTTPS="ON"; "s"; "");
txGraphURL:= "FC_2_3_Column3D.swf";
tmpProtocol + "://" + @GetHTTPHeader("Host") + "/" + @WebDbName + "/" + @URLEncode("UTF-8";txGraphURL)
( Assume you have downloaded swf file from fusionchart website and kept in your "file resources)

Next add text field (Computed for Display) called "ChartSize" and will have following formula ,

"900" : "345"

Next add text field (Computed for Display) called "Colors" and will have following formula,

"99CCFF" : "FF99CC" : "CC9900" : "99CC99" : "9999FF" : "FFCC66" : "CCCC66" : "9999CC" : "FFCCCC" : "99FFCC" : "CCCCFF" : "99CC66"

Next add last text field called "ChartData", which will compute feeded data and build xml . here is the formula for same,



Important :

1) Make sure all the tags are closed properly.
2) Parent tag (graph) is started and ended properly.
3) Data type conversion. Numbers must be converted into text.

5- Add following code on your form and pass thru ,



here are the formula used on in above code,




That's it. Open your document ( which you have created earlier) on web , it will display nice Flash chart for you by month wise. here it is,



You can even create complex one using AJAX which will dynamically build xml string and pass it to swf file.I have done similar stuffs using LS and ajax. Here is the sample using LS,



You can download working copy from OpenNTF.org, Here is the link,

http://www.openntf.org/Projects/pmt.nsf/ProjectLookup/Flash%20Charts%20for%20Domino%20web%20application