keithstric.com :: SnTT: Flash charts in Lotus Notes

This week I've been working on getting amCharts to work in a dashboard I'm working on. I was pointed to amCharts and the inkling of how to accomplish this by the sample database from the LotusPhere 2008 session BP210: Reports, Charts and Graphs in IBM Lotus Notes over on Julian Robichaux 's site. In this SnTT, I want to show you another way to implement this functionality into your applications. It gives your applications a nice professional look and keeps the customer's boss happy with nice pretty charts.

The dashboard is a form with a drop down box to pick the information you want to see and then a "Go" button to go out and get the pertinent numbers, create/update an XML file/document and then display 2 charts in a Microsoft Web Browser control embedded on the form. One chart is a bar chart with the hard numbers and the other is a pie chart which shows the percentages the numbers represent. The idea here was that I would display this information in a nice looking dialog box. However I couldn't get this to work. I spoke with Nathan Freeman because I knew he had worked with the Microsoft Web Browser control quite a few times and he informed me in a dialog box that the auto-run did not work for ole objects. I attempted to get it to work by using the PostOpen event to no avail. So, I ended up just displaying it as a normal form.

But to get this to work here's the path I followed, I'll also post a demo database in case my ramblings turn into just that, rambling...

>I created the Dashboard form with a drop down box so that you can pick what data you want displayed along with a "Go" button. The Go button when clicked goes out to the proper views to get the numbers for whatever was selected and call the browser.Navigate(url) function to send the web browser to the pertinent web page. The only downside to this function is I did hardcode the server name for figuring out the URL string to pass to the browser. I guess you could probably include a field in a profile document or something like that to store the host name. So far, easy right? I also created another form which is the configuration form. You'll need a lookup key field and a rich text lite field on this form for attachments. You'll also need to create another form to be stored as an XML file. This form includes 2 fields, a lookup key field and an XMLData field. In the form properties you'll have to change the content type to Other: text/xml.

You'll also need to create 3 views to support all this. One is the XMLData view which will contain all the XML files sorted by the lookup key. Second is a view which will contain the configuration documents sorted by Lookup Key and third is a view or views which will contain the documents where you'll get all the data that you want to show in the charts.

Now, amCharts uses several files in order to function. To start with you'll need an html file, the data.xml file, the settings.xml, swfobject.js and a special .swf file depending on the type of chart you want to display. In our case we're showing a pie chart and a bar chart so you'll need ampie.swf and amcolumn.swf. All of these files will need to be attached to the configuration document. I'll go ahead and cover the contents of the html file as the contents of the settings.xml file are a little too complex to cover here. In my case the html file is called showgraph.html, but you can name it whatever you like as this will be the page that is displayed in the Microsoft Web Browser control. Below is the one I used in the demo:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Totals Report</title>
<script type="text/javascript">
function cleanupFP9IELeaks() {
  __flash_savedUnloadHandler = null;
}
window.onbeforeunload = cleanupFP9IELeaks;
</script>
</head>
<body>
<table>
<tr><td>
<!-- amcolumn script-->
<script type="text/javascript" src="/A55B3A/flash.nsf/Graph Config/Test 1/$FILE/swfobject.js"></script>
	<div id="flashcontent1">
		<strong>You need to upgrade your Flash Player</strong>
	</div>
	<script type="text/javascript">
		// <![CDATA[		
		var so = new SWFObject("/A55B3A/flash.nsf/Graph Config/Test 1/$FILE/amcolumn.swf", "amcolumn1", "290", "240", "8", "#FFFFFF");
		so.addVariable("path", "../4PA/");
		so.addVariable("settings_file", escape("/A55B3A/flash.nsf/Graph Config/Test 1/$FILE/amcolumn_settings.xml"));
		so.addVariable("data_file", escape("/A55B3A/flash.nsf/(xmlData)/Test 1_columndata.xml"));
		so.addVariable("preloader_color", "#999999");
		so.write("flashcontent1");
		// >
	</script>
<!-- end of amcolumn script -->
</td>
<td>
<!-- ampie script -->
<script type="text/javascript" src="/4PA/pvt.nsf/(luGraphConfig)/Totals/$FILE/swfobject_pie.js"></script>
	<div id="flashcontent2">
		<strong>You need to upgrade your Flash Player</strong>
	</div>
	<script type="text/javascript">
		//<!DATA[
		var sr = new SWFObject("/A55B3A/flash.nsf/Graph Config/Test 1/$FILE/ampie.swf", "ampie2", "290", "240", "8", "#FFFFFF");
		sr.addVariable("path", "../4PA/");
		sr.addVariable("settings_file", escape("/A55B3A/flash.nsf/Graph Config/Test 1/$FILE/ampie_settings2.xml"));
		sr.addVariable("data_file", escape("/A55B3A/flash.nsf/(xmlData)/Test 1_piedata.xml"));
		sr.addVariable("preloader_color", "#999999");
		sr.write("flashcontent2");
		// >
	</script>
<!-- end of ampie script -->
</td></tr>
</table>
</body>
</html>

Now, of note here is the divs, they have to be named differently and then use that div in the so.write/sr.write calls. Also of note is the function CleanupF9IELeaks, this is to work around a bug with the Flash 9 player displaying multiple flash objects on the same page. You get the error "Out of memory on line: 56" when navigating away from the page. That function helps get rid of that but unfortunately it really doesn't work with the Microsoft Web Browser control, it doesn't return an error, just doesn't work. Also, the data here is hard coded, I'm sure some of you javascript gurus out there could get around the hard coding.

I think that is about it. Check out the demo database in the downloads section and that should cover everything. Just be aware of the hardcoded references in the showgraph.html file and the "Go" button on the dashboard form. Hopefully this will give you some ideas on how you can incorporate quick, easy charts and graphs in your Lotus Notes applications.

Comments

ID: 1
Date: 04/18/2008 01:09:36 PM
Name: Dee
Website: http://null

How do I get something in Lotus Notes to flash? I've seen it before, but don't have a clue how to make that happen. Emoticon

ID: 2
Date: 04/18/2008 02:59:17 PM
Name: Keith Strickland
Website: http://www.keithstric.com

I'm not sure I understand what you're asking. With the flash charts I'm just building an XML file from Notes Data, storing that XML file as a notes document and then pointing amCharts back to that particular XML file. All the charts are then displayed in a web browser that is embedded on a notes form. I didn't have to write any flash code to get this to work.

If you're asking how to display a notes application in flash, I don't have a clue how or if you could do that.

But, depending on what you're trying to get from notes, data I assume, just use a URL to whatever data you need within the notes application. That's how I populate the charts. Also, there's a demo database to go along with this article that you can get over on the left in the downloads section.

Hopefully that helps.

Keith

ID: 3
Date: 05/16/2008 03:49:56 AM
Name: Devendran
Website: http://

Excellent Article. Initially, it was bit hard for me to understand(Not much experience in domino web development though)then after spending few hours, now, i was able to generate several charts. And referring to amcharts documents will help them more to explore unchartered territories of this article.

ID: 4
Date: 05/16/2008 09:06:26 AM
Name: Keith Strickland
Website: http://www.keithstric.com

amCharts is a cool package, especially the price Emoticon

I apologize that the article was difficult to follow, here lately I really haven't been myself due to a heavy work load and not much time at home to work on the website, so I've kinda been throwing this stuff together when I can.

I'm glad this was useful for you, whenever I find stuff like this I try and put together a SnTT on how to integrate it with the Lotus Notes client and publish it.

ID: 5
Date: 06/16/2008 05:42:02 AM
Name: jhon12
Website: http://

hey guys,talking about charts,then take a look on this an amazing charting component offered under open source { Link } powered by silverlight just for free

ID: 6
Date: 06/16/2008 10:07:04 AM
Name: Keith Strickland
Website: http://www.keithstric.com

Those are nice looking charts and the fact that they're open source is even better. But you have to install Microsoft Silverlight to use them Emoticon

In a corporate environment users may not have permission to install software, actually this is becoming more and more the norm.

Keith

ID: 9
Date: 04/17/2010 10:56:17 AM
Name: Ted
Website: http://

Here is one more great tool at { Link } which doesn't need any additional components to be installed - just a mere copy-paste install process and has good functionality.

ID: 10
Date: 04/19/2010 03:38:30 AM
Name: 7th.Guard
Website: http://

Here is one more great tool at { <a href="{ Link } rel="nofollow" target ="blank">Link</a> } which doesn't need any additional components to be installed - just a mere copy-paste install process and has good functionality.