Drawing Graphs on Your Browser?

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?"

I can answer the last two

[Kris_J]

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?

1) Require, no. Use for added functionality (interactive vs non-interactive) yes.
2) No. If it doesn't work on (at least) Netscape/Mozilla then you're excluding too many people (unless you know something about your target audience that I don't).

Surely you can do something with DHTML/Javascript to dynamically resize bar charts...

JPGraph and PHP

[FruitCak]

I've recently had to do something very similar, well okay almost identical. Interactive graphs of various types and of various data sets from a Web Based interface.

We have larges amounts of data which is very hard to interperate by a human in something like a spreadsheet. The only really feasable way to do it was graphs. Of course with the amount of data we had transmitting it to the client to do client side rendering (ie Java) is also out of the question.

In the end we settled on JPGraph [aditus.nu] with an interactive interface built using PHP. So a wizard style interface to choose the type of graph, what data to graph, how to group the data, and finally the outputted graph with the option to change all the settings.

With good indexed data making PHP generated graphs with JPGraph interactive is quite painless and very powerful.

Just one suggestion, make sure you have a way for people to save the settings of the graphs they make so they can pull em later, keeps the PHBs happy :)

How closed is SWF really?

[Burb]

The SWF format is pretty open, as these things go. The FLA format used by flash is proprietary, but SWF documented and that's the bit that actually get's published on the page.

The MING library can generate SWF from PHP et. al.

Have you considered TABLE

[Burb]

For simple histograms, you can go quite a long way with TABLE TD and TR, and a few 1x1 coloured GIF files stretched to suit. Primitive perhaps but very portable to most browsers. OK, lynx users will get cross ... maybe generate ASCII art for them

Java might be faster than you think

[dhk42]

If you want the interactivity, you should at least try an optimized pared down applet. It's true that most applets are slow, but it is frequently also true that they are written badly and/or contain heaps of additional libraries that they need to download. Use as much of java's built-in code as you can with the possible exception of the GUI library.

Look at lightweight graphical libraries like lwvcl (commercial) [zaval.org] or thinlet (LGPL) [mycgiserver.com] for the controls. The zaval people [zaval.org] even have a charting library for their lwvcl system. (I have never used the lwvcl library, it just looks cool - try their online demo [zaval.org]. Thinlet packs amazing capabilities into a very small package.)

If you need to display 15 graphs at a time with limited interaction, then this may not be the way to go, but if you need to display one at a time with very rich interaction, this might be the ticket.

dhk

We use Corda

[pbulteel73]

Most of these posts suggested image formats... I have a suggestion for an application if you want charts.

Corda [corda.com] might do what you need. It will output the images in Flash, JPG, PNG, GIF, SVG and others. I believe it uses XML files to generate the graphs. I'm sure I'm missing a lot of the other things that it can do, but it's worth taking a look. Oh, and unfortunately it's not free, but it might be worth it if it does what you need.

Note: I do not work for this company. I have seen the results of using their product. We use it where I work and everyone seems to like what it can do.

How about HTML and CSS?

[DeadSea]

Here's a mockup of a bargraph for a web site statistics package that I'm working on:

http://ostermiller.org/bargraph.html [ostermiller.org]

It is done using only HTML with CSS. There was some reason that the bars come down from the top rather than up from the bottom, but I don't remember what it is right now...

Ploticus

[jedimaster101]

I rarely comment, but I can't help it here. I work for Wal-Mart, and I'm on a team that needed to be able to graph a system's performance (CPU/mem/network/disk usage, et cetera). Similar situation to what you're in, I think. I'm not sure what they were using beforehand, but everybody, managers included, is extremely happy that they've switched to Ploticus. They rave about how fast it generates a graph. It's very, very flexible. And it's open source; I noticed a subtle bug, and a few days after notifying the author he gave me a fix.

We have the raw data points coming in from a server-side scripting language (proprietary, unfortunately). These points are passed to a Perl script which parses the data and stores it in a format Ploticus can recognize. It also generates the configuration file used by Ploticus.

I'd really highly recommend Ploticus. No plugins needed. Once you figure it out, it's a dream.

SVG demo page -- including charts

[XaXXon]

Here's a link to an adobe site with SVG demos. If you look 4 down from the top, you'll find an interactive chart demo. [adobe.com]

I think this may be a good example of what you're looking for.

In terms of support, if you plan on having this application around for a while, SVG is only going to get more popular.

perl GD module

[staplin]

I've been using TWiki [twiki.org] for collaboration notes, and one of its features is a plugin for charting [twiki.org]. It manages to draw jpegs and pngs using the perl GD module [cshl.org] and the gd library [boutell.com].

Of course, you'd need to write your own server side to generate the chart you want, but these tools put you easily along that path.

javascript vector graphics

[JayClements]

http://www.walterzorn.com/index.htm
haven't used it, but the demo is fast and interactive.

Flash once, data many

[yelvington]

Flash isn't just for animation any more. It's an interactive UI delivery platform.

Write a generalized interactive graphing tool in Flash. Then have it fetch a simple data file (delimited text or XML) via HTTP.

You can update the data dynamically and transmit the results with extremely low overhead.

Flash kicks Java's butt when it comes to availability, reliability, predictability and performance. Flash on Linux is absolutely the same as Flash on Windows or the Mac. It just works.

We have used Flash's ability to fetch dynamic data via HTTP to build "live" traffic and weather maps and perform other integration of constantly changing information.

So in summary...

[darnok]

Putting together the responses to date, it seems like this is the story:

SVG: lots of potential; the ideal solution if the plugin is installed or easily installable; XML based

Flash: the pragmatic choice; installed nearly everywhere; works reliably on all platforms; can be driven via XML

VML: good fit for IE 5+ browsers, since it's supported in a default install; unsupported in Mozilla; deprecated technology; XML based

Java applet: slow to startup; JFreeChart looks very powerful provided startup times are acceptable and browser support is available

In case you can't tell, I'm facing the same problem as the original poster. I also can't deploy server-side solutions, so PHP, Perl GD, etc are all out.

Based on this, I'm inclined to build a generic XML solution, then rely on plugin detection and XSLT to deliver either SVG or VML as appropriate. That covers me for IE 5.5+ and anything with SVG support. The largest group that I don't have covered is Mac users and people with older browsers, and I could probably come up with a different XSLT to cope with them if the demand made it worth doing.