Good looking charts from your data

UPDATE: I found a tool that produces even better looking results and included a demo database for it. Check out this article.

How many times somebody asked if it is possible to pour some results into a fancy looking chart? Ok, you could create it in some graphic tool or Microsoft Excel, then paste it into your document. But what if you want to use dynamic data, perhaps as a result of some inquiry? As a result of a form that was filled out?

What do you do? Use JavaScript for it? Let some gnomes draw it for you? An applet that takes minutes to load something your son of 5 could have done better?

Or do they look like this?

XML/SWF Chart example

I suppose they don’t (yet). If you’re familiar with Macromedia, sorry, Adobe Flash, you could create something similar, but honestly, how many days will it take to have this kind of image as a result? And when you proudly present it to your customer, he may ask you to make something similar, but “we prefer a pie chart”. You scratch in your hair, then start all over again…

Lately I discovered a very interesting alternative when looking for a solution for this kind of challenge. I found the freeware XML/SWF Charts that creates those kind of stunning charts with nothing but some Flash swf files you can download and an xml-source as feed for the data and looks of the chart. You don’t need any Flash experience, although it might help if you know how to embed a Flashmovie in a html file. A quick remark: the only restriction on the freeware version, is that if you clik the chart, you will be directed to the author’s website. Not convinced yet? Then you should take a look at the gallery to see some great examples.

Got curious? Let’s start!

First download the source files from their website.

Extract the zipfile and place charts.swf and subdirectory charts_library anywhere on your web server. If your webserver is Domino, you could place the files in the file resources of the database you want your charts in, or, even beter, create a database you’ll use exclusively as a source for the chart files.

Now, create an xml-file that will act as data source for the chart and will control the look and feel of it. The best starting point is the gallery of examples; it’s a show off of all types, forms, color combinations of charts, but also the best way to learn-by-example how your xml should be formatted, because if you click a chart in the gallery, the source xml-file is opened.

An example xml-file for this looks like this:

<chart>
  <axis_category size='10' color='FFFFFF' alpha='75'
    skip='0' orientation='diagonal_up' />
  <axis_ticks value_ticks='false' category_ticks='false' />
  <axis_value alpha='0' />
  <chart_border top_thickness='0' bottom_thickness='0'
    left_thickness='0' right_thickness='0' />
  <chart_data>
  <row>
    <null/>
    <string>S</string>
    <string>M</string>
    <string>T</string>
    <string>W</string>
    <string>T</string>
    <string>F</string>
    <string>S</string>
  </row>
  <row>
    <string>Region 1</string>
    <number>70</number>
    <number>60</number>
    <number>11</number>
    <number>15</number>
    <number>20</number>
    <number>22</number>
    <number>21</number>
  </row>
  <row>
    <string>Region 2</string>
    <number>30</number>
    <number>32</number>
    <number>35</number>
    <number>80</number>
    <number>84</number>
    <number>70</number>
    <number>36</number>
  </row>
  </chart_data>
  <chart_grid_h thickness='0' />
  <chart_grid_v thickness='0' />
  <chart_rect x='-70' y='-35' width='500' height='250' positive_alpha='0' />
  <chart_pref rotation_x='20' rotation_y='50' />
  <chart_transition type='slide_left' delay='0' duration='1' order='series' />
  <chart_type>3d column</chart_type>
  <chart_value hide_zero='true' color='000000' alpha='80' size='12' position='cursor'
    prefix='' suffix='' decimals='0' separator='' as_percentage='true' />
  <legend_label layout='horizontal' font='arial' bold='true' size='12' color='000000'
    alpha='50' />
  <legend_rect x='25' y='250' width='350' height='50' margin='20' fill_color='000000'
    fill_alpha='7' line_color='000000' line_alpha='0' line_thickness='0' />
  <legend_transition type='dissolve' delay='0' duration='1' />
  <series_color>
    <color>ff8800</color>
    <color>88ff00</color>
  </series_color>
  <series_gap bar_gap='0' set_gap='20' />
</chart>

XML/SWF Chart example

Note that most of the tags contain values for the design of the char. The data tags are marked in red. You see the datalabels and values for 2 series of data here. If you want to learn more about the different properties a chart can have, take a look at their reference guide. Not only colors can be adjusted, but also effects can be added (so you can let the chart slide in etc.).

Now that we have are data source, you can embed the chart in your html page. This looks like this:

<HTML>
<BODY bgcolor="#FFFFFF">
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
  codebase="http://download.macromedia.com/pub/shockwave/_ cabs/flash/swflash.cab#version=6,0,0,0"
  WIDTH="400"
  HEIGHT="250"
  id="charts"
  ALIGN="">
  <PARAM NAME="movie" VALUE="charts.swf?library_path=charts_library&xml_source=sample.xml">
  <PARAM NAME="quality" VALUE="high">
  <PARAM NAME="bgcolor" VALUE="#666666">
  <EMBED src="charts.swf?library_path=charts_library&xml_source=sample.xml"
    quality="high"
    bgcolor="#666666"
    WIDTH="400"
    HEIGHT="250"
    NAME="charts"
    ALIGN=""
    swLiveConnect="true"
    TYPE="application/x-shockwave-flash"
    PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
  </EMBED>
</OBJECT>
</BODY>
</HTML>  

If you ever added an Flashmovie to a html page, most of it should look very familiar. In this particular case, the following values are important:

  • width en height of the movie
  • the value for movie (Internet Explorer) and the source for embed (Mozilla and friends), where you can discern 3 parts:
    • a pointer to the source charts.swf file (where it can be found on your webserver)
    • a pointer to the library path (normally a subdirectory of the directory that holds your charts.swf file
    • a pointer to the xml file that holds the chartdata.

That’s it! Play around with the different types of charts, juggle with the data, and even make the worst sales results look fantastic!

2 Comments

  1. nice !
    can you use this also in a php project ?

    Reply
  2. If you want that, you can use the php version.

    Reply

Trackbacks/Pingbacks

  1. BizzyBee’s BizzyThoughts » Blog Archive » 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. [...]

Submit a Comment

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

+ 74 = 78

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>