Tired of having to use up precious server side resources to build charts and graphs for your web application? Tired of using Flash alternatives that break’s your page’s printing options? Well the era of cross-browser client-side 2D graphics is now among us my friends.
Since Apple’s introduction of Canvas in Safari, support for it has been added to both Mozilla and Opera, making it more widespread than, the much older, SVG. Unfortunately, while IE doesn’t support SVG natively either, it does support VML, which does pretty much the same thing as SVG (as far as basic drawing is concerned), AND it’s been around since the 5.0. Thanks to some intrepid developers and projects recently released, we can now start presenting information graphics with client side implementations.
IECanvas - Emil Eklund was the first to create a nice script to get things rolling and bridge some of the properties between SVG / VML graphics. Supported methods are: arc, beginPath, closePath, fill, fillRect, lineTo, moveTo, rect, restrore, rotate, save, stroke, strokeRect, translate and a limited rotate.
ExplorerCanvas - A much more robust solution in active development by the community, this is the open-source project dedicated to the same goals as IECanvas. Web developers only need to include a single script tag in their existing web pages to make the magic work.
JSGraphics - This JavaScript VectorGraphics library provides graphics capabilities for JavaScript: functions to draw circles, ellipses (ovals), oblique lines, polylines and polygons (for instance triangles, rectangles) dynamically into a webpage. A nice WYSIWYG interface helps you see the promises of this Graphics Library in action.
Chart (WebFX) - And if you want something that’ll just bring everything together for you in a nice development package, Chart WebFX is for you. Bringing togethr ExplorerCanvas and JSGraphics, the first public version of this implementation looks fantastic providing easy ways to create Area, Line, Stacked Area, Stacked Line and Bar Graphs to the table. Check out the Demo to see some of the possibilities.
Interesting stuff. Thanks for the post.
Have you looked at http://www.liquidx.net/plotkit/ ?
I did see Plotkit, but it says “IE 6 (in emulated mode).” I couldn’t find anything that explained what that meant so to be on the safe side, I left them out. They do look fantastic, though.
Nice summary!
One thing though, IECanvas has been deprecated in favor of ExplorerCanvas so using it is not recommended.
Please see http://me.eae.net/archive/2006/03/28/explorercanvas/ for the details.
I believe the ‘emulated mode’ Plotkit refers to is the use of ExplorerCanvas, allowing IE to emulate the canvas tag.