Charts And Graphs: Modern Solutions


Charts are supposed to visualize data in order to give a more profound understanding of the nature of a given problem or recent developments. Whatever type of data presentation you prefer (pie charts, bubble charts, bar graphs, network diagrams etc.), you can create charts in graphic editors manually or use special desktop-software instead. In both cases you have a major problem: 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. That’s also not usable — e.g. if you’d like to update your chart live.

Server-based solutions, implemented with Flash, JavaScript or pure CSS, offer a more flexible alternative. In fact, since Flash offers significant advantages over static data presentation with CSS and JavaScript, most solutions use it for dynamic data visualization. The data itself is often stored in XML-files which are loaded and updated via PHP or ASP. The price range varies enormously — depending on the flexibility and level of customization you’d like to have. However, if you don’t want to pay, you don’t have to — there are powerful free solutions as well.

If you use Ajax- or JavaScript-frameworks you might already have powerful chart components integrated into the library by default. If it’s not the case, you might try to search for existing add-ons. E.g. there are extensions for jQuery and Dojo1 you can use to generate and style your own charts with few lines of JavaScript and CSS.

Chart Demo Screenshot2
The Dojo Charting Engine3 can generate graphs and charts with few JavaScript snippets4.

Many server-based solutions are quite versatile, so you can use them to create a variety of charts and graphs in minutes. However, to use these tools you need to know where to find them.

This article presents an overview of tools, applications and techniques for visualizing data in charts and graphs. Among other things both free and commercial chart tools, services, desktop-applications and web-based solutions (Flash, JavaScript, CSS) — you can use them on your server — are presented.

Please notice that the solutions listed below don’t necessarily produce charts which serve the main purpose of data visualization — namely, to provide an easy-to-use visual presentation of (possibly) complex data sets. It’s far more important that the presented information is usable and comprehensible rather than presented in a visually appealing way. Outstanding data visualizations aren’t achieved by the beauty of data presentation, but by an effective interpretation of the data it represents.

Charts and Graphs: Flash-based Solutions

FusionCharts Free5
FusionCharts Free is a Flash charting component that can be used to render data-driven & animated charts for web applications and presentations. It is a cross-browser and cross-platform solution that can be used with ASP.NET, ASP, PHP, JSP, ColdFusion, Ruby on Rails, simple HTML pages or PowerPoint Presentations to deliver interactive and powerful flash charts.

You can generate 2D/3D Column Charts, Line Charts, 2D/3D Pie & Doughnut Charts, Area Charts, Stacked Charts, Combination Charts and Candlestick Charts. The data is stored in XML. The full version of the application has more animated charts, visual effects (shadow, glow etc.) as well as a Visual XML Generator Utility. You don’t need to know anything about Flash to use FusionCharts. All you need to know is the language you’re programming in. Free version provides a high level of flexibility and dozens of impressive designs.

Chart Demo Screenshot6

Chart Demo Screenshot7

amCharts offers a flexible and easily customizable solution for generating charts “on the fly”. 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, so 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.

amCharts is linkware which means that you have to place a link to the source if you’d like to use it for free. You can also purchase a single site license for 85 Euros (~$117). We’ve already reviewed amCharts previously9.

Chart Demo Screenshot10

Chart Demo Screenshot11

Chart Demo Screenshot12

AnyChart Flash Chart Component13
AnyChart is a more powerful alternative to Open Flash Chart. It is fully cross-browser and cross-platform and can generate Pie, Bar, Line, Candlestick, Area, Column, Bubble, Spline, Dot/Marker, Scatter, Candlestick and Doughnut charts. It can be used with virtually all scripting languages — ASP.NET, ASP, PHP, JSP, ColdFusion, Ruby on Rails, simple HTML pages and also PowerPoint presentations.

AnyCharts is driven by XML as universal data interface, so you can visualize data from any data format: from files in text, Excel, CSV formats to MySQL, MS SQL, and Oracle database servers. Users can save the generated charts as an image for email sending or chart export. AnyChart is huge, but not that inexpensive – a one developer licence starts at $649.00.

Chart Demo Screenshot14


Chart Demo Screenshot16

Rich Chart Server for .NET17
Rich Chart Server generates captivating interactive Flash charts from ASP.NET and Windows Forms applications. Rich Chart Server uses flexible templates to integrate dynamic content from a variety of data sources. Price $295.

Chart Demo Screenshot18

Flash Charts Pro19
Flash Carts Pro — ASP Chart and PHP Flash Charting tool — comes with 9 main categories and more than 30 chart types. No installation is required. Upload the Flash file and generate a list of ingoing values – or use a script. Customization is possible via the XML file itself. The tool offers multi-lingual (UTF-8) characters support, customizable animation, grid component and dynamically resizable charts. The price range starts at $59. Unfortunately there is no trial-version.

Chart Demo Screenshot20

Chart Demo Screenshot21

Swiff Chart Generator22
Swiff Chart Generator is the server-side solution to dynamically serve eye-catching animated charts from Active Server Pages (ASP), PHP scripts or JSP scripts. Query data from a database, apply your own style template created with the Swiff Chart authoring tool and Swiff Chart Generator instantly generates high-impact charts in Flash format, PNG/JPG format, SVG format and PDF format. Use Swiff Point Player to incorporate your Flash Charts into your PowerPoint presentations. Pricing starts at $149.

Chart Demo Screenshot23

XML/SWF Charts24
PHP/SWF Charts offers a simple and dynamic solution for interactive Flash-based charts. Columns, circles, bars and pies can be displayed in 3D. You create an XML source to describe a chart, then pass it to this tool’s flash file to generate the chart. The XML source can be prepared manually, or generated dynamically using any scripting language (PHP, ASP, CFML, Perl, etc.).

The script requires only PHP 4 support; it is free, however all charts are by default linked to the source — unless you’ve purchased a license.

Chart Demo Screenshot25

Chart Demo Screenshot26

Open Flash Chart (OFC)27
OFC is an open-source project. The Flash chart offers 35 chart variations; among them a number of bar charts, pie charts and line charts. Provided tutorials explain how the script can be extended with further functionality such as mouse-over effects and how the database can be queried for some values and the results then displayed in a graph. Open Flash Chart uses Flash and PHP; data can be stored in plain text (.txt). The package, available via Sourceforge, includes a number of examples and samples.

Chart Demo Screenshot28

Chart Demo Screenshot29

Charts and Graphs: PHP/ASP Libraries

Libchart is is a simple PHP-library. You can create Line-, Bar- (horizontal and vertical) and Piecharts. The tool requires PHP compiled with GD Graphics Library and FreeType. Libchart is a free software distributed under the terms of the GNU General Public License (GPL).

Chart Demo Screenshot31

Image_Graph (formerly known as GraPHPite) utilizes PHP’s object oriented model to enable users/developers to create highly versatile graphs in a simple way. There are 14 highly customizable chart types including line, bar, area, pie, impulse, dot/scatter, step, candlestick, box & whisker, radar, etc.

The free script requires PHP4 or PHP5 support with GD 2 support for optimal performance and PEAR package, including Image_Color and Image_Canvas package. The site offers over 80 samples of how the tool can be used.

Chart Demo Screenshot33

Chart Demo Screenshot34

JpGraph is a Object-Oriented Graph creating library for PHP. The library is completely written in PHP and can be used in any PHP scripts. The library can be used to create numerous types of graphs either on-line or written to a file. Line plots, filled line plots, step line plots, bar and pie charts, ring and scatter plots, polar and canvas plots as well as Gantt Charts. The designs of charts aren’t that impressive, but they don’t have to.

Chart Demo Screenshot36

.netCHARTING utilizes the .NET framework and GDI+ providing a managed charting solution for C# and VB.NET developers working with ASP.NET or WinForms. The tool offers a huge choice of available charts. In most cases 2D and 3D-views are available. Price range starts at $395 for a single site license.

Chart Demo Screenshot38

Chart Demo Screenshot39

Charts and Graphs: JavaScript-based solutions

Emprise JavaScript Charts40
Emprise JavaScript Charts is done in pure JavaScript — no Flash support is required. The script includes features such as hints, mouse tracking, mouse events, key tracking and events, zooming, scrolling, and crosshairs which might raise interactivity and user experience. EJSChart supports XML-formatted data.

Every aspect of the charting display can be configured and customized through well-documented properties and methods. An interesting solution, offering a number of designs and behaviours. Pricing starts at $100.00. There is a watermarked private version available for free.

Chart Demo Screenshot41

PlotKit – Javascript Chart Plotting42
PlotKit is an experimental JavaScript-based chart and graph plotting library. It has support for HTML Canvas and SVG via Adobe SVG Viewer as well as native browser support. The script requires MochiKit JavaScript library43, version 1.3 or higher. Released under the BSD License.

Chart Demo Screenshot44

This lightweight charting framework based on PlotKit draws simple charts. It’s free, and there is no use of Flash. There are also no interactive elements, however you don’t always need them.

Chart Demo Screenshot46

Chart Demo Screenshot47

CSS-based Solutions

An overview of techniques and ideas to create simple charts with CSS and (X)HTML. These solutions provide easy methods to generate static charts and style them; however, they can’t compete with the interactivity Flash offers.

Related Articles

Online Services and Generators

To create charts you don’t need installation or software. Of course, you can get things done online — with charts and graphs generators. The fact that charts aren’t that simple to deal with is realized once you have to input all the data manually. Be prepared: to get the final results you might need dozens of clicks and web forms to input your data.

  • Rich Chart Live74
    Rich Chart live offers a number of templates and styles. The image below shows the “watercolor pie”-style. Output: Flash-, PowerPoint or image you can insert in your weblog instantly.

    Chart Demo Screenshot75

  • FusionCharts Google Gadget76
    The online-version of Fusioncharts.

    Chart Demo Screenshot77

  • Create a Graph78
    Supposed to be used by kids, this tool offers a variety of different charts which can be generated once the data is provided. Flash is required.

    Chart Demo Screenshot79

Free Software and Commercial Solutions

You can find an overview of popular charts-related applications in our article Diagrams: Tools and Tutorials80. Among other things we’ve covered DIA81, JFreeChart82, Omnigraffle83 and Microsoft Visio84.

↑ 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 and loves solving complex problems in large companies. Get in touch.

  1. 1

    Impressive and useful as always, thanks!

  2. 2

    Great resource of different useful styles of displaying information! Thanks again for the great read.

  3. 3

    Is that a complement of a previous article ?
    Last time I discovered AMMAP and it was perfect for my applications.

  4. 4

    Interesting would be to measure the effects of the different styles of charts and graphs.

  5. 5

    Great list. I’m going to have to try out some of the options I haven’t seen before.
    Also, here’s another one that I use quite frequently in print work, that has a php library for online:


  6. 6

    At the end of the month, we will be releasing a free, open source, version of Chronoscope, a pure-clientside Javascript charting component written using Google Web Toolkit that is specifically designed to support very large datasets (tens of thousands to millions of points).

    See a demo here:

  7. 7

    I usually go simply with Libchart and it always worked well. However, I see that flash charts are getting more and more popular, thus maybe I should indeed consider using something more advanced. Thanks for the links!

  8. 8

    Great, really useful as always.

    I’m a user of FusionCharts Free, just for keeping ontop of sales charts.

  9. 9

    Excellent selection. Awesome job as always, you guys are my new heroes.

  10. 10

    Very nice article, it’s always hard to find a good chart/graph solution for implementation website, thanks for the references.

  11. 11

    great collection

  12. 12

    Fantastic stuff – now these WILL come in handy. Once again, you did it :)

  13. 13

    Thanks for the analyze and the agglomeration work ! I was looking it.

  14. 14

    As more people develop their coding skills and produce online content they will be using these reporting tools more and more often. Smahing list! Thanks!

  15. 15

    I’ve used fusioncharts before and it’s pretty damn sleek… wish they had an option for outputting as a straight image file though

  16. 16

    I am really troubled to see more an more articles like this. Most of these tools create pretty flashy charts, that’s for sure, but they don’t teach anyone how to visualize data properly. Why would you ever need a donut chart or a 3D stacked cilinder chart? What does that add to the data that a simple 2D bar chart can’t show you? There is so much of what Edward Tufte refers to as “non-data ink” on these charts that it just smothers the “data ink” completely.

    We need to teach analysts the techniques to use simple and straight-forward charts to let the data shine through. All these different primary colors and 3D stuff have nothing to do with the data. Check out the work of Edward Tufte and Stephen Few for some good visualization principles…

  17. 17

    Thanks for the great article, didn’t know there were so many different types of charting out there! I will have to check some of them out.

    Last time I used the FusionCharts Free version you couldn’t create links within the chart, all clicks on the chart went to the FusionCharts website. I bought a license so I could let the client drill down into the data, made it much more interactive.

    @Rian – unfortunately charts are often created for management who like them to look “pretty”. I often wonder how many of the reports we are made to generate ever actual have the data on them read. It’s all about the look of it.

  18. 18

    it’s just amazing!
    great collection!

  19. 19

    Awesome, awesome, awesome.


  20. 20

    No mention of ploticus? Been using it for years at work and it drives hundreds of internal dashboards for us. Great program and very active author.

    Maybe not as “pretty” as these but way easy to use and tons of options and chart types.

  21. 21

    One that wasn’t mentioned is an open source Ajax widget being developed at MIT that I use called Timeplot/Timeline works very well but currently lacks IE support

  22. 22

    As Always you’ve smashed us with useful information once again

  23. 23

    Dundas Charts is handy to use for all of you dot net people. It’s a bit exy, but the support is excellent, and the graphing output is 1st rate. Multiple output formats (Flash, PNG, etc) make it suitable for lots of purposes, although I tend to only use the PNG output. You can also link parts of your charts so you can easily provide drilldowns into data.

    Cheers! Good article.

  24. 24

    Great resource, YAHOO flash library (ATLAS) also provides a chart engine.

  25. 25

    Fantastic roundup, as always guys – well done!

    Just a note – PHP/SWF and XML/SWF charts are two separate products, differentiated by the data input method.

  26. 26

    Worth pointing out that ColdFusion has charting functions built in.

  27. 27

    Great collection.. nice!!

  28. 28

    Plot-O-Matic is a scientific graphing web application that would fit well under your ‘online services and generators’ section. If does things that scientists need like curve fitting and error bars, but you don’t need to use them and it allows you to link to your graphs from any web-page.

  29. 29

    ComponentArt has a top-notch charting engine.

  30. 30

    Dear Smashing Magazine, please stop writing articles.

    I would like to get some work done.



  31. 31

    i prefer amcharts

  32. 32

    I use Open Flash Chart over at Compare Sat Nav and it works very well. It was easy to set up and looks great.

    An example chart can be found here

  33. 33

    PHP/SWF Charts really looks awesome! Thanks

  34. 34

    Alessio Michelini

    October 22, 2007 6:41 pm

    Great article! I’ve just thinked how to represent statics information on my cms, and here i found the solution!

  35. 35

    I did a pretty broad search for plotting tools about 6 months ago, and came across pretty much all of the ones mentioned in the article (although not all the ones mentioned in comments – I’ll take a look at those). The only tool I found that could alternate between log and linear plots for both axes (a specific need, but it might be common within scientific fields) was not mentioned in this list – Adobe’s Flex Charting, a Flex Builder plug-in.

  36. 36

    great, very good that you collected lots of variations to display – thanks

  37. 37

    I’ve been using Illustrator to design charts for nearly 10 years…it’s amazing what you can do with Photoshop too. Good to see it here. My tip? Always save the working files :o)

  38. 38

    Agust Gudbjornsson

    October 31, 2007 6:47 am

    Great post, thanks for the gathering!

  39. 39

    It seems that Rian (comment 16) was the only reader not blinded by the special effects, the shiny reflective surfaces, the shadows and false depth effects, and the overwhelming explosions of color. At best these special effects can only detract from the data, and at worst they can completely overwhelm and befuddle the poor sap who is charged with interpreting the chart.

    It seems these fancy programs emphasize the ability to create amazing technicolor displays, and not the keep-it-simple credo of effective visualization.

  40. 40

    I see some of the most interesting new appraches to dynamic, scalable, charts for the web is the Canvas HTML Element.

    John Resig (creator of jQuery) has some cool videos of interactive charts in action using the Canvas HTML Element.

    I think we’ll see the JavaScript libraries adding in support for these types of features via plugins in the near feature.

    vector scalable, cross-browser, dynamic charts, without flash… Awesome!

  41. 41

    hey guys, take a look on this it is an amazing charting controller powered with silverlight

  42. 42

    Hey guys Chk this out an amazing chart controller “visifire” powered by silverlight

  43. 43

    Thanks for a very informative post. However, you neglected to include pChart, an Open Source php class to build charts.

  44. 44

    I’m looking for a flash chart solution which can update bar charts in real time so that they are moving onscreen as data changes. Does anyone know of such a solution?

    Many Thanks

  45. 45
  46. 46

    Wow! That’s an amazing list! Thank you! Maybe I will even try something new though I like Origramy flash component [] very much for it functionality and easy-to-use.

  47. 47
  48. 48

    göğüs büyütücü

    December 3, 2008 6:16 am

    thanks for sharing..

  49. 49

    Great post! I’ve tried all the solutions described here and none of them fits me for one reason or another. Does anyone knows of a free or commercial soution for representing a line with the following features?


    Our application will mainly make use of the line chart.
    It will display temperature values against a time scale (for the future we would like flexibility in the x-axis data format).
    Multiple graphs will be displayed in one canvas (maximum of  50).
    Maximum data displayed in each graph of 106.000 points.
    Data will be read from an XML file.
    It will be displayed in a JavaServer Faces environment and we use rich facelets components.


    Automatic resizing of the canvas and graphs when the browser window changes size.
    A primitive firing an event or notification when the zoom is performed, for displaying a sensitive amount of data and not overloading the web application.
    A primitive to redraw the data set periodically, for quasi real-time information display since new temperatures will appear every 3 to 5 minutes.
    Possibility of having some sort of marks at specific points in time (in order to showcase alarms or information alike).
    The x-axis has to be fully customizable (tickers at fixed positions specified by our application instead of automatic calculation).
    Compatibility with IE Explorer 6, Firefox 3, (if possible Opera 9.6 and Google Chrome).
    Zooming (if possible squared).
    Precision of +- 0,01 ºC
    Label showing each graphs temperature value.
    Discontinuous data handling.
    Legend not shown in the displaying area, to avoid visibility problems.

    Optional needs.

    Printability of the graph in a pdf file or similar.
    Day-night background shading.
    Activation and deactivation of graphs from the legend or directly.
    Mouse-lock for each graph.

    Most of these are covered either by one solution or another, but not for all of them. Does anyone knows about a possible solution?

  50. 50

    carl j is a dush bag

  51. 51

    i want to display a data label in the pie chart even that value is zero….what r the changes i have to do in the settings file could u plz help me to solve this problem

  52. 52

    We’ve just finished our pure CSS chart generator – including color pickers, background images, gradients etc. Just enter your values, choose your colors and get your chart. You can call it via a PHP script for inclusion into your page. Check it out at

    Any comments, improvements etc are welcome!

  53. 53

    Thank you~

  54. 54

    This is a chart explorer made using Open Flash Chart.

  55. 55

    Nice all this Chart but what is about Infragistics? Is it not good?


  56. 56

    Great info on link building.. It will guide many in building good links on the Web

  57. 57

    Useful Article! I am using amCharts now since i feel its quite straightforward in terms of chart settings. Also it can update itselft automatically without any need of thirdparty framework. You set everything in setting file which controls the chart. That is really nice!

    Started Exploring Dojo, FusionCharts and others…

    Thanks! for the article

  58. 58

    Published because of the useful information I know, thank you. You have given us your valuable comments I wish you continued thanks to informative content.

  59. 59

    Take a look at
    Ajax charts without any plugins at IE 6.0, 7.0, 8.0, Firefox, Safari, Opera and Chrome.
    Only JavaScript and CSS are needed.

  60. 60

    Hi ,

    i needs to develope the dojo pie chart wiht sql query for generate the performance report from db2 table.

    please help me and give the best example to get the dojo pie chart using sql query

  61. 61


    I am trying to see if this is possible….

    is it possible to generate charts, using fusioncharts or some other program, from an sql data base, and then force the output with text and charts to a pdf file/ And then maybe do a batch of 100 different reports sending each report to a different pdf file?

    I am trying to take a large data set of indivudal responses to survey qustions, store the data in sql, then generate a report for each person who takes the survey. Like giving everyone a scorecard on a test.

  62. 62

    I couldn’t agree with you more!!!

  63. 63

    What illustrative piece!!!

  64. 64

    Here is another HTML5 Charting Library that you might find interesting

  65. 65

    Here is another service for creating online charts and graphs:

  66. 66

    I’m surprised the list does not include Nevron Chart – ( – it has ASP.NET integration, can export flash, svg, pdf, silverlight or raster based charts, supports 2D and 3D charts with OpenGL, supports zooming and scrolling in AJAX mode etc. A very good solution in my opinion…


↑ Back to top