Dynamic XML and flash (swf) charts

Create dynamic xml swf charts for your website or blogBy combining the power of XML and Flash (SWF), you can create great looking and user friendly charts for your website or blog.

XML makes the chart dynamic and easy to maintain and Flash (SWF) enables a feature rich user experience with great interaction possibilities.

A simple dynamic XML and Flash based chart

In this post we’ll look at a freeware solution from XML/SWF Charts. The free version includes almost the full functionality, but fair enough – the support is limited.

To get started you need to download a small package with the necessary files. After you  downloaded the files, the following files should be copied to your web server:

  • charts.swf
  • charts_library
  • AC_RunActiveContent.js
  • sample.html
  • sample.xml

Sample.html is a basic HTML file where a chart is embedded, and sample.xml is a XML file that defines what data to display and how to configure the chart. Please notice that both files needs to be in the same folder on your site as charts.swf and AC_RunActiveContent.js.

The sample.html for a basic chart looks like this:

<HTML>
<head>
<script language="javascript">AC_FL_RunContent = 0;</script>
<script language="javascript"> DetectFlashVer = 0; </script>
<script src="AC_RunActiveContent.js" language="javascript"></script>
<script language="JavaScript" type="text/javascript">
<!--
var requiredMajorVersion = 10;
var requiredMinorVersion = 0;
var requiredRevision = 45;
-->
</script>
</head>
<BODY bgcolor="#FFFFFF">

<script language="JavaScript" type="text/javascript">
<!--
if (AC_FL_RunContent == 0 || DetectFlashVer == 0) {
 alert("This page requires AC_RunActiveContent.js.");
} else {
 var hasRightVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);
 if(hasRightVersion) {
 AC_FL_RunContent(
 'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,45,2',
 'width', '400',
 'height', '250',
 'scale', 'noscale',
 'salign', 'TL',
 'bgcolor', '#ffffff',
 'wmode', 'opaque',
 'movie', 'charts',
 'src', 'charts',
 'FlashVars', 'library_path=charts_library&xml_source=sample.xml',
 'id', 'my_chart',
 'name', 'my_chart',
 'menu', 'true',
 'allowFullScreen', 'true',
 'allowScriptAccess','sameDomain',
 'quality', 'high',
 'align', 'middle',
 'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
 'play', 'true',
 'devicefont', 'false'
 );
 } else {
 var alternateContent = 'This content requires the Adobe Flash Player. '
 + '<u><a href=http://www.macromedia.com/go/getflash/>Get Flash</a></u>.';
 document.write(alternateContent);
 }
}
// -->
</script>
<noscript>
 <P>This content requires JavaScript.</P>
</noscript>
</BODY>
</HTML>

Sample.xml contains the following data:


<chart>
 <chart_data>
 <row>
 <null/>
 <string>2006</string>
 <string>2007</string>
 <string>2008</string>
 <string>2009</string>
 </row>
 <row>
 <string>Region A</string>
 <number>5</number>
 <number>10</number>
 <number>30</number>
 <number>63</number>
 </row>
 <row>
 <string>Region B</string>
 <number>100</number>
 <number>20</number>
 <number>65</number>
 <number>55</number>
 </row>
 <row>
 <string>Region C</string>
 <number>56</number>
 <number>21</number>
 <number>5</number>
 <number>90</number>
 </row>
 </chart_data>
</chart>

The joined effort of these two files is this chart:

simple xml swf dynamic chart

See simple example

A advanced chart

Now we have created a simple dynamic chart.

To illustrate the possibilities and benefits with a dynamic chart, the next example is more sophisticated.

This example features a chart with 3 data sets, mouse over on the data points, animation effect while rendering and really nice layout.

Advanced dynamic swf and xml chart

See advanced example

Conclusion

When you have tried to click a little around on the advanced page – I guess that you agree that a dynamic chart has some very interesting possibilities. Not only from a UI perspective, but also from a maintenance perspective.

You just need to create a script that refreshes the data part of the XML source for the graphs, and then you have nice and fully automatically updated charts for your site.

I have only touched a very small part of the possibilities with this tool. Visit the gallery or reference pages to get the full overview of the possibilities with this tool.

If you’re looking for other alternatives,  Google Chart Tools could also be worth a visit.

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS
fold-left fold-right
About the author
Jørgen Nicolaisen has been passionately interested in everything online since 1995. His experience is based on working with small hobby projects as well as high volume websites. Jørgen is currently focused on the PHP based programming framework - Codeigniter, and WordPress naturally

Comments are closed.