Graphing/Charting Data on Web Pages: JavaScript Solutions

Aug 4 2008 by Jacob Gube | 19 Comments

Effective data visualization allows users to easily understand and consume otherwise complex, boring information. Plotting your data can serve as a replacement to tabular data, and is also a great way to add practical graphics to your web page or application. There are a variety of ways you can plot data on-the-fly – but in this article we’ll focus on 10 excellent JavaScript solutions to graphing/charting data that allow you to process data client-side. You’ll also find a link to one of the demonstration pages of the script so that you can see it in action.

Flot

Flot - Screen shot.

Flot is a data-plotting library developed by IOLA built on top of jQuery.  It’s easy to use, yet feature-packed and elegant. It has a mouse-controlled zooming feature (click and drag over the target area) and some simple user interactivity features such the ability to determine the x and y coordinates of mouse clicks.

Demonstration: Different graph types

Flotr Javascript Plotting Library

Flotr Javascript Plotting Library - screen shot.

Flotr, written by Bas Wenneker of Solutoire.com, is a plotting solution inspired by Flot that uses the Prototype JS library and excanvas.js. It supports most modern browsers including Internet Explorer 6, and has many features of Flot including mouse tracking, selection, mouse-tracking features.

Demonstration: Basic Legend Example

fgCharting Plugin for jQuery

fgCharting Plugin for jQuery - screen shot.

fgCharting jQuery plugin is an accessible solution for charting data. It takes data in an HTML table and dynamically transforms the table into charts, allowing non-traditional browsers (i.e. – screen readers) access to the HTML table. Basic usage involves one line of code to initialize the plugin.

Demonstration:  Chart types page

PlotKit

PlotKit - screen shot.

PlotKit is a charts and graphs plotting solution written on top of Mochikit. PlotKit a complete rewrite of a project called CanvasGraph.js, improving on code structure and adding support for SVG format. The developers of PlotKit provides you with a PlotKit Quick Start guide to get you up and running in no time.

Demonstration: SVG Renderer Tests

JavaScript Diagram Builder

JavaScript Diagram Builder - screen shot.

The JavaScript Diagram Builder supports several types of chart and graph types including bars, dots, lines, and pie charts. The developer has provided a Browser Support tool to help you check if particular objects/methods of the library are supported by your current browser.

Demonstration: The Bar object

Emprise JavaScript Charts

Emprise JavaScript Charts - screen shot.

Emprise JavaScript Charts offers a free Personal License for their feature-packed charting/graphing script. Check out their feature comparison table of the different types of licenses to see which license is right for you.

Demonstration:  Area Chart Example

Dynamic Drive Pie Graph script

Dynamic Drive Pie Graph script - screen shot.

DynamicDrive offers a DHTML/CSS based solution for graphing pie charts. The implementation is straightforward, just include two scripts provided (wz_jsgraphics.js and pie.js), define the values of each segment of your pie chart either inline or in an external JS file, and you’re set!

Dynamic Drive Line Graph script

Dynamic Drive Line Graph script - screen shot.

The Line Graph script is another DHTML solution from DynamicDrive that allows you display line graph data. The procedure for implementation is similar to the Pie Graph script.

Canvas 3D Graph

Canvas 3D Graph - screen shot.

If you need to graph 3-dimensional data, Canvas 3D Graph is worth checking out. Canvas 3D Graph is written with excanvas.js to support Internet Explorer.

The Dojo Charting Engine

The Dojo Charting Engine - screen shot.

The Dojo Charting Engine is a solution written on top of the Dojo Toolkit JavaScript library. It is a feature-rich solution that includes trend methods for analyzing data on-the-fly, 3D visual bars, and animated hover-over effects. Note that the example test page linked on the project page doesn’t work, here’s the working example page link.

Demonstration: Cylinder chart

Your favorite charting solution not included in the list? Have a web page that uses any of the solutions above? Share it with all of us in the comments.

19 Comments

Daniel

August 4th, 2008

As much as I love JavaScript and wish it could everything. I think using JavaScript for graphs and charts is slow, complex and very difficult to get right.

You would be much better off using the fantastic Open Flash Chart. I know it’s flash, but it’s really easy to integrate.

Jacob Gube

August 4th, 2008

@Daniel: Excellent link, and great points. Flash is definitely a great graphing/charting solution. You can create more complex, highly-animated, 3-D charts/graphs in a fraction of the time it would take if you were to develop a JS solution (if you can even do it in JS). What JS has over Flash is accessibility (at least for now). Take for example the fgcharting solution: you start with an HTML table and it processes your mark-up to display as graphs and charts. Not only is this a more accessible solution, it also allows your data to be indexed by search engines.

Since we’re on the topic of Flash, Here’s another Flash-based charting solution that’s worth a look: Ultra-lightweight Charts For AJAX.

Brian Moschel

August 4th, 2008

Nice collection Jacob. For something that’s not a JavaScript graphing library directly, but a very good solution nonetheless, check out Google’s Visualization API: http://code.google.com/apis/visualization/

jerome

August 5th, 2008

I’m quite impressed by flotr. that being said my problem is that javascript-based solutions are still designed for the webmaster, not for the web editor, i.e for the one who codes and designs vs. the one who writes. So I guess that they are fine for dashboards or pages where the organisation of the page won’t change, even if the data is updated, but not so for content pages, like articles or blog posts. my other gripe is the limited number of chart types available in all solutions. It doesn’t matter if you are offering 2 or 10, if they are limited there is some point where you are going to want to do something the program can’t handle.

For that reason if we stick to javascript, I like processing.js (http://ejohn.org/blog/processingjs/) because there is nothing it can’t do.

But overall from a writer perpective I would prefer solutions that can be easily embeded in the page or that generate images that can be used as such.

I wrote an article about charts in blogs specifically:
http://oecdfactbook.wordpress.com/2008/07/25/how-to-publish-charts-in-blogs-and-websites/

cheers
jerome

Makka

August 5th, 2008

You’ve missed an excellent one: ProtoChart http://www.deensoft.com/lab/protochart/

douglas

August 7th, 2008

@Jacob Gube
If you’re using js to load your flash (like swfobject) then you can fill your containing div with the HTML data and have js swap it out with the flash. I believe this accomplishes the same result in terms of accessibility and indexing.

liam

August 9th, 2008

These are really good, really like the look of “Emprise JavaScript Charts” and the 3D one the best.

gabe

August 13th, 2008

Nice work, we could all use this

stevec

April 23rd, 2009

Visualization is quickly advancing on the Web. The advanced visualization at IneSoft Style Chart is an example how much a difference half a year can make. It’s even free!

Jef

August 13th, 2009

Nice post, each of these solution could be use! Thanks

Islam

April 3rd, 2010

I’m searching for a free tool or library that can create fine charts/graphs on multiple platforms, on the server side not on the client?

I was trying the RRDTOOL http://oss.oetiker.ch/rrdtool/ but it seem not working with our architecture

Richard Bowman

June 12th, 2010

Several years ago, I leaned to do graphing with javascript using two one-pixel gif files (one black and one white) and placing next to each other on a web page. While not as elegant as some of the progrmas listed here, it works well.

An example can be viewed at: http://people.bridgewater.edu/~rbowman/ISAW/PlanetOrbit.html On that page click on Plot the Orbit and then look at the code of the resulting window.

MERA-Soft

August 11th, 2010

Take a look at http://www.running-charts.com
Ajax charts without any plugins at IE 6.0, 7.0, 8.0, Firefox, Safari, Opera and Chrome.
Only JavaScript and CSS are needed.

Paul

December 10th, 2010

Here is another addition to this list of JavaScript charts – dhtmlxChart:
http://www.dhtmlx.com/docs/products/dhtmlxChart/index.shtml

Supported chart types: line, spline, area, bar, pie, and pie 3D. You can choose the way to load data into the charts: XML, JSON, JS array, or CSV. Available under GPL and commercial license.

emijrp

January 22nd, 2011

Very useful list. Thanks.

Richard Heyes

July 25th, 2011

You missed RGraph: Javascript charts and graph library. Free for non-commercial use, supports roughly 20 different charts, canvas based and so fast.

Arka

September 13th, 2011

Want to try your hands on 3D JS Charts from FusionCharts Stable?? Then go to link:
http://goto.fusioncharts.com/downloadxt

Alex Sage

November 2nd, 2011

A 100% javascript graphing library Active Graphs and Charts
http://www.jpowered.com/graph_chart_collection/

Full cross browser support including IE 6.0, 7.0, 8.0, Chrome, Firefox, Safari and Opera.

David Johnson

December 21st, 2013

You can also consider this chart:
http://www.shieldui.com
It contains many chart types (21+), as well as wrappers for ASP.NET, MVC and JAVA

Leave a Comment

Subscribe to the comments on this article.