BizzyBee’s BizzyThoughts

Even better looking charts from your data with Fusioncharts

My very first article here was about how to create good looking charts from your data.

I found a tool that produces even better looking results in the browser. Take a look at this:

The tool I found was FusionCharts. It’s not freeware or open source, but you can download an evaluation version on their site and if you like it, you can buy a user license for 69$ (this means you cannot edit the flash source code, and you are allowed to use it on one website and an unlimited number of developer and test servers).

Using their evaluation version, I created a charts demo database with some examples on how to use Fusioncharts in a Lotus Notes web application.

Just download and unzip the database and do a web preview of the page Charts.

Below you find a clarifying image of the different parts that are needed in html.

1. Include the FusionCharts.js javascript library. I inserted it in the file resources of the database.
2. You need a reference to the type of chart to use. All charts are included in the file resources as swf (Flash) movies. If you ever buy a license, just replace the files in the file resources with the files in the charts directory of the package.
3. Add a div where you want to display the chart and refer to it by its id in your javascript.
4. The data must be present in an xml file. This is where you have to decide on how to deliver the xml.
5. Give the chart object a name for js access, f.e. to do a refresh of the chart.
6. Experiment with the dimensions of the chart.

I included 3 examples in the demo database:

1. Pie3D (top image) uses form piedata to create documents, view piedataxml to embed in page pie3d.xml. The page also contains the markup xml.
2. Column2D (image below) uses form columndata to create documents, view columndataxml is used to access its values via @DbColumn in page column2d.xml.
3. MsColumn3D (image below): I just put the data in a simple page mscolumn3D.xml (I didn’t have any spare energy to create a structure around it ;-))

For an explanation of all different parameters, settings and chart types, I refer to their website. There are tons of different possibilities, gradients, shadows, neat color schemes,… to satisfy even the most graphic hungry among you.

(3 votes, average: 5 out of 5)

 Loading ...

5 Responses to “Even better looking charts from your data with Fusioncharts”

1. Patrick Kwinten says:
   December 20th, 2007 at 4:40 pm

   I have setup some databases with FusionChart myself, based on Ferdy Christant’s blog article.

   The charts look very nice indeed and easy to implement!

2. Martin Vereecken says:
   December 21st, 2007 at 10:24 am

   Apparently somebody out there already created a demo. It’s hard to come up with something original with all those good bloggers out there :-). But then again, 2 ways of explaining the same thing=more information, somewhat different approach,…

3. BizzyBee’s BizzyThoughts » Blog Archive » Playing Flash movies (like FusionCharts) in the Notes Client? Not that simple… says:
   December 27th, 2007 at 4:32 pm

   […] real purpose then. Until I saw IntelliPRINT’s Dashboard Reporting: they use FusionCharts, the tool I spoke about earlier, to display its amazing charts in the […]

4. dan says:
   November 18th, 2008 at 10:14 pm

   Any easy way to have this pull in categorized data from a notes view….to get the record count by category and then chart that?
   Thanks
   (By easy I am hoping to avoid looping through each document to determine the number in each category)

5. Sankaran says:
   November 23rd, 2008 at 2:48 pm

   Dan - You should try IntelliPRINT Dashboard Reporting

Leave a Reply