Steve M
Steve M

Reputation: 10573

JavaScript Chart Library

Would anyone recommend a particular JavaScript charting library - specifically one that doesn't use flash at all?

Upvotes: 222

Views: 295764

Answers (29)

Chii
Chii

Reputation: 14738

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

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

Upvotes: 2

Fgblanch
Fgblanch

Reputation: 5295

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

It also allows making nice interactive graphics and visualizations.

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

Although it is only for modern web browsers

UPDATE: The protovis team has moved to another library called 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 new library can now be found in:

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

UPDATE 2:

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

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

Upvotes: 15

Stefan Steiger
Stefan Steiger

Reputation: 82186

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

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

Upvotes: 4

Andrew Begin
Andrew Begin

Reputation: 1

Check out ZingChart HTML5 Canvas, SVG, VML and Flash Charts. Very powerful and compatible library. I'm on the Zing team - mention us on twitter @zingchart or shoot any questions to [email protected].

Upvotes: 0

Fletch
Fletch

Reputation: 5219

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

Upvotes: 0

Fletch
Fletch

Reputation: 5219

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

Upvotes: 14

Aaron Reis
Aaron Reis

Reputation: 21

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

Upvotes: 2

Ivan Mishonov
Ivan Mishonov

Reputation: 1

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

Upvotes: 0

amurra
amurra

Reputation: 15401

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

Upvotes: 0

Hoang-Tran Vo
Hoang-Tran Vo

Reputation: 1

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

Upvotes: 0

Richard
Richard

Reputation: 11

Another is RGraph: Javascript charts and graph library:

http://www.rgraph.net

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

Upvotes: 3

Bittercoder
Bittercoder

Reputation: 12123

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

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

Upvotes: 70

Ryan Charmley
Ryan Charmley

Reputation: 1127

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

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

Upvotes: 2

skorks
skorks

Reputation: 4366

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

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

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

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

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

Upvotes: 14

PhoebeB
PhoebeB

Reputation: 8570

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

Upvotes: 1

Justin Thomas
Justin Thomas

Reputation: 5848

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

http://www.sencha.com/

Upvotes: 1

Torstein Hønsi
Torstein Hønsi

Reputation: 531

Check out 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.

Upvotes: 59

Jean Vincent
Jean Vincent

Reputation: 12435

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

There are 2 main classes of JavaScript solutions for graphics that do not require 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 but for a charting library I would recommend the later because it is well integrated with DOM, allowing to manipulate charts elements with the DOM, and most importantly setting DOM events. By contrast Canvas charting libraries must reinvent the DOM wheel to manage events. So unless you intend to build static graphs with no event handling, SVG/VML solutions should be better.

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

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

There are a number of charting libraries based 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 am the developer of one of the Ico forks on github.

Upvotes: 160

Peter McG
Peter McG

Reputation: 19035

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

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

Upvotes: 3

Razor
Razor

Reputation: 17498

Protochart is all you need

Upvotes: 1

Mauricio Scheffer
Mauricio Scheffer

Reputation: 99730

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

Upvotes: 2

Jason Bunting
Jason Bunting

Reputation: 58931

Try PlotKit

Upvotes: 3

Wolfram Kriesing
Wolfram Kriesing

Reputation: 1527

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

Upvotes: 2

Argelbargel
Argelbargel

Reputation: 6210

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

Upvotes: 3

John Topley
John Topley

Reputation: 115362

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

Upvotes: 1

Rui Vieira
Rui Vieira

Reputation: 5328

My favourite (flot) has already been mentioned.

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

Upvotes: 2

Luke Bennett
Luke Bennett

Reputation: 32896

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

Upvotes: 1

Jan Gressmann
Jan Gressmann

Reputation: 5541

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

Upvotes: 36

Related Questions