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

12 Responses to "leverage your Domino web application with interactive flash based charts"

  1. gravatar AnyChart - flash charts Says:

    Have you seen AnyChart? http://www.anychart.com
    What do you think about it?

  2. gravatar Dietrich Says:

    I am really impressed with this!

    I know I can use javascript to create create charts on the fly, but they are not in the jpeg format.

    With this method, reports can be created where all the content can then be copied across to a Word document or some other media.

    Well done!

    Dietrich

  3. gravatar Roland Says:

    Thanks for sending the NSF. I've attempted charting before but have running into snags getting the Domino data into the format I need for the chart. I'll give it another go after looking at your technique.

    There's another chart tool out there called JFreeChart that looks good too. Purchasing the Developer guide gives you all the documentation, otherwise its free.
    http://www.jfree.org/jfreechart/
    I'm not sure which will be the best for our org.

  4. gravatar Rishi Says:

    @ AnyChart - flash charts, It's great too. I never go did case study with that.. Soon I will come up with some case study article on FusionCharts,AnyCharts and JFreeCharts. Thanks for letting us know.

  5. gravatar Anonymous Says:

    Great Post,

    Please post the NSF file to download easy to implement.


    Regards
    Vijay

  6. gravatar Rishi Says:

    @Vijay, It's not allowed to attach any file in the blog. So, if you needed please drop me an e-mail so that I can reply with nsf.

    Rishi

  7. gravatar pictux Says:

    Hi, well done!
    And what about AmCharts (www.amcharts.com)?

    Regards!
    M

  8. gravatar Azmir Says:

    Hi Richi,

    Can you email me nsf file to azmir.zakaria@gmail.com. It will be great for me to try this feature with notes

  9. gravatar Rishi Says:

    @Azmir,

    You can download from OpenNTF.org, here is the link

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

  10. gravatar indiroma Says:

    Thanks for the sharing this website. it is very useful professional knowledge. Great idea you know about company background.
    web application development

  11. gravatar Rishi Says:

    @Indiroma,

    What do you mean by company background ? Sorry, I didn't get you.

  12. gravatar william Says:

    Thanks for sharing this article I also like website with flash designing specially the intro part of the website is so attractive and I agree with your view that flash presentation Increasing your web traffic and page views Add, add your website in www.directory.itsolusenz.com/

Leave a Reply

preload preload preload