What HTML5 canvas-based controls library should I use right now? [closed]

Question

Google shows that there are already few generic HTML5 canvas-based libraries available. But no high-quality editing/charting controls that I used to see from "big" control developers like Infragistics, Rad, etc.

Any recommendations on what should I look at?

Answer 1

First of all, I don't think you'll find solutions from big companies for Javascript libraries. People using Javascript are not used to paying high sums for enterprise-ready js libraries ;).

I'll give you a rundown of the possibilities:

1. Highcharts is a great out of the box solution you may be after. I've used it with great success in one project. It has looots of documentation and is actively being developed on GitHub. It's easy to use, is pretty to look at (don't underestimate the looks "feature") and is interactive: you can bind / attach to events that fire on the elements like "hover over a bar" or "click a point". It does cost $80 bucks for one site for commercial use (non-commercial use is free).
2. Ext JS 4. Another out of the box solution is a recently (April 2011) released 4th version of a popular Javascript library Ext JS. This forth version now supports plugin-free charting (i.e. no Flash, just native technologies like SVG and VML so it works cross-browser. If you're used to desktop or enterprise features, that you usually don't find in a Javascript library like windows, layout managers, MVC, drag and drop, toolbars, menus, forms, etc., this is definitely for you. Check out the examples here.
3. gRaphaël is another great library and is under MIT licence (free for commercial use!). It looks a little more "Flash-y" and is more developer friendly / intensive. So you'll have to code a lot of it yourself (it's not a full-blown solution like Highcharts), but if you're fluent in jQuery, you'll feel right at home :). It's strength is the power to code anything you want and you can do lots of animations with it, like in jQuery. All the elements in a graph are SVG nodes so you can attach events to each of those and do some powerfull stuff. The demos are worth checking out.
4. Flot. Like alexn said, you can use Flot, but I've used it once and was not very fond of it. I don't know what exactly wasn't for me, it's a subjective thing. I'm not very fond of it's looks, but that's just me. Have a look at it yourself.
5. Other libraries like RGraph or Zingchart. I've not used any of those so this is purely from what I see: they look like they are in their infancy / not polished. I hope they'll improve, but have a look at them anyway and choose your winner.

But you said you want canvas-based controls. Why is that? Is it because canvas is marketed along HTML5. See, Highcharts and gRaphaël are not canvas-based, but I thought this is what you wanted so I put them in anyway. The way gRaphaël works is this (Highcharts work the same way under the hood but that is hidden to the developer): gRaphaël gives you an API (e.g. piechart()) which then creates lots of SVG elements (think of them as <div>s but with more complex shapes and graphics filters) that are then drawn. You can also set event handlers to those elements. But since IE doesn't support SVG (that's a shocker) the library translates those API calls to create VML for IE.

But canvas is different. There are no "elements" per se, you just draw lines and shapes, but you can't just bind to their events with event handlers. So for me, SVG is better (you should see some of the graphics filters that SVG is capable of, like blurring) and I think the libraries are more mature.

But don't take my word for it ;). Check them out and tell me what you think.