Slashdot Mirror
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?"
If you can get away with just bar charts, take several gifs/jpegs/pngs that are just single colour pixels and have your server-side program fiddle with the heights and widths to draw your bar chart without having the server generate an actual image file.
Internet Explorer 5 and above are very widely-used. However, they are still flawed browsers and, due to the announcement that these browsers will no longer be updated as standalone applications, many people may switch to another browser. Also, those using a Unix-based platform (read: GNU/Linux) no longer have any viable way of using Internet Explorer. If it is not easy to change back and forth, the already limited audience VML will reach even less as time goes on.
As an opinion only, if SVG is an option, it may be best in the long run. Assuming it is not easy to acrobatically jump from one option to the next (if that was possible, you could serve VML to IE 5.5+ and SVG to Mozilla, and some raster format for any other browsers), SVG holds the best promise. SVG is already supported as a plug-in (much like flash). It is about to be tested as a native part of the Mozilla browser. Over time, compatibility will actually improve--not something Java or VML can say easily. Also, as compatibility improves, simple scripting can make the charts interactive or real-time (or other neat fancy stuff).
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...
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 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
I'm me. I think.
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
As we need some interactivity, the GIF image generated on the server-side is not an option.
Surely an image with an onClick and some Javascript will do what you ask of it?
There are places where the networks are not touching,and there are places where they are-Boeing's Lori Gunter
.. and that interactivity is hard to achieve in a web browser, maybe this application doesn't belong in a web browser. Just a hunch.
The MING library can generate SWF from PHP et. al.
I've been pleasantly surprised by Flash MX, actionscript is a fully featured programming language that runs across all the platforms Flash is ported to. You can pass variables from your html page, so your graphing application should be writable as 1 single 'movie' that accepts data, rather than writing a new one every time you need to draw a graph.
The only problem is that the tutorials and manuals are aimed purely at designers, not at programmers, so the concept of a variable is given a 20 page explanation whereas the syntax of the more complex commands is glossed over in a 'do this and it works, you probably don't need to mess with it' manner.
A pizza of radius z and thickness a has a volume of pi z z a
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
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) or thinlet (LGPL) for the controls. The zaval people even have a charting library for their lwvcl system. (I have never used the lwvcl library, it just looks cool - try their online demo. 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
Corda 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.
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.
.js file can be cached, so only the data has to be sent, measuring a large multicolor pie graph in bytes rather Kbytes.
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
the pun is mightier than the sword
There were a few options that I rejected:
- Flash - probably extremely good at this sort of thing, as vector graphics and user interaction are its big target. However, we have no in-house expertise, and the end-users will all be professionals who may very well not have Flash installed (and furthermore, their firewall may not even give them HTTP access to download it)
- SVG - Great! It's W3C approved, as opposed to the officially deprecated VML! Whoop-de-fucking-doo. When our clients complain that our application doesn't work, I'll point them to the W3C spec and have the warm glow of righteousness as all of the lawyers' letters demanding refunds come in.
- Java - Well, it can handle drawing and events just fine, we have in-house expertise, but the whole point we're doing this through the browser is to avoid having to write an application from scratch in the first place. Now calling it an "applet" and changing main() to start() doesn't alter the fact that IMO writing user interfaces in Java sucks my grandma's clit.
So, VML. We have the luxury of knowing that the standard desktop is Windows running IE. I suspect that at least 95% of your target desktops (you did say enterprise, right?) will be IE too. Furthermore, if they're running Windows then you know that even if they are running, say Mozilla, that they have IE to hand.At the risk of posting flamebait, do you really have to worry about the possibility of end users running a non-MS operating system? Almost certainly not. Even the few that use Macs can presumably view VML. So go with VML and mandate the use of IE.
Unless, of course, you do wish to use Flash and have the expertise - although I still think you'll run into issues of people not having installed the plugin.
http://ostermiller.org/bargraph.html
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...
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 to Mozilla
A solid reliable freely-redistributable implementation of SVG, and in Mozilla, would be one of the finest things, IMNHO.
A really good SVG implementation could make give web documents the elevated precision of presentation, akin to PDF, but in a W3C standard.
With extensions such as MathML and dynamic SVG, the format could form the basis of not just web documents, but paper documents (eg, stuff that currently is done in Word, Quark, Framemaker, TeX), as well as dynamic presentations (eg, Powerpoint) and, simple interactive applications that are currently done in text boxes in JavaScript.
Once a freely-available SVG renderer is available, then editing and composition tools for SVG documents should really take off. BTW, I don't count Adobe's SVG viewer because it is restricted to only a handful of platforms and no source is provided.
From what little I understand, the Mozilla SVG effort has been a one man show and entangled in licensing clauses.
It would be really nice if this were all cleared up and a big push into SVG by the Mozilla team were made.
"Provided by the management for your protection."
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.
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.
I've been using TWiki for collaboration notes, and one of its features is a plugin for charting. It manages to draw jpegs and pngs using the perl GD module and the gd library.
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.
http://www.walterzorn.com/index.htm
haven't used it, but the demo is fast and interactive.
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.
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.
First of all, seeing all of these flamebaits means one thing, and one thing only.
I wasn't clear enough earlier. Sorry everyone!
Okay, here's take 2:
And of course the obligatory comments about how SVG is easier to script for. (More compatible: DOM/ECMAScript, etc.)