Locked. This question and its answers are locked because the question is off-topic but has historical significance. It is not currently accepting new answers or interactions.
Would anyone recommend a particular JavaScript charting library - specifically one that doesn't use flash at all?
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:
Dojox Charting, good if you use the Dojo toolkit already
Raphael-based solutions
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.
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.
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.
It maybe not exactly what you are looking for, but
Google's Chart API is pretty cool and easy to use.
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/
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.
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.
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.
Flotr is another, pure Javascript chart-library based on Prototype and inspired by Flot
Try PlotKit
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+.
a framework: http://www.simile-widgets.org/
a basic: http://www.filamentgroup.com/examples/charting_v2/index_2.php
good looking: http://www.highcharts.com/
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!
My favourite (flot) has already been mentioned.
But be sure to investigate Ortho.
It is excellent for tree charts and timelines.
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/
Check out Google Visualization API, which is kind of a generalization of the simpler Chart API
http://code.google.com/apis/visualization/documentation/gallery.html
Has very cool interactive options including maps, gauges, and charts.
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.
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/
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.
Take a look at Bluff. It's a JavaScript port of the Gruff graphing library for Ruby.
Protochart is all you need
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/
For the more unusual charts: http://thejit.org/
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.
Fusion charts has a new javascript/jquery library that looks promising.
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
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.
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 support#zingchart.com.
Related
I am asking about some JavaScript library or API that I can integrate it in my winjs/HTML Windows store application.
I would like to connect it with my data to render some awesome charts or pies etc.
If someone have any library in mind it will be helpful for me.
Basically you can use any of the diverse Javascript graphing libraries out there. It will depend on what you want to achieve but here's a couple of libraries I found to be of very high quality:
http://g.raphaeljs.com/ (very straightforward)
http://d3js.org/ (more power, more complexity)
http://www.flotcharts.org/ (nice plugin system)
In case charting is an important part of your app, this commercial library may be for you http://www.highcharts.com/
I also found this very extensive list which has even more charting libraries on it but didn't sift through it.
If you are looking for a solution built specifically for Windows 8 HTML and WinJS, then look at the RacControls for Windows 8. They contain a wide array of charts and graphs, as well as SparkLines (coming in beta in the next couple of days) for very lightweight rendering of your data visualizations. If you are looking for Cross Platform, Kendo UI DataViz has many of the same options.
[Full disclosure, I work for Telerik as the Senior Developer Evangelist for DevTools]
I intend to use one of D3 or Dojo GFX to create some big data visuals like TreeMap, Wave-forms etc. The great thing about D3 is that many of these visualizations are already available as example implementations for fast development. Also its enter-update-exit paradigm fits nicely with my dataset. But I am not averse to using Dojo GFX (and writing my own Treemap etc implementations) if it is said to be more stable and better suited for mobile.
Seeking suggestions and comparisons...
In short, the answer is simple: If you are using dojo, use the GFX module. If you are not using dojo, use D3.
What's more, GFX and D3 are effectively the same thing: low level drawing APIs (herein visualization toolkits), both of which can be used in tandem with a larger javascript framework. GFX, in fact, must be used within dojo.
Since graphing/charting/drawing/whatever is often only part of a web application, the underlying framework architecture should be the driving force behind choosing a visualization toolkit. So basically, if you go dojo or not is what will answer this question for you, and if you do, GFX is a great option since it is already baked in (though I should mention that D3 can be wrapped in an AMD as referenced here).
And now, a real answer
If you have decided that the visualization toolkit is the driving force behind choosing a javascript framework and not the other way around, here are some thoughts on GFX vs D3:
Community Support: More people are developing and asking questions on D3. Looking at github watches/stars/forks, D3 leads with 1.9k/22.7k/4.7k over GFX's 54/52/91 (dojox is GFX's parent module). Here on stackoverflow D3 has nearly 7k tags compared to GFX's 26.
Features: GFX can render using SVG, VML, canvas, and even silverlight. By this, GFX has superior cross platform, browser, and version support. Beyond this, both visualization toolkits enjoy the same access to every feature you get when writing visualizations declaratively.
Learning Curve: Both toolkits are very low level APIs that are complicated to learn. D3's enter-update-exit pattern may be especially confusing for those not familiar with extensive method chaining.
Frameworks: Both of these visualization toolkits are used in larger charting frameworks. GFX is used by Dojo Charting, D3 is used by many including NVD3, D3plus, and Vega to name a few.
Which open source JavaScript framework for drawing chart is better, in regards to:
Being small and easy to learn
Having good documentation
Having easy to use API (just giving data and position should be enough, unlike this one)
You should try:
http://www.highcharts.com/demo/
One of my favourites.
If you're just looking for basic things like line charts or bar graphs, check out Flot.js. It's easy to learn and use but not super flexible.
jqplot, if the jquery overhead is not an issue. The examples page shows how simple graphs can be defined in a single line of code. Dual licensed under the MIT and GPL version 2 licenses.
Otherwise, google for "best javascript chart libraries" and you will find many articles that introduce and compare some of the most popular solutions.
It maybe not exactly what you are looking for, but
Google's Chart API is pretty cool and easy to use.
And here is other 20 Best JavaScript Charting and Plotting Libraries
So I've been working on a project that requires offering the possibility to view the results of a simulation in 2D. Now the solution that was first considered was RGraph. However it seems that now the fact that RGraph's free license requires a link to their page is not in agreement with the client and we need to find some free alternatives.
Now I'm starting to look at JIT and Google Chart Tools but I'm not sure yet either if their license is better that the one of RGraph, or how difficult it would be to make the actual changes.
So basically I would like to know if you have any other javascript libraries that fit the needs (being capable of plotting a 2d array for example and having a free license) or if you have any reason why I should dismiss one of the two libraries I proposed to look at, that would also save me some time.
Thanks,
Bogdan
try flot
http://code.google.com/p/flot/
Ext JS 4 offers a variety of chart types.
I am looking for a charts library to be displayed on a website. I will use intensively this library (for area, line and bar charts mainly), so I prefer to secure my choice before starting implementing.
The list of website chart libraries that I have initially considered are:
Plotkit
Emprise JS Charts
Sparkline
Protochart
gRaphael
Bluff
YUI Charts:
However after some researches on this forum and investigations on the web, I have reduced my candidate list to these two libraries:
Flot jQuery plugin
Google Visualization
Which one do you advise me to use and why (if you have worked with one or two of them, please tell me your feedback)?
How do they compare one to each other regarding ease of use, performance and features?
Thank you
EDIT: Based-Flash Chart libraries were not eligible with my constraints
I will try to answer my own question after some several tries and researches about these 2 visualization libraries, here are my own list of pros for each solution :
Flot Pros
jQuery plugin : if you are familiar with jQuery (or if your apps is integrated with jQuery), it seems natural to use Flot
Offline visualization : you can test or have it installed into an internal website. Google Visu can only work if you have acces to the google website !!
Customization : this is basically a JavaScript file so if you are good at JS coding, you can customize your charts as your convenience. Also the Flot plugin system allows you better modularity
Google Visualization Pros
Documentation : awesome ! Examples for each type of graphs are available in the Google site
Easy to use : Really. Easier than Flot (that requires to somehow customize the div container)
Powerful : you have many sorts of graphs and features (zooming, interactivity,...)
Java and Python API : it can helps a lot for constructing the Data Table (at least for me, I can use the Java API)
Bottom Line
If you are familiar with jQuery, go with Flot. If you need for some reasons to see your charts offline, go with Flot. If you want full control, go with Flot.
If you don't recognize yourself above, go with Google Visu. It's easy to learn and implement, very well documented and extremely powerful.
Not in your list, but I would recommend you have a look at Highcharts http://www.highcharts.com/
Highcharts is SVG, and as such, it is much more dynamic than Flot, you can restyle graphs with CSS, attach events, perform animations, etc...
It is also compatible with IE6 and it works server-side (thx to Batik)
I'm currently building a graph-intensive application, and chose Highcharts after lots of benchmarkings. I don't regret my choice.
The piwik project uses the Open Flash Chart (not on your list).
It's easy to use, has plenty of working examples very user friendly.
I am a user of Flot, and a big fan. I use it in a Grails application, and use stacked bar, line, and pie charts, including time-series and a bunch of interactive capabilities (i.e. turn off / on series with checkboxes, etc).
I found it to be a pleasure to work with overall, and feel the API is quite well developed (I saw that a bunch of other JS charting libraries adopted the API, so you'll even have some flexibility to move to another kit in the future). From looking at the google API just now for a minute, I think I like flot's better (although google may have ability to pass in a series as well, didn't see it from samples).
They just came out with a new version a few weeks ago (0.6), that supports plugins, which I expect will stimulate more innovation.
So I think part of this depends on other technologies you are planning to use. It seems like Visualization is integrated with GWT, so if you are thinking of using that, Visualization is the way to go. On the other hand, if you are thinking of using JQuery for AJAX, then Flot might be a more natural fit.
When I was making my decision to use this, it seems like Google didn't have interactive visualizations, only google charts (images), which is one of the reasons I went with Flot.
There is jqPlot (http://www.jqplot.com/), an open source project which looks good. Based on jQuery as well. I will give jqPlot a try, jQuery flot seems to be inactive.
Not in your list, but very impressive: ExtJS 4.0 charts