Attractive Online Diagrams, Charts And Maps

Advertisement

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 editors1 or use special applications2 (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

amCharts3

amCharts4

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 amCharts5 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.

amCharts6

amCharts7

amCharts8

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, amMap9: 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.

amMap10

Footnotes

  1. 1 http://www.bartelme.at/journal/archive/creating_graphs_part_2
  2. 2 http://www.smashingmagazine.com/2006/09/01/list-of-nifty-tools-diagrams-charts/
  3. 3 http://www.amcharts.com/
  4. 4 http://www.amcharts.com/
  5. 5 http://www.amcharts.com/
  6. 6 http://www.amcharts.com/
  7. 7 http://www.amcharts.com/
  8. 8 http://www.amcharts.com/
  9. 9 http://www.ammap.com
  10. 10 http://www.ammap.com/

↑ Back to topShare on Twitter

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs responsive Web design workshops, online workshops and loves solving complex performance problems in large companies. Get in touch.

Advertising
  1. 1

    Oh wow, it’s good to find a good product developed by a Lithuanian!
    Taip ir toliau!

    0
  2. 2

    Am liking the look of amcharts I must say…great heads-up article, thanks :)

    0
  3. 3

    It looks to me like http://www.anychart.com offers nice charts too. Just my 5 cents!

    0
  4. 4

    Thank you for your article! it looks like interesting tool.

    We’re using similar solution for charting – AnyChart
    http://www.anychart.com/products/anychart/overview/

    I don’t know what is better, but we’ll test this one. Thanks again! Good article!

    0
  5. 5

    We use xml/swf charts at my office:
    http://www.maani.us/xml_charts/

    The single site license is a bit cheaper, but you lose some of the slick animations.

    0
  6. 6

    “Naked girls there” Rotfl.
    Good article, as usual :)

    0
  7. 7

    that’s so cool!

    0
  8. 8

    Coo,l regards from Latvia , Lithuanian brothers do well :)

    1
  9. 9

    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?

    1
  10. 10

    Vitaly Friedman & Sven Lennartz

    September 20, 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. :-)

    0
  11. 11

    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.

    0
  12. 12

    Nice world charts there, and they’re easy to customize.

    0
  13. 13

    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!

    0
  14. 14

    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.

    0
  15. 15

    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?

    0
  16. 16

    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…

    0
  17. 17

    I tested amCharts – their maps are really easy to use, but for charts I prefer AnyChart – much better architecture and design. http://www.anychart.com

    0
  18. 18

    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:

    http://nces.ed.gov/nceskids/createagraph/

    0
  19. 19

    Vitaly Friedman & Sven Lennartz

    September 20, 2007 5:17 pm

    @Ben: the screenshot has been taken from this example.

    0
  20. 20

    Great stuff.

    There is a good free map builder for powerpoint with some nice graphics at http://www.presentationhelper.co.uk/free-powerpoint-maps-12.htm
    I think it only has europe at the moment though.

    1
  21. 21

    I’ve used FusionCharts for a while and have been very happy with their product, which I reviewed on my site.

    0
  22. 22

    Nice article. I’m working on a mapping project for a council at the moment. So good inspiration here

    0
  23. 23

    * 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.”)

    0
  24. 24

    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!

    0
  25. 25

    Now if I was only smart enough to know how to put these in a lightbox.

    0
  26. 26

    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.

    0
  27. 27

    You can print Flash-Content – definitely. Take a look at the PrintJob-Object in ActionScript ;)

    0
  28. 28

    Not long ago found Origramy flash component It uses XML. Seems to be great for diagram building.

    1
  29. 29

    amazing work
    i’d like to know whether that is made by flash or not?

    0
  30. 30

    amcharts now has visual editor which makes the setup even more easy:
    http://extra.amcharts.com/editor/
    None of the competitors has this.

    0
  31. 31

    Internetová agentúra

    April 6, 2009 2:23 am

    Nice!

    0
  32. 32

    HI,
    Nice to see this !!!!
    I want to see a demo about how to use this in presentation.
    But I do not have enough knowledge about this kind of software.
    I need to know more about this, can i have your details??

    U can mail me in my ID.
    Awaiting for your reply.

    Mahabir.
    Mumabi, India.

    0
  33. 33

    nice chart by antanas!

    0
  34. 34

    amMap indeed is a great tool. But the documentation is not all that great frankly. It’s hard to find detailed explanations for certain functionalities.

    0
  35. 35

    Hi, very nice tool!!
    There are good interactive maps for flash with nice graphics at http://www.graphic-flash-sources.com
    with many important countries.

    0
  36. 36

    +1. Thanks. And one more bunch of programs for creating online charts, diagrams and maps at http://origramy.com/

    2
  37. 37

    To be more precise, there is a free online diagram and graphs building service – http://my.origramy.com/index.html

    1
  38. 38

    Awesome stuff. When drawing u should stick to some best practices as shown here – http://creately.com/blog/diagrams/5-ways-how-shapes-contribute-to-exceptional-diagramming/ It’s an interesting series that all serious diagrammers should look into.

    0
  39. 39

    I am currently trying to find a good charting solution for dynamic data. I started with AnyChart and found it to be very nice, albeit expensive.

    Then I found amCharts and was excited because it’s powerful, free (if you don’t mind the little link), and the visual editor was impressive. However, after I attempted to do my proof of concept with real data, I was very disappointed. As mentioned before, it doesn’t handle irregular data well. It also doesn’t handle large amounts of data well. It just shows up as a big mess. There is also the matter of how it forces you to format the data. On a line chart, the X-axis values are stored in the <series> tags while each set of Y values for a multi-curve chart are stored in separate <graph> tags. Then you are supposed to map these two data sets with an id number. It is completely unintuitive.

    0

↑ Back to top