Slashdot Mirror

← Back to Stories (view on slashdot.org)

Drawing Graphs on Your Browser?

Posted by Cliff on from the harvard's-got-nothing-on-these dept.

Pieroxy queries: "I recently had a look at various ways to draw a graph (lines, bar chart, pie chart...) for a web-based enterprise application. As we need some interactivity, the GIF image generated on the server-side is not an option. Here is the list of technologies I can think of: Flash is probably over kill and a closed technology. Java is very flexible but slow (to start and run). SVG (discussed here) still requires a plugin. VML is supported only on IE5+, but it is natively supported. Which one of these technologies is the more flexible and interactive? Is it reasonable to require a plugin from the end users of our enterprise application? Is IE5+ a wide enough target for an enterprise application?"

8 of 201 comments (clear)

  1. Client-side or server-side interactivity? by stoborrobots · · Score: 2, Interesting
    Do you need client-side interactivity (vis-a-vis an applet), or do you need a "dynamic image" (as used by most sharemarket websites, for example)?

    For serverside interactivity, a generated image (PNG,JPG,GIF) is more than suitable...

    You can even make it an imagemap, if you need image-based feedback...

    Just a thought...

    --
    "Go to CNN [for a] spell-checked, fact-checked summary" -- CmdrTaco
    1. Re:Client-side or server-side interactivity? by Froggie · · Score: 2, Interesting
      On a slightly off-topic note, has anyone found a decent server-side graph generator? GD seems to be a bit pants, and almost none of them understand antialising...


      One option might be to find a server-side SVG renderer. Assuming you believe SVG will become an implemented standard (practically speaking, that means something that IE will eventually support) you could generate graphs in SVG, server-side render them for the time being, and have a relatively easy way of stepping forward to a SVG + JavaScript/DOM page in the future.


      Otherwise, if you want really clever ways of altering the graph's values or view that work today, you're going to have to use either Flash or Java.

  2. Re:Why not an imagemap? by Froggie · · Score: 2, Interesting
    How on earth do you propose manipulating a bitmap image with "some Javascript"?

    By fetching another image when a change is requested, perhaps? This is easy enough to do without a page reload.

  3. GD::Graph is quite popular, fast, and easy. by Anonymous Coward · · Score: 1, Interesting

    In perl.
    Blazing fast with mod_perl.
    Very easy to learn.
    More info here.

  4. Javascript by Basje · · Score: 3, Interesting

    I once wrote a piece of javascript that would do this client side. It was for a corporate intranet, so I knew which version of which browser was going to be used.

    The idea was simple: I created a table with every cell one pixel large, and set the colors accordingly to the input for the frame. It started out as a simple line graph, but in the end it could do bar and pies too.

    This should be doable crossbrowser now that JS has stabilized enough between IE and Moz. If implemented right, it can really do with much lower bandwidth than pictures (which was the main requirement then): the .js file can be cached, so only the data has to be sent, measuring a large multicolor pie graph in bytes rather Kbytes.

    --
    the pun is mightier than the sword
  5. Re:How about HTML and CSS? by DeadSea · · Score: 2, Interesting

    Pie chart would be hard. I'll bet you could do a line graph. I'm thinking that you could generate a large table with javascript. You could set each each of the cells to be 1px by 1px. Then turn on the backgrounds of the ones in the line. It'd be a bit of a cludge, but it just might work. (Come to think of it, pie chart might work like this too if you have enough time on your hands).

  6. Re:How about HTML and CSS? by gazbo · · Score: 3, Interesting
    Cute idea - time to dig up the rasterizing algorithm and port it to JS. Yeah, in principle it would work (might possibly be a problem trying to persuade the browser that no, really, I honestly do want these TDs and TRs all to be on adjacent pixels.


    I wonder how quickly a browser could re-flow a document that included an 800X600 cell table...My guess is "painfully", but it's almost worth writing the concept code to find out - time to write some PHP (I'm buggered if I'm going to write it by hand)

  7. Re:How about HTML and CSS? by Pieroxy · · Score: 2, Interesting

    I actually gave it a try... 'twas too long this idea was in my head, so I tried it....

    My PC is approx. 1GHz.

    320x20 (yes, 320x20 not 320x200) pixels takes approx 1 minute to be built through DHTML. (Using a table and a TD for every cell). Giving that 320x5 takes 4 seconds, it is not linear and we can deduce that a 320x200 matrix would be built in a couple of days.

    Hmm, we'll need more than Hyperthreading.

    --
    Write boring code, not shiny code!