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.

HTML Form Builder
Kevin Hale

Client Side Graphs and Charts with IE by Kevin Hale

This entry was posted 4 years ago and was filed under Notebooks.
Comments are currently closed.

· 5 Comments! ·

  1. Noah Winecoff · 4 years ago

    Interesting stuff. Thanks for the post.

  2. Relapse · 4 years ago

    Have you looked at http://www.liquidx.net/plotkit/ ?

  3. Kevin Hale · 4 years ago

    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.

  4. Emil · 4 years ago

    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.

  5. Tim Blair · 4 years ago

    I believe the ‘emulated mode’ Plotkit refers to is the use of ExplorerCanvas, allowing IE to emulate the canvas tag.