Tuesday, October 3rd, 2006

Dynamic Graphics in the Browser

Category: Canvas, Programming, UI

Dynamic graphics inside the browser are starting to become a little bit more practical, thanks to increased support for Canvas and SVG. I recently discussed eight competing techniques for generating dynamic graphics in an Ajax application, each with their own implications for portability, usability, and performance.

The following techniques are descibed:

  1. SVG
  2. Canvas
  3. Dynamic images from the server
  4. VML
  5. Richer Plugin (e.g. Flash)
  6. CSS/DOM
  7. data: resource
  8. XBM

Posted by Michael Mahemoff at 6:21 am

3.7 rating from 44 votes


Comments feed TrackBack URI

Right Now I am using Dynamic Images from the server. I created the once on the server then passes it to the enduser everytime after that until the data is stale (an admin adds an event) then I re-cache the image on the server side with the new data. This saves the server from getting uneeded db hits and strain from creating the images over n over n over.

Comment by Mario — October 3, 2006

What about the GD library for PHP? You can do some prett amazing things with that, and coupled with Ajax the possibilities are almost limitless. Plus it has the advantage of not requiring any special plugins or capabilities for client browsers, just the GD library/module installed on the PHP serving server.

Comment by seb835 — October 3, 2006

The dojo library will have a cross-browser SVG/VML library (dojo.gfx) for uniform rendering of graphics across browsers without plugins.

Comment by Gavin Doughtie — October 3, 2006

A promising flash-based approach is AFLAX.

Comment by Tim — October 3, 2006

My solution is with php and the gd library

Comment by Mario — October 3, 2006

In my opinion this is just another proof of concept, it may have some minor applications where it will actually be used, but on a large scale we’ll not see anything change for quite some time: images are either static or serverside generated. Messing around with client side graphing adds too much to bother about.

Comment by Christian 'Sny'e Decker — October 3, 2006

An example of technique number 6, combined with real-time server-pushed data through the Comet paradigm is visible here (based on Lightstreamer):

Comment by Alessandro Alinone — October 5, 2006

Why AJAX needs Flash

Why AJAX needs Flash: If you develop SWF you may have already seen this Visual Synthesizer from Big Spaceship, but I think it’s useful for Web2.0 types to look at as well, particularly because any browser which supports XmlHttpRequest will likely supp…

Trackback by JD on EP — October 12, 2006

Also check out this ajax/dhtml based website which allows flowcharting in both IE and firefox. Backend processing allows you to save images as jpeg/png/svg or pdf.

Comment by shelly — November 3, 2006

worth a look

Open-jACOB: http://www.openjacob.org
Ajax Draw2D: http://www.openjacob.org/draw2d.html
Ajax Workflow: http://www.openjacob.org/jacob.blooper.html



Comment by andreas herz — December 13, 2006

Leave a comment

You must be logged in to post a comment.