28 useful graphing solutions for web developers

November 12, 200811 Comments

Many a web application can be enhanced with a decent graph to show data. Unfortunately out of the programming languages / frameworks that we have available to us, none seem to be very forthcoming with decent graph components, and it is left up to third party solutions to provide the necessary. From my hunts around the web the following showcases some of the better options. I’ve tried to keep these limited to the open source / free options.

LibChart

http://naku.dohcrew.com/libchart/pages/introduction/

Libchart is a simple PHP charting component, and it is totally free free free! The project is an ongoing one – with the last release in April 2008. If you are a PHP coder, you’ll love its simplicity.

Currently supports:

  • Bar charts (horizontal or vertical).
  • Line charts.
  • Pie charts.
  • Single or multiple data sets.
  • Compatibility with PHP 5.

PlotKit

http://media.liquidx.net/js/plotkit-doc/PlotKit.QuickStart.html

Primarily for Barcharts and Piecharts, plotkit uses some fancy Javascript, SVG and Canvas to do some wonderous things. Both these formats are gaining traction in the javascript community, and with implementations in major browser engines, we are deffo going to see more useful javascript drawing libraries cropping up over time.

FusionCharts Free

http://www.fusioncharts.com/free/

Fusioncharts offer some of the best animated flash charting components on the web, and luckily for us they also offer free components. Not only are they used commercial with clients such as Oracle, Microsoft and Dell amongst others, so you’d be in good company. FusionCharts Free can be distributed for free with your free or commercial softwares, irrespective of whether they’re open source or closed source. Hurray!

Chartpart

http://chartpart.com/

Google’s chart drawing API is pretty useful. More so when a little website generates and previews a chart automatically for you. Mighty useful.

Simile Widgets

http://code.google.com/p/simile-widgets/

The Simile project at MIT stands for Semantic Interoperability of Metadata and Information in unLike Environments, with alot of their work focused on visualising digital assets. Luckily for us, they have open sourced some useful widgets on Google code. The timeline is of particular interest, as it allows you to plot events as well as data, which can give some pretty cool results.

Simple Accessible Charts

http://grassegger.at/xperimente/charts-daten-semantik-css/

Inspired by some of the work done by ThinkVitamin – Out of all of the graphing solutions presented here, this is by far the simplest. HTML and CSS charts. Great if you are short on time, and need an easy bar chart.

AmCharts

http://www.amcharts.com/

Created by the talented Antanas Marcelionis Amcharts offer both a commercial charting solution and also offer a free linked version of their flash charting components. The project backups great components with even better documentation, with data (as you would expect) being pulled in via an XML file. They aso offer easy to use server side ASP.NET controls – which make the implementation even simpler for those of us who use the framework.

Features:

  • Stock
  • Column and Bar chart
  • Line and Area chart
  • Pie & Donut
  • Scatter and Bubble chart
  • Radar and Polar

JFreeChart

http://www.jfree.org/jfreechart/

If you develop on the java platform JFreechart is a 100% Java library that is used extensively in existing projects. Established eight years ago, the project has gone from strength to strength, and is now used by 40,000+ Java developers.

The library includes support for multiple chart types including gauges – common in many dashboard applications.

Charting Component Dojo Framework

http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/charting/

We covered Dojo as one of the Javascript frameworks worth taking a serious look at. Dojo has a similar implementation of graphing via Canvas that we seen used in Plotkit. It is more extensive in its offering however, with cleaner lines generated overall.

Open Flash Chart

http://teethgrinder.co.uk/open-flash-chart-2/

Open Flash chart instead of XML as its datasource uses JSON, which in my opinion, opens it up for further expansion via javascript interaction. Now running on Flash Actionscript 3.0 model – open flash chart is one of the most impressive open source charting ciomponents on the Web today.

Zedgraph

http://zedgraph.org

Written in C# on the .NET framework, ZedGraph is a class library, user control, and web control for .net,  for drawing 2D Line, Bar, and Pie Charts. You can easily implement the library in VB however with a binary download offered from SourceForge. Codeproject also offer a good example C# program for utilising the control.

Open source gauge component

http://www.digitaldarknet.net/flash/index.php?selector=dgauge

Gauge components are a new addition to many useful dashboards. These are open source flash swf files, and data passed in via javascript. Source files are not included, but these may be useful for small scale data display. There’s also a JS canvas sample available via the above link.

XML/SWF gauge

http://www.maani.us/gauge/

XML/SWF gauge is a simple, yet powerful tool to create attractive web gauges and dials from dynamic data.

Create an XML source to describe a gauge, then pass it to this tool’s flash file to generate the gauge. Type the XML source manually, or use any scripting language (PHP, Perl, ASP, CFML, etc.) to generate it automatically.

updated…

Gauge Js

http://www.netzgesta.de/gauge/

Gauge.js 1.1 allows you to add gauges (with shading and reflection) to your webpages. It uses unobtrusive javascript to keep your code clean.

Humble Finance

http://www.humblesoftware.com/finance/index

HTML 5 implementation of Google Finance chart, (which uses Flash). Good for plotting financial data in HTML.

RGraph

http://www.rgraph.net/examples/bar.html

RGraph is another HTML 5 bar chart implementation

HighCharts

http://www.highcharts.com

Highcharts is a charting library written in pure JavaScript, offering an easy way of adding interactive charts to your web site or web application. Highcharts currently supports line, spline, area, areaspline, column, bar, pie and scatter chart types.

Smoothie Charts

http://smoothiecharts.org/

A real time HTML 5 canvas chart that updates in real time. Great for data that changes frequently. Unfortunately, currently only works in Chrome and Safari 5.

CanvasXpress

http://canvasxpress.org/

CanvasXpress is a JavaScript Canvas Library based on the HTML5 canvas tag that provides a generic and simple way to display genomics data. It support multiple graph types including Bar-Line graphs, 2D-3D scatter plots, Heatmaps, Venn diagrams and much more. canvasXpress supports data transformations and event. It is a cross browser compatible library and works with all major browsers.

ArborJs

A graph visualization library using web workers and jQuery that looks like it would be useful in building sitemaps or node based information systems. You can use it with canvas, SVG, or even positioned HTML elements whichever one fits your project best.

D3

D3 allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document. As a trivial example, you can use D3 to generate a basic HTML table from an array of numbers. Or, use the same data to create an interactive SVG bar chart with smooth transitions and interaction.

D3 is not a traditional visualization framework. Rather than provide a monolithic system with all the features anyone may ever need, D3 solves only the crux of the problem: efficient manipulation of documents based on data. This gives D3 extraordinary flexibility, exposing the full capabilities of underlying technologies such as CSS3, HTML5 and SVG.

Rickshaw JS

http://shutterstock.github.com/rickshaw/

Rickshaw is a JavaScript toolkit for creating interactive time series graphs, developed at Shutterstock. Rickshaw relies on the D3 visualization library  to do lots of the heavy lifting for stacking and rendering to SVG.

KendoUI

http://www.kendoui.com/dataviz.aspx

Kendo UI offers impressive data visualizations that leverage HTML5 to bring you rich dashboard interfaces on every browser and every device. The broadest reach possible without having to compromise on performance and interactivity. By leveraging SVG, your graphs will use hardware acceleration for those clients who support it. Free for open source projects, commercial license available otherwise.

Tufte Graph

http://xaviershay.github.com/tufte-graph/

Tufte Graph is different from other javascript charting libraries because:

  • Configuration is by dynamic functions, allowing for a really compact API (very few options)
  • Non-core layout is done via CSS rather than code

Dance JS

https://github.com/michael/dance

Dance.js is a simple data-driven visualization framework. It’s basically a flavor of Backbone.js, but enriched with some of the ideas of the very popular D3.js visualization framework, mentioned earlier.

A Dance.js dance involves several Performers (aka views or visualizations) who are performing on screen. Users of Backbone.js might already be familiar with the API, as it’s pretty much the same as for Backbone.View. Dance.js comes with its own data manipulation framework, Data.js which functions as a replacement for Backbone.Model.

Graph Dracula

http://www.graphdracula.net/

Dracula is a set of tools to display and layout interactive graphs, along with various related algorithms. No Flash, no Java, no plug-ins. Just plain JavaScript and SVG. The code is released under the MIT license, so commercial use is not a problem.

js Graph it

http://js-graph-it.sourceforge.net/

An interesting approach to graphing, js graphing lets you define you graph in HTML but adds interactivity to it through drag and drop motions. All manner of creations are possible with everything from flow diagrams to sitemaps.

Bonsai JS

http://bonsaijs.org/

Epoch

A general purpose real-time charting library for building beautiful, smooth, and high performance visualizations.

http://fastly.github.io/epoch/

C3JS

D3-based reusable chart library

http://c3js.org/

 

Filed in: Programming
Tagged with:

Comments (11)

Trackback URL | Comments RSS Feed

Sites That Link to this Post

  1. links for 2010-04-10 » 4exp.net | April 10, 2010
  2. Analysing social media marketing without Google Analytics. | April 25, 2010
  1. Abraham Estrada says:

    What about Google Charts?

  2. Soren says:

    I think the javascript library Flot also deserves mention:
    http://code.google.com/p/flot/

    Also opensource like the others, and a pure JS implementation.

  3. Paul Anthony says:

    @Abraham chartpart pretty much covers the Google Api.

  4. Jim Mayes says:

    pChart (http://pchart.sourceforge.net) is another to consider if you’re looking for something PHP based.

  5. Michael Ferth says:

    there’s also flash component especially great for building graphs and flowcharts – Origramy http://origramy.com
    Has JavaScript support and php ready solution

  6. And now (finally)…

    ASP.NET Graph Controls :)

    http://code.msdn.microsoft.com/mschart

  7. Daniel says:

    I am satisfied with FlyCharts http://flycharts.net
    They have everything I need

  8. tn-warez says:

    very helpful stuffff!! thanks!!!

Leave a Reply

Back to Top

Share This