- October 18th, 2007
- 66 Comments
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.
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.
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 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.
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.
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.
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.
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.
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.
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.
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.
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).
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.
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.
.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.
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.
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.
- Ajax MGraph48
A user interactive XHTML/CSS graph which is powered by PHP – with an easy database integration.
- CSS Vertical Bar Graphs
Eric Meyer’s method to design charts with CSS.
- CSS Diagrams50
A classic. A technique to display CSS-based diagrams with absolute and relative positioning.
- CSS for Bar Graphs52
Another CSS-technique by ApplesToOranges.
- Dynamic Pie Chart with CSS55
- Real World Bar Graphics with some CSS57
- SAC Simple Accessible Charts59
- CSS Line Graphs61
- Vertical Bar Graphs with CSS and PHP63
- An accessible bar chart65
- Stu Nicholls definition list bar chart67
- Displaying percentages
- CSS Bar Graphs and Charts71
- Creating a graph using percentage background images72
- Super simple CSS bars73
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.
- FusionCharts Google Gadget76
The online-version of Fusioncharts.
- 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.
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.
- 1 http://www.dojotoolkit.org/2006/11/08/dojo-charting-engine-courtesy-greenplum-and-sitepen
- 2 http://www.dojotoolkit.org/2006/11/08/dojo-charting-engine-courtesy-greenplum-and-sitepen
- 3 http://www.dojotoolkit.org/2006/11/08/dojo-charting-engine-courtesy-greenplum-and-sitepen
- 4 http://ajaxian.com/archives/dojo-charting-engine-released
- 5 http://www.fusioncharts.com/free/
- 6 http://www.fusioncharts.com/free/
- 7 http://www.fusioncharts.com/free/
- 8 http://www.amcharts.com/
- 9 http://www.smashingmagazine.com/2007/09/20/attractive-online-diagrams-charts-and-maps/
- 10 http://www.amcharts.com/
- 11 http://www.amcharts.com/
- 12 http://www.amcharts.com/
- 13 http://www.anychart.com/products/anychart/overview/
- 14 http://www.anychart.com/products/anychart/overview/
- 15 http://www.anychart.com/products/anychart/overview/
- 16 http://www.anychart.com/products/anychart/overview/
- 17 http://www.blue-pacific.com/products/RichChartServer/
- 18 http://www.blue-pacific.com/products/RichChartServer/
- 19 http://www.web-site-scripts.com/flash-charts
- 20 http://www.web-site-scripts.com/flash-charts
- 21 http://www.web-site-scripts.com/flash-charts
- 22 http://www.globfx.com/products/swfchartgen/
- 23 http://www.globfx.com/products/swfchartgen/
- 24 http://www.maani.us/xml_charts/index.php
- 25 http://www.maani.us/xml_charts/index.php
- 26 http://www.maani.us/xml_charts/index.php
- 27 http://teethgrinder.co.uk/open-flash-chart/
- 28 http://teethgrinder.co.uk/open-flash-chart/
- 29 http://teethgrinder.co.uk/open-flash-chart/
- 30 http://naku.dohcrew.com/libchart/pages/introduction/
- 31 http://naku.dohcrew.com/libchart/pages/introduction/
- 32 http://pear.veggerby.dk/
- 33 http://pear.veggerby.dk/
- 34 http://pear.veggerby.dk/
- 35 http://www.aditus.nu/jpgraph/
- 36 http://www.aditus.nu/jpgraph/
- 37 http://www.dotnetcharting.com/overview.aspx
- 38 http://www.dotnetcharting.com/overview.aspx
- 39 http://www.dotnetcharting.com/overview.aspx
- 40 http://www.ejschart.com/
- 41 http://www.ejschart.com/
- 42 http://www.liquidx.net/plotkit/
- 43 http://mochikit.com/
- 44 http://www.liquidx.net/plotkit/
- 45 http://solutoire.com/plotr/
- 46 http://www.liquidx.net/plotkit/
- 47 http://www.liquidx.net/plotkit/
- 48 http://dragan.yourtree.org/code/ajax-mgraph/
- 49 http://dragan.yourtree.org/code/ajax-mgraph/
- 50 http://www.surfare.net/~toolman/temp/diagram.html
- 51 http://www.surfare.net/~toolman/temp/diagram.html
- 52 http://applestooranges.com/blog/post/css-for-bar-graphs/?id=55
- 53 http://applestooranges.com/blog/post/css-for-bar-graphs/?id=55
- 54 http://applestooranges.com/blog/post/css-for-bar-graphs/?id=55
- 55 http://petewilliamsagency.com/css/examples/pie/
- 56 http://petewilliamsagency.com/css/examples/pie/
- 57 http://www.khmerang.com/index.php?p=118
- 58 http://www.khmerang.com/index.php?p=118
- 59 http://www.grassegger.at/xperiment/sac-simple-accessible-charts-css/
- 60 http://www.grassegger.at/xperiment/sac-simple-accessible-charts-css/
- 61 http://www.khanate.co.uk/graph/
- 62 http://www.khanate.co.uk/graph/
- 63 http://www.terrill.ca/design/vertical_bar_graphs/
- 64 http://www.terrill.ca/design/vertical_bar_graphs/
- 65 http://www.standards-schmandards.com/exhibits/barchart/
- 66 http://www.standards-schmandards.com/exhibits/barchart/
- 67 http://www.cssplay.co.uk/menu/barchart.html
- 68 http://www.cssplay.co.uk/menu/barchart.html
- 69 http://webfx.eae.net/dhtml/chart/demo.html
- 70 http://webfx.eae.net/dhtml/chart/demo.html
- 71 http://lorelle.wordpress.com/2006/01/05/css-bar-graphs-and-charts/
- 72 http://www.maxdesign.com.au/presentation/percentage/
- 73 http://blog.leetsoft.com/2006/8/22/super-simple-css-bars
- 74 http://www.richchartlive.com/RichChartLive/rcl-free.aspx
- 75 http://www.richchartlive.com/RichChartLive/rcl-free.aspx
- 76 http://gmodules.com/ig/creator?synd=open&url=http%3A//fusioncharts.googlecode.com/svn/trunk/fusioncharts.xml
- 77 http://gmodules.com/ig/creator?synd=open&url=http%3A//fusioncharts.googlecode.com/svn/trunk/fusioncharts.xml
- 78 http://nces.ed.gov/nceskids/createagraph/
- 79 http://nces.ed.gov/nceskids/createagraph/
- 80 http://www.smashingmagazine.com/2006/09/01/list-of-nifty-tools-diagrams-charts/
- 81 http://www.gnome.org/projects/dia/
- 82 http://www.jfree.org/jfreechart/
- 83 http://www.omnigroup.com/applications/omnigraffle/download/
- 84 http://www.microsoft.com/office/visio/prodinfo/default.mspx