[ACCEPTED]-JavaScript Chart Library-charts

Accepted answer
Score: 160

There is a growing number of Open Source 25 and commercial solutions for pure JavaScript 24 charting that do not require Flash. In this 23 response I will only present Open Source 22 options.

There are 2 main classes of JavaScript 21 solutions for graphics that do not require 20 Flash:

  • Canvas-based, rendered in IE using ExplorerCanvas that in turns relies on VML
  • SVG on standard-based browsers, rendered as VML in IE

There are pros and cons of both approaches 19 but for a charting library I would recommend 18 the later because it is well integrated 17 with DOM, allowing to manipulate charts 16 elements with the DOM, and most importantly 15 setting DOM events. By contrast Canvas charting 14 libraries must reinvent the DOM wheel to 13 manage events. So unless you intend to build 12 static graphs with no event handling, SVG/VML 11 solutions should be better.

For SVG/VML solutions 10 there are many options, including:

Raphael is a 9 very active, well maintained, and mature, open-source 8 graphic library with very good cross-browser 7 support including IE 6 to 8, Firefox, Opera, Safari, Chrome, and 6 Konqueror. Raphael does not depend on any 5 JavaScript framework and therefore can be 4 used with Prototype, jQuery, Dojo, Mootools, etc...

There 3 are a number of charting libraries based 2 on Raphael, including (but not limited to):

  • gRaphael, an extension of the Raphael graphic library
  • Ico, with an intuitive API based on a single function call to create complex charts

Disclosure: I 1 am the developer of one of the Ico forks on github.

Score: 70

If you're using jQuery I've found flot to be 6 very good - try out the examples to see if they 5 suit your needs, but I've found them to 4 do most of what I need for my current project.

Additionally 3 ExtJS 4.0 has introduced a great set of charts - very 2 powerful, and is designed to work with live 1 data.

Score: 60

Check out http://www.highcharts.com !

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

Score: 36

It maybe not exactly what you are looking 1 for, but
Google's Chart API is pretty cool and easy to use.

Score: 15

There is another javascript library based 11 on SVG. It is called Protovis and it comes from 10 Stanford Visualization Group

It also allows 9 making nice interactive graphics and visualizations.

http://vis.stanford.edu/protovis/ex/

Although 8 it is only for modern web browsers

UPDATE: The protovis 7 team has moved to another library called 6 d3.js (Data Driven Documents) as they said:

"The Protovis team is now developing a new visualization library, D3.js, with improved support for animation and interaction. D3 builds on many of the concepts in Protovis"

The 5 new library can now be found in:

http://mbostock.github.com/d3/

UPDATE 2:

"Rickshaw" is 4 a JavaScript toolkit for creating interactive 3 time series graphs. Based on d3.js that 2 simplifies a lot the work with d3.js although 1 is a little bit less powerful.

http://code.shutterstock.com/rickshaw/

Score: 14

jqPlot is great. If your requirements are fairly 9 "normal" and you just want to 8 draw some charts, you're probably overwhelmed 7 by the quantity of js charting options. Assuming 6 you don't want to do hours of research, just 5 go with jqPlot as it's probably your best 4 bet. It covers most use cases for most people 3 well. Some of the alternatives are specialised 2 on a certain type of chart or built with 1 a certain use case in mind.

Score: 14

I was recently looking for a javascript 48 charting library and I evaluated a whole 47 bunch before finally settling on jqplot which 46 fit my requirements very well. As Jean Vincent's 45 answer mentioned you are really choosing 44 between canvas based and svg based solution.

To 43 my mind the major pros and cons were as 42 follows. The SVG based solutions like Raphael (and 41 offshoots) are great if you want to construct 40 highly dynamic/interactive charts. Or if 39 you charting requirements are very much 38 outside the norm (e.g. you want to create 37 some sort of hybrid chart or you've come 36 up with a new visualization that no-one 35 else has thought of yet). The downside is 34 the learning curve and the amount of code 33 you will have to write. You won't be banging 32 out charts in a few minutes, be prepared 31 to invest some real learning time and then 30 to write a goodly amount of code to produce 29 a relatively simple chart.

If your charting 28 requirements are reasonably standard, e.g. you 27 want some line or bar graphs or perhaps 26 a pie chart or two, with limited interactivity, then 25 it is worth looking at canvas based solutions. There 24 will be hardly any learning curve, you'll 23 be able to get basic charts going within 22 a few minutes, you won't need to write a 21 lot of code, a few lines of basic javascript/jquery 20 will be all you need. Of course you will 19 only be able to produce the specific types 18 of charts that the library supports, usually 17 limited to various flavors of line, bar, pie. The 16 interactivity choices will be extremely 15 limited, that is to say non-existent for 14 many of the libraries out there, although 13 some limited hover effects are possible 12 with the better ones.

I went with JQplot 11 which is a canvas based solution since I 10 only really needed some standard types of 9 charts. From my research and playing around 8 with the various choices I found it to be 7 reasonably full-featured (if you're only 6 after the standard charts) and extremely 5 easy to use, so I would recommend it if 4 your requirements are similar.

To summarize, simple 3 and want charts now, then go with JQplot. Complex/different 2 and not pressed for time then go with Raphael 1 and friends.

Score: 4

As some kind of late answer, try d3.js
http://mbostock.github.com/d3/

It's 4 the continuation of protovis.
The big difference 3 to flot is in the number of features supported.
Though 2 flot may be simpler, d3.js is definitely 1 more powerful.

Score: 3

Flotr is another, pure Javascript chart-library 1 based on Prototype and inspired by Flot

Score: 3

Try PlotKit

0

Score: 3

I'd recommend gRaphaël for pure JavaScript charting 4 along with the pure JavaScript vector graphics 3 library it's built on (Raphaël).

gRaphaël currently 2 supports Firefox 3.0+, Safari 3.0+, Opera 1 9.5+ and Internet Explorer 6.0+.

Score: 3

Another is RGraph: Javascript charts and 3 graph library:

http://www.rgraph.net

Canvas based so it's fast 2 and there's roughly 20 different chart types. It's 1 free for non-commercial use too!

Score: 2

Try the MIT simile timeline which could 1 be made into a chart - http://simile.mit.edu/timeline/

or the final one, http://code.google.com/p/gchart/

Score: 2

My favourite (flot) has already been mentioned.

But 2 be sure to investigate Ortho. It is excellent 1 for tree charts and timelines.

Score: 2

There is a lot of activity in the dojo charting 4 library, and what is great I am using it 3 inside an AIR application without problems 2 too, pretty cool! See for example there 1 http://www.sitepen.com/blog/2008/05/27/dojo-charting-event-support-has-landed/

Score: 2

Check out Google Visualization API, which is kind of a generalization 1 of the simpler Chart API

Score: 2

http://code.google.com/apis/visualization/documentation/gallery.html

Has very cool interactive options including 1 maps, gauges, and charts.

Score: 2

We just bought a license of TechOctave Charts Suite for our new 6 startup. I highly recommend them. Licensing 5 is simple. Charts look great! It was easy 4 to get started and has a powerful API for 3 when we need it. I was shocked by how clean 2 and extensible the code is. Really happy 1 with our choice.

Score: 1

Not a Javascript library but it may be a 3 suitable alternative - check out Google Charts where 2 you can generate charts by passing querystring 1 data to their web service.

Score: 1

Take a look at Bluff. It's a JavaScript port 1 of the Gruff graphing library for Ruby.

Score: 1

Protochart is all you need

0

Score: 1

Sencha acquired Raphael and now their charts 3 are pure javascript as of version 4. Emprise 2 and HighCharts mentioned above are my two 1 favorites.

http://www.sencha.com/

Score: 1

For the more unusual charts: http://thejit.org/

0

Score: 0

Check out ZingChart HTML5 Canvas, SVG, VML and Flash Charts. Very powerful and compatible 3 library. I'm on the Zing team - mention 2 us on twitter @zingchart or shoot any questions to 1 support@zingchart.com.

Score: 0

I can recommend ArcadiaCharts. A brand-new professional 5 charting library for JavaScript and GWT. Runs 4 in all browsers without plugins. Easy and 3 fast to use: creates great looking charts 2 with just a few lines of code. Free for 1 non-commercial use.

Score: 0

Fusion charts has a new javascript/jquery library that 1 looks promising.

Score: 0

In case what you need is bar chart only. I 8 published some code I've been using in an 7 old project. Someone told me the VML implementation 6 is broken on recent versions of IE, but 5 the SVG should work just fine. Might be 4 getting back to the project and release 3 some serverside renderers I already have 2 and maybe WebGL rendering layer. There's 1 a link: http://blog.conquex.com/?p=64

Score: 0

Probably not what the OP is looking for, but 3 since this question has become a list of 2 JS charting library options: jQuery Sparklines is really 1 cool.

More Related questions