Article: Domino Fusion Charts »
FERDY CHRISTANT - MAR 30, 2006 (08:06:25 PM)
Face it. Customers, and especially managers, like graphs. The visual feedback they get from it saves them time going through detailed reports. Generating reports and graphs in Domino has been described before, but it never hurts to have options. If you would like to create your first fancy web graph in minutes, then read on...
The product
For this article I used Fusion Charts, a very popular, yet affordable set of Flash charts that you can easily include in your web development platform of choice. You can download a free fully featured evaluation copy of this product here. The only limitation in the evaluation copy is the presence of company credits.
The graph demo
In this article I'm showing you one simple graph. I haven't created it myself, it is taken directly from the samples that come with the product. I slightly altered it and integrated it into a Domino database. Here's an indication of what it looks like. Click on the image to see the actual Flash graph inside the online Domino database(it contains an animated effect)
Like it? Well, this isn't the best graph. Go check out the graph gallery if you like to see better examples. For now the point is to just get things working.
The graph database
If you would like to know how the graph is integrated in Domino, please first download the demo database and open it in Designer. Now let's see how this works...
You need three things to integrate a Fusion Chart into a Domino database:
- The chart Flash files
- Your data, in XML format
- A page or form that links to a graph and the source of the data
1. The Flash files
The Flash files come with the product, in the "Charts" directory. There's actually no need to include these SWF files in your design. Alternatively, you can place them on a central server somewhere and refer to them. Since I don't like that deployment dependency, I much rather make them available in the Design. This makes it also possible to replicate them to local servers across the globe.
In the Design, I simply attached all the files into the design as File Resources. If you're still on R5, you can include them as Image Resources.
2. Your data, in XML format
Fusion Charts expects all your data to be in XML format. This is great actually, as that makes it usable on pretty much every web development platform. In the demo database, the XML data is a simple page called "data.xml" that contains static data. In a real life scenario, you will probably combine a page with an embedded view, or perhaps use an agent to generate XML from dynamic data. As long as you have a Domino URL that returns the XML, all is good.
3. Linking the data to the graph
The last step is to link your data to the graph. In the demo database, this is done on the form "Example graph". Let's analyze this form.
The top row of the Form contains three hidden fields. "DataURL" contains the formula that calculates the URL to your XML data. In the example, the same data will be used to create both a graph and a grid. The URL I calculate in the field is absolute, but you can also make it relative. beware though, the URL must always end with a valid Domino URL command! Thus to open a page called "data.xml" you need to use "data.xml?openpage" and not just "data.xml". The second and third hidden field calculate the URL of the Flash files (graph and grid), which we attached as File Resources earlier.
The rest of the form is a large part of pass-thru HTML. All this HTML is needed to embed the Flash objects on the web page. The reason everything is on there twice, is that not all browsers handle the object tag the same. Inside the HTML you see a few computed text entries, marked in green. These value simply refer to the precalculated values of our hidden fields. They point to the Flash file, and the data input file. That's all there is to it!
Conclusion
Integrating pretty web charts into Domino data is extremely simple and affordable. The Fusion Charts product has a lot more capabilities than demonstrated in this article. The documentation that comes with it is extensive, and easy to pick up. Give it a try, you will not regret it.



Comments: 18
Reviews: 8
Average rating:
Highest rating: 5
Lowest rating: 3
COMMENT: INDY
APR 5, 21:07:37
COMMENT: SMDELFIN

MAY 26, 08:04:28 AM
COMMENT: NICK
SEP 7, 09:06:52 AM
COMMENT: PATRICK KWINTEN


OCT 9, 13:33:11
I have a bit of a problem with adding the second graph, the legenda:
If I look at the code of the Fusionchart website I see that they add extra parameters to size it:
If I add these parameters to the code in domino it cannot find the source.
Do you know the correct syntax for it? (you did not included this in your example)
Great article by the way, looking forward to hear from you if you find optional products for solutions!
KR Patrick «
COMMENT: ANYCHART

JUL 2, 07:07:41 AM
COMMENT: LI

JUL 13, 16:18:16
just CREATE > OBJECT > CONTROL > MACROMEDIA FLASH PAPER
(i guess you might need flash installing on your development machine to see the object in your OLE list?)
i did try getting notesagents to create the xml but the notes client was too stupid to run the agent each time the xml changed (like it was cached if in the client) so in the end i resorted to creating notesdocument as xml files and calling them.
for basic charts (little xml returned) you can then call the object to play:
'myFlash' is the object's name
myFlash.LoadMovie 0,"http://template/simons/kpi.nsf/MSColumn2D.swf?Open&dataXML=" + (headerStr + categoriesStr + data + footerStr + stylesStr)
Call myFlash.Play()
-------------------------------------------------------
more complex charts (Lots of xml) are a bigger pain 'cos of the dataxml limit.
so:
myFlash.LoadMovie 0,"http://template/it/resource.nsf/MSLine.swf?Open&dataURL=" + "http://template/it/resource.nsf/0/" + newxmldoc.UniversalID + "?opendocument"
Call myFlash.Play()
just create an xml doc using script (newxmldoc) and reference via the dataurl method. the important bit is on the form you display the xml in you need to set the content type to other > "text/xml" this stops notes doing its dodgy html render and just displays the xml (i put it into a text field called XML)
i hope that helps as getting a web version working was pretty easy - but this was a bit more of a pain in the (_,_). still, it impressed the directors with all their KPI graphs :) «
COMMENT: TOM A.
NOV 1, 03:21:45 AM
COMMENT: AMELY

NOV 14, 23:34:57
Thank you
«
COMMENT: BRIAN


NOV 22, 08:55:36 PM
COMMENT: ALEX

NOV 23, 00:21:38
COMMENT: MIKE
DEC 31, 2007 - 05:24:23 PM
The problem I have now is how to generate the readviewentries dynamically and apply the xsl.
«
COMMENT: MIKE
JAN 2, 2008 - 07:21:53 AM
COMMENT: MICHEL
JAN 24, 2008 - 09:28:00 AM
is their any click event on it «
COMMENT: FROOGAL
MAY 20, 2008 - 05:43:39 PM
check out http://visifire.com. it is on silverlight & i think graphics are unbeatable
«
COMMENT: FERDY
MAY 21, 2008 - 03:39:01 PM
Thanks for the tip! «
COMMENT: KIRAN
OCT 21, 2008 - 08:21:00 AM
COMMENT: KIRAN
OCT 21, 2008 - 08:23:44 AM
COMMENT: ANTON BARANCHUK


NOV 5, 2008 - 12:27:47