Animating Dashboard Charts with Flash
The previous post detailing a Lotus Notes Dashboard showed some good looking charts and graphs. What the screenshots did not show, however, was the fact that those graphs were animated. Today we give you a flavor of the animation of the graphs, as well as dig into the technology behind the dashboard charts.
The metrics charts were created, we found out, using a charting package called FusionCharts. It’s part of a suite of flash charting components that can be used in ASP, JSP, PHP, HTML and even Microsoft PowerPoint. If you would like to try out the software, InfoSoft Global, the maker, has released a free version called FusionCharts Free.
Here is a screenshot of a mockup of a financial dashboard using bullet graphs and sparklines:
Remember, the above dashboard uses flash to provide some animation. Take a look at the financial flash dashboard demo to see the “eye candy” extras that the animation provides.
Interested in how these flash charts work? Here’s a neat Fusion Charts resource at ronludwig.com that lets you view a Fusion Chart and see the underlying XML:
Here’s a look at the XML for a Donut Chart:
Click on the “more” link to see additional sample flash-based dashboards.
Enlarge the following dashboards by clicking on the images.
Here is a sample business dashboard for monitoring website visitor stats. Visit the demo of this flash dashboard.
Web Analytics Dashboard Mockup with Flash Charts
This next digital dashboard is a mockup of a sales management dashboard.
Enterprise Dashboard for Sales Management
And, of course, a set of demo dashboards isn’t complete with the time-honored airline management dashboard mockup. See the demo of the airline dashboard here.
Mockup of an Airline Management Dashboard
If you haven’t seen these classic airline executive dashboards, here are some links to browse:
Airline Dashboard Contest (2006 Data Visualization Contest)
Dundas Airline Operations Dashboard
MIT Studies Airline Operations KPIs
Related Business Intelligence Dashboard Examples:
I've written before about the great executive dashboard design team at Dundas a provider of char ...
When Dashboard Spy reader Jonathan Nell said that the dashboard screenshot he just sent over was ...
A couple of posts ago, Dashboard Spy readers debated the definition of a dashboard. Some stated ...
If “animation” only means slick effects showing the graphics being constructed, then it is a waste of resources and of the user’s time. What is not needed in a good dashboard is animation. The graphics should appear in their final state when they appear.
What a good dashboard could use instead of animation is interaction. This may mean the ability to drill down on a chart to see further information, or the ability to change some inputs to see effects on predicted behavior.
If the animation shows the user how conditions or performance has changed over time, and it is done cleanly, with controls that allow the user to stop and start the animation, and look at any state during the process, then it is a worthwhile animation.
I couple of things I liked in the animations:
1) Hover over display of the actual values.
2) Movement of pie chart slices (they slide out)
3) All in all – pretty restrained and not over the top.
4) Drill down/Javascript controls
[...] Dashboard Spy wrote about Animating Dashboard Charts with Flash on the Dashboards by Example blog. The examples in the Spy’s post were taken from our friends [...]
Ditto Jon’s second point. I love these as they allow an extra dimension, but the one that makes most sense is time.
I appreciate there are drawbacks (especially if you want to print them!) but even so, for interactive usage they can be great if designed to be clear and not to mislead.
I’ve used these charts. Both the free version and the lastest widgets. I like them. What you do with them on your dashboards and in your apps is up to you.
Choose the 2D charts if you think the 3D sizzle is just too much.