Smashing Magazine we smash you with the information that will make your life easier. really.
Attractive Online Diagrams, Charts And Maps
September 20th, 2007 in Developer's Toolbox | 37 Comments
Data charts and diagrams are used when statistical data has to be presented in the most convenient and usable way. Visual charts are clear, visually appealing and easier to perceive than some simple enumerations or tables - mainly because users don’t have to analyze the meaning of presented facts, but can perceive main tendencies through the visual weight of the facts — directly.
You can create charts in graphic editors or use special applications (software or web-apps) which can help you to create your charts in few minutes. However, once you’d like to update an old chart, or create a new one, you have to run the application and create new images over and over again. That’s not flexible. Or maybe you just want to offer your visitors not a simple image, but a powerful dynamic chart.
amCharts: Flexible and Dynamic Solution
To gain a greater level of flexibility you need to take a closer look at further approaches. One of them could be a flash-based solution which loads the data from server — from a config-text file. And this is exactly what amCharts offers. There are 4 sets with predefined Pie & Donut, Line & Area, Column & Bar and Scatter & Bubble. Generated Flash-files are dynamic and can be presented in 2D or 3D.
The loader can load data from XML or CSV (coma separated values text file), this means you can easily export data from Excel, dynamically generate data file with PHP, ASP, .NET or other programming language. Some flash-charts also have animation effects (bounce effect, growing effect) and offer users a possibility to export the chart as an image. You can also choose font and text sizes for all texts, specify the colors and define roll-over indicator’s color, transparency and text color.
Data sets and configuration can be changed in a simple text-file. You can download and use amCharts for free. The only limitation of free version is that a small link to this web site will be displayed in top left corner of your charts. If you’d like to be able to use the tool without a backlink you can buy a single site license for 85 Euros (~$117).
The developer of the tool, Antanas Marcelionis, also offers a customizable flash-based solution for interactive maps, amMap: same conditions, same level of flexibility. In both cases you can start to create your own charts and maps right away - the documentation is well-structured and easy-to-use.
Leave a Reply
Sponsors
- Advertise with us!
Smashing Links
Popular Posts
- 100 Wordpress Themes
- 83 Wordpress Themes
- 80 AJAX Solutions
- 53 CSS Techniques
- 50 Beautiful Designs
- 50 Simple Designs
- 45 Fresh Designs
- 30 Dark Designs
- 45 Blog Designs
- 65 Flash Designs
- Brilliant Wallpapers
- Brilliant HDR Pictures
- Brilliant Photos
- Free Design Templates
- Free CSS Layouts
- Free Icon Sets
- Free High-Quality Fonts
- Slideshows & Lightboxes
- Adobe Photoshop Tutorials
- Adobe Illustrator Tutorials
All Posts
- 404 Error Pages
- AJAX Libraries
- AJAX Solutions
- Blog Designs
- Blog Headers
- Book Covers
- Browsers Round-Up
- Browser Test Suites
- Buzz-Monitoring
- Charts and Diagrams: Tools
- Cheat Sheets
- Code Beautifier
- Copyright Explained
- CSS Coding Techniques
- CSS Designs 1, 2, 3, 4, 5
- CSS Expert Ideas
- CSS Float Theory
- CSS Frameworks
- CSS Free Templates
- CSS Footers
- CSS Forms 1, 2
- CSS Frameworks
- CSS Galleries
- CSS Ideas
- CSS Layouts
- CSS Menus
- CSS Print-Layouts
- CSS Specificity
- CSS Styleguides
- CSS Tables
- CSS Tutorials
- CSS-Techniques
- CSS Tools
- Data Grids and Tables
- Data Visualization 1, 2
- Date Stamps
- Design Books 1, 2
- Design Magazines
- Designer's Checkpoints
- Domain Tools
- Dreamweaver Tutorials
- E-Mail Delivery
- Favicons 1, 2, 3, 4, 5, 6
- Firefox Themes
- Fireworks Tutorials
- Flash Designs
- Flash Slideshows
- Flash Tutorials
- Fonts 1, 2, 3, 4
- Forums
- Gadgets 1, 2, 3
- Google AdSense
- Google PageRank
- Graphics Design
- Grid-Based Design 1, 2
- Grunge Design 1, 2
- Hand-Drawing Design
- Handwriting and Lettering
- Hotkeys
- HDR Pictures
- HTML Template Systems
- Icon Sets 1, 2, 3, 4
- Icons, Templates 1, 2, 3
- Illustrator Tutorials 1, 2
- Laptop Sleeves
- Laptop Designs
- Link Building
- Mascots
- Motion Graphics
- Music Videos
- Navigation Menus
- Newspaper Designs
- Online Converters
- Online Generators
- Pagination
- PDF Magazines
- Photoshop Tutorials 1, 2
- Pixel art
- PNG Transparency
- Portfolios
- RSS Best Design Practices
- RSS Icons
- Screensavers
- SEO Tools
- Shopping Carts
- Short Movies
- Slideshows & Lightboxes
- Splash Pages
- Start Pages
- Stock Icons
- Tab-Based Interfaces
- Tag Clouds
- Textures & Backgrounds
- Tooltips Scripts
- Tutorials
- Typefaces 1, 2
- Type Setting Principles
- Typographic Posters
- Typography In Motion
- Typography Showcase
- Usability Books
- Usability Glossary
- Usability Nightmares
- Usability Principles
- User Interfaces
- Vintage and Retro
- Wallpapers 1, 2, 3, 4
- Web 2.0 Tutorials
- Web Profis Ideas 1, 2
- Whitespace & Simplicity
- Wordpress Plugins
- Wordpress Themes 1, 2, 3, 4
Webtips
Sideblog
Ross Johnson discusses 8 forgotten fonts you may use in CSS. Among them are Palatino Linotype, Century Gothic, Copperplate and Gill Sans — apparently, these fonts are installed on a variety of operating systems.
How creative can a table of contents be? Designobserver presents Thirty Tables of Contents. The collection includes excerpts from the books by Philip Larkin, Philip Roth, Paul Rand and Jan Tschichold.
A set of 18 splendid and colorful looking 3D RSS-Icons. They are done with 3d Studio Max. JPG.
In Font Clock 12 different fonts are printed within the mechanism of a clock, providing a random, mixed display of graphic language within a single time piece. Designed by Sebastian Wrong.
One pixel notched corners as used by Google Analytics. Instead of each option being boxed in a clickable rectangle, there is a 1px notch in each corner. It's not necessarily a curved corner, but it is a little softer than a normal box. Nice little trick.
Hartija is a CSS print framework which is an attempt to unite best CSS printing practices into one single CSS-file.
Rather than standard website templates, a free admin template is nearly impossible to find. This is an admin template which you can use for web applications like online-shops or CMS.
Fully Personal Interface research is a survey where people are questioned about their interface preferences. Results: labels and icons should be placed on the left, horizontal menus are more popular than vertical ones.
Kostas J. (September 20th, 2007, 12:57 am)
Oh wow, it’s good to find a good product developed by a Lithuanian!
Taip ir toliau!
Evangelist (September 20th, 2007, 1:00 am)
Am liking the look of amcharts I must say…great heads-up article, thanks :)
Vlad Gerasimov (September 20th, 2007, 1:28 am)
It looks to me like Link [www.anychart.com] offers nice charts too. Just my 5 cents!
James D. (September 20th, 2007, 1:42 am)
Thank you for your article! it looks like interesting tool.
We’re using similar solution for charting - AnyChart
Link [www.anychart.com]
I don’t know what is better, but we’ll test this one. Thanks again! Good article!
Stephen (September 20th, 2007, 1:56 am)
We use xml/swf charts at my office:
Link [www.maani.us]
The single site license is a bit cheaper, but you lose some of the slick animations.
brilliance (September 20th, 2007, 1:57 am)
“Naked girls there” Rotfl.
Good article, as usual :)
umb (September 20th, 2007, 2:16 am)
that’s so cool!
Jaxter (September 20th, 2007, 2:48 am)
Coo,l regards from Latvia , Lithuanian brothers do well :)
Scott (September 20th, 2007, 2:50 am)
There are a lot of for-pay graphing/charting/mapping scripts like this. Where is the giant best-of-the-best list that you normally compile? Is this a review or a commercial?
Vitaly Friedman & Sven Lennartz (September 20th, 2007, 4:40 am)
@Scott: we would never offer our readers “paid” content. amCharts is free. Best-of-the-best? They are coming. ;) Stay tuned. :-)
Ben Bodien (September 20th, 2007, 5:13 am)
3D Pie charts? Background images? Tufte would do his nut! These are certainly “pretty”, but please don’t bring up ease of perception without understanding the basic concepts of good data vis design.
Mega Man (September 20th, 2007, 5:40 am)
Nice world charts there, and they’re easy to customize.
Kenneth Dreyer (September 20th, 2007, 6:24 am)
I really loved the chart with the worldmap in the background! And I know just where to use it in my personal stats. Thanks for another great post!
HowToWriteGuy (September 20th, 2007, 8:22 am)
Great post. I usually mock up 3D pie charts and bar charts in Blender, which works fine.
Of course, I also have to remember to define what the wedges mean or the damn thing’s useless.
Ben (September 20th, 2007, 9:03 am)
What is the deal with the “Naked girls here” nav item on the amMap screenshot? Surely that’s just part of that particular site where the amMap is used yeah?
Rian (September 20th, 2007, 12:01 pm)
I have to agree with Ben Bodien’s comment. 3D Pie & Donut charts might look cool, but they’re actually really hard to read. In fact, it probably obscures the data more than it highlights it. For example, in the chart at the top, can anyone tell me how much bigger France is than Canada? People are not good at judging the sizes of areas — so in most cases a simple bar chart is a much better visualization technique than a Pie Chart. Why the different colors? Why the hole in the middle? In my opinion that only distracts from the data…
James D. (September 20th, 2007, 12:08 pm)
I tested amCharts - their maps are really easy to use, but for charts I prefer AnyChart - much better architecture and design. Link [www.anychart.com]
Inwit (September 20th, 2007, 4:19 pm)
You may laugh at me now, but although the following site was designed for kids it creates easily great looking charts. And when I need a diagram for my blog, this is the first choice:
Link [nces.ed.gov]
Vitaly Friedman & Sven Lennartz (September 20th, 2007, 5:17 pm)
@Ben: the screenshot has been taken from Link [www.ammap.com] example.
jon (September 20th, 2007, 5:59 pm)
Great stuff.
There is a good free map builder for powerpoint with some nice graphics at Link [www.presentationhelper.co.uk]
I think it only has europe at the moment though.
Christian Watson (September 20th, 2007, 8:26 pm)
I’ve used FusionCharts for a while and have been very happy with their product, which I Link [www.smileycat.com].
David Bloomfield (September 20th, 2007, 10:31 pm)
Nice article. I’m working on a mapping project for a council at the moment. So good inspiration here
Julius (September 21st, 2007, 3:51 am)
* This chart package only works well with data at regular intervals — which is too bad because otherwise I would have bought it already. (I deal with data that comes in at irregular intervals.)
* The animations — please don’t use these people. Just show your users the data, there’s no reason to have the data swoop in from all angles.
* The backgrounds, overlays, yaddy, yaddy, yadda… please use only when necessary. And why would any chart need a globe behind it? It reeks of corny 90s corporate websites… (”WE WILL RULE EARTH! See, the globe is already in the background on our website and stuff.”)
raimondas (September 21st, 2007, 1:27 pm)
Lovely work. Places Lithuania on the map. It’s now like a matter of pride to use amCharts in every project possible :) Keep it real!
Ziggy101 (September 21st, 2007, 6:58 pm)
Now if I was only smart enough to know how to put these in a lightbox.
jibijibi (October 3rd, 2007, 1:15 am)
you can’t print flash charts. You can’t save it and put it into a document. I think when flash charts can be printed and saved as an image, then I think they can be in the same plain fields as other server based charts.
Daniel (October 12th, 2007, 8:34 pm)
You can print Flash-Content - definitely. Take a look at the PrintJob-Object in ActionScript ;)