Simple, Flash/XML based, Bar Chart

Greetings ladies and gentlemen,

As we here at DVision Design like to tweak and play with all kinds of things, here’s the latest of our experiments.

Yes, I know that there are ready made solutions available out there, some of them that are nicer, have more features and make you sandwiches, but so it was that I had to create a solution from scratch as the project that needed it didn’t allow the usage of any piece of software that comes from the outside world…Don’t ask.

So what is it?  Basically this flash movie, reads the data from an XML file, and based on what is defined there, renders a number of bars on the screen, thus creating the beautiful Bar Chart that you see below.

Amazing, eh?  Further below you will find the link to the zip file containing all you need to study, use, replicate, and improve the movie. But before you download that file in such large numbers that our server bursts to flames; let me first explain the structure of the XML file and how to properly load the Flash movie.

The XML structure is the following

1
2
3

<bars>
<bar value=”” color=”” name=”” info=”” />
</bars>

Okay, so, what you have to know about the parameters:

• value – numeric and pretty much self-explanatory
• color – the bar color. The value of this attribute must be entered in the form of: 0xRRGGBB. In fact, you can use any HTML color code and just replace # with 0x.
• name – the bar name, it will be printed at the bottom of the bar.
• info – text for the info bubble. Try to keep it short, as the bubble does not auto-size…yet

Seeing that sometimes it is necessary to have more than one movie loaded on the same page, the XML file is passed as an external variable to the movie. Here’s an example:

1

<param name="FlashVars" value="xmlFile=Stats.xml" />

So there you go. Now you have all the necessary information required to implement this movie or to start building your own version based on it.

And by all means, show us your variants, if you end up improving/rebuilding this movie.

Happy coding.


Download link: here

No Comments

No comments yet.

RSS feed for comments on this post.

Sorry, the comment form is closed at this time.