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:

Pie 3D chart

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.

Different parts of implementing a chart

  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 ;-))

Column 2D chart

Multiseries column 3D chart

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.

11 Comments

  1. 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!

    Reply
  2. 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,…

    Reply
  3. 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)

    Reply
  4. Dan – You should try IntelliPRINT Dashboard Reporting

    Reply
  5. Do you know how to make this work by passing values in a url and generating xml via an agent? I would like to pass an account number to an agent, and generate the xml on the fly. But the chart.setDataURL parameter isn’t reading anything after the question mark.

    chart.setDataURL(“https://cbsdev.cbservices.org/testPieAgent2.xml?openagent&France=100″);

    If you open the URL itself, you’ll see that it set’s France to 100 in the XML. But it’s not working when in the setDataURL parameter – so I think it’s ignoring everything after the question mark.

    Do you know of any other way to accomplish this?

    Reply
  6. I figured it out – the setDataURL doesn’t like the ‘&’ after the open agent. Use the character code ‘%26′ instead.

    Reply
  7. Great, Jason, I didn’t have to do anything, you figured it out by yourself! :-).

    Thanks for the tip!

    Reply
  8. Hi, i need to do some charts in a application, but i need it works like a server, i put your chart demo in the server where it will work but when the example CHARTS runs get the “Error in loading data”, what can i do?

    Reply
  9. I just ran across the OpenNTF chart app (*) that uses the free version of FusionCharts and was having trouble understanding how to use the DataURL method instead of the agent driven method so your sample db is great. I’m not sure that the Data method turns out to be any better than the Data XML method. When you build the XML string in an agent, the data is sting length limited. If you use views and create the dataULR method, you’re doing a dbColumn to set the ‘XML’data and that is also limited. I don’t know if the DbColumn is bigger than smaller than the xml string limit. In any case, thanks for the example.

    (*) http://www.openntf.org/internal/home.nsf/release.xsp?action=openDocument&documentId=CF77960FE7FF01FF86257584001ABB59

    Reply
  10. Hey there, I think your site might be having browser compatibility issues.
    When I look at your website in Chrome, it looks fine but when opening in Internet Explorer,
    it has some overlapping. I just wanted to give you a quick heads up!
    Other then that, very good blog!

    Reply

Trackbacks/Pingbacks

  1. BizzyBee’s BizzyThoughts » Blog Archive » Playing Flash movies (like FusionCharts) in the Notes Client? Not that simple… - [...] real purpose then. Until I saw IntelliPRINT’s Dashboard Reporting: they use FusionCharts, the tool I spoke about earlier, to …

Leave a Reply to Sankaran Cancel reply

Your email address will not be published. Required fields are marked *

7 + 1 =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>