administration mode
Pssst...Ferdy is the creator of JungleDragon, an awesome wildlife community. Visit JungleDragon

 

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:

  1. The chart Flash files
  2. Your data, in XML format
  3. 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.

Share |

Comments: 24
Reviews: 8
Average rating: rating
Highest rating: 5
Lowest rating: 3

COMMENT: INDY rating

APR 5, 21:07:37

comment » Great and easy to integrate example especially for showing "bling bling" to the customer ;) Many thanks! «

COMMENT: SMDELFIN emailrating

MAY 26, 08:04:28 AM

comment » What I'm looking for. «

COMMENT: NICK

SEP 7, 09:06:52 AM

comment » 03 Still can't figure this out with dynamic data «

COMMENT: PATRICK KWINTEN emailhomepagerating

OCT 9, 13:33:11

comment » Hej Ferdy,

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 homepagerating

JUL 2, 07:07:41 AM

comment » There is similar tool for flash charts - www.anychart.com 01 «

COMMENT: LI emailrating

JUL 13, 16:18:16

comment » did you know you can embed them on forms in the notes client itself? so your notes apps can use them?

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 » AnyChart - http://www.anychart.com/ has a lot of great features and works the same way. «

COMMENT: AMELY emailhomepage

NOV 14, 23:34:57

comment » I got some informarmation that I need to think over.

Thank you 25 «

COMMENT: BRIAN emailhomepagerating

NOV 22, 08:55:36 PM

comment » That is interesting! Thank you.

12 «

COMMENT: ALEX emailhomepage

NOV 23, 00:21:38

comment » Very easy to integrate! Thanks a lot! «

COMMENT: MIKE rating

DEC 31, 2007 - 05:24:23 PM

comment » You got me started. I wrote this xsl to transform the xml delivered by readviewentries. The xsl will work on a 2-column categorized view and will transform it to the xml readable by FC.

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 » Mike, I am not sure what exactly you mean with "generate readviewentries dynamically", since these are always generated dynamically, by the server? «

COMMENT: MICHEL

JAN 24, 2008 - 09:28:00 AM

comment » How to Click on the chart that is on the plot ,anywhere except ythe bars etc

is their any click event on it «

COMMENT: FROOGAL

MAY 20, 2008 - 05:43:39 PM

comment » hey ferdy,

check out http://visifire.com. it is on silverlight & i think graphics are unbeatable 01 «

COMMENT: FERDY

MAY 21, 2008 - 03:39:01 PM

comment » Frogal,

Thanks for the tip! «

COMMENT: KIRAN email

OCT 21, 2008 - 08:21:00 AM

comment » 03 Is there any option to remove the text FusionCharts 2.3 . «

COMMENT: KIRAN email

OCT 21, 2008 - 08:23:44 AM

comment » Is there any option to remove the text FusionCharts 2.3 .? «

COMMENT: ANTON BARANCHUK emailhomepagerating

NOV 5, 2008 - 12:27:47

comment » Have you seen AnyChart solution http://www.anychart.com ? I think it should work the same way with Domino. «

COMMENT: KRZYSZTOF GACKOWSKI

MAR 26, 2009 - 18:10:46

comment » bardzo prosty w uzyciu :)

wielkie dzieki «

COMMENT: NATHAN emailhomepage

SEP 5, 2009 - 17:56:46

comment » Just a little utility made specifically for Fusion Charts, if you want to convert CSV files into Fusion Chart XML files, you can download it from here: http://www.mad-monkey.co.uk/cgi-bin/default.pl?21,parsecsv.exe «

COMMENT: CURTIS

SEP 19, 2011 - 03:20:09 PM

comment » I realize this thread is a couple years old but I'm wondering if anyone has some xsl that I can use a a starting point to show categorized views in fusion charts. «

COMMENT: BUSINSS SUBCRIPTION emailhomepage

JAN 31, 2013 - 05:28:11 AM

comment » Hej Ferdy,. I have a bit of a problem with adding...... «

COMMENT: DAD BUSINESS emailhomepage

JAN 31, 2013 - 05:28:25 AM

comment » i like to move it «

COMMENT: BUSINESS CONSULTING emailhomepage

JAN 31, 2013 - 05:28:39 AM

comment » i like to move it «

RATE THIS CONTENT (OPTIONAL)
Was this document useful to you?
 
rating Awesome
rating Good
rating Average
rating Poor
rating Useless
CREATE A NEW COMMENT
required field
required field HTML is not allowed. Hyperlinks will automatically be converted.