Want to read Slashdot from your mobile device? Point it at m.slashdot.org and keep reading!


Forgot your password?
Graphics Software

Drawing Graphs on Your Browser? 201

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?"
This discussion has been archived. No new comments can be posted.

Drawing Graphs on Your Browser?

Comments Filter:
  • by TC (WC) ( 459050 ) on Tuesday July 22, 2003 @04:46AM (#6497456) Journal
    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.
  • IE5...not quite (Score:5, Insightful)

    by X-wes ( 629917 ) on Tuesday July 22, 2003 @04:51AM (#6497470)

    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).

    • Re:IE5...not quite (Score:2, Insightful)

      by Anonymous Coward
      IE5+ has too limited an audience to bother with, but Mozilla with SVG is worth the effort?!

      You sir, are incapable of consistant thought.

      You monkey.
      • Re:IE5...not quite (Score:2, Insightful)

        by syrinx ( 106469 )
        IE5+ has too limited an audience to bother with, but Mozilla with SVG is worth the effort?!

        You sir, are incapable of consistant thought.

        And you seem to be incapable of any thought at all.

        Maybe you need this spoon fed to you.

        VML = only on IE5+

        SVG = on any browser with a plugin.

        Let's try that one again, just in case your brain hasn't quite wrapped itself around it.

        VML = not everyone.

        SVG = everyone.

        Get it yet?

        And I'd call *you* a monkey now, but that'd be an insult to many intelligent monkeys out th
        • SVG is in no way "everyone". It runs poorly in IE, and very poorly in netscape. They are just now starting to get SVG working at all in Mozilla, and I doubt it supports a lot of advanced scripting.

          I hate applets, but if you need alot of client side interactivity, I would say Java is the way to go.
    • by rmohr02 ( 208447 ) <mohr.42@os[ ]du ['u.e' in gap]> on Tuesday July 22, 2003 @06:50AM (#6497774)
      I would simply go with SVG. The first time I saw an SVG graphic on a webpage I was asked to download a viewer, and 30 seconds later I saw the image. That's not a real inconvenience.
    • by 4of12 ( 97621 )

      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, Po

    • 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.
    • Maybe VML is good enough for now and when SVG will come along (read: wide native support or plugin deployed), we can move to it smoothly, since it is kind of a superset of VML.

      I agree with the Linux part, but do you think Linux is any threat on the short term to Windows on the Desktop of enterprise networks ? I'm not so sure.
  • by Kris_J ( 10111 ) on Tuesday July 22, 2003 @04:54AM (#6497476) Homepage Journal
    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...

    • By "enterprise application", I take it this is an application with a large number of users (10,00+), but still internal to your company.

      I'd agree with the above post for an external website. About the only two plug-ins that you can reasonably count on people having are Flash and Acrobat Reader. And IE 5+ would limit you to about 90% of the browsing public - you don't want to turn away 10% of your potential customer base.

      However, if the application is internal to your company, requiring a plug-in is very
  • Use ImageMagick (http://www.imagemagick.org/) and do it all server side and save your self a lot of user dissatisfaction. The chances of finding a format that everyone will see is pretty much nil. Just send them GIFs or JPEGs from the server.
    • The guy expressly noted that, as it has to be interactive, static images are not an option.
  • JPGraph and PHP (Score:5, Informative)

    by FruitCak ( 56337 ) on Tuesday July 22, 2003 @05:00AM (#6497492)
    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 :)
  • by stoborrobots ( 577882 ) on Tuesday July 22, 2003 @05:01AM (#6497500)
    Do you need client-side interactivity (vis-a-vis an applet), or do you need a "dynamic image" (as used by most sharemarket websites [yahoo.com], 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...

    • 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/D

  • by DrSkwid ( 118965 ) on Tuesday July 22, 2003 @05:02AM (#6497504) Homepage Journal
    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?

  • by lpontiac ( 173839 ) on Tuesday July 22, 2003 @05:28AM (#6497578)
    .. and that interactivity is hard to achieve in a web browser, maybe this application doesn't belong in a web browser. Just a hunch.
    • Agreed... It is not useful to webify every single application...

      Some apps are just better off as applications than webapps.

      Consider whether the webapp route is really worthwhile in this case. If it is, then you may have to sacrifice interactivity (a little). If it isn't, then use a conventional application, and deploy it...

      Just my $0.02

    • It does exist and is achievable in a web browser. The question is more about "What's the state of the art today ?", or "What's the best alternative for our App ?"
  • by Burb ( 620144 ) on Tuesday July 22, 2003 @05:36AM (#6497599)
    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.

    • OpenSWF.org [openswf.org]

      "OpenSWF.org is the source for information on the Flash File Format. Here you will find file format specifications, sample code, links to 3rd party tools and more.

      SWF is the file format used by Macromedia Flash to deliver graphics, animation and sound over the Internet. Almost 95% of web users can view SWF content without having to install a new plug-in, and over 300 million people have downloaded the Flash player. Macromedia published the specifications for SWF in April 1998. This site has re
  • by Andy_R ( 114137 ) on Tuesday July 22, 2003 @05:37AM (#6497600) Homepage Journal
    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.
  • by Burb ( 620144 ) on Tuesday July 22, 2003 @05:38AM (#6497605)
    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
    • Do I need to mention that Lynx is not our target ? ;-)

      Histograms works the way you describe, that is true, but other things needs to cooperate on the same graph as well...

      Point taken: DHTML might be a reasonnable fallback.
  • by dhk42 ( 586518 ) on Tuesday July 22, 2003 @06:09AM (#6497667)
    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.

    • Java Applets are not slow per se, but the Java plugin is a pain to start. On a laptop a little busy, it can take somewhere around 10 seconds...

      Plus, the first time I clicked on the links, it froze my browser. Granted, some other applets running might have been introducing some crappy threads in there, but welcome to the real world. If we use Java, we share the same JVM with any other Applets our end-user is viewing, and if one gets a dead-lock with the GUI thread, we're also dead.
  • Java is very flexible but slow (to start and run).

    A while back I created a small Java applet that did some minor client-side image mangling. There was a delay of a fraction of a second bringing up the image. Not "slow" by any means. Most of that delay was probably the time it took to download the image from the server.

    The real problem is that you have to stick to what is available to the 1.1 runtime. Yes, that's "1.1" from the previous century, because that's what most Windows users have.

  • We use Corda (Score:5, Informative)

    by pbulteel73 ( 559845 ) on Tuesday July 22, 2003 @06:49AM (#6497768) Homepage
    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.

    • Yes, but it costs thousands of dollars!!!
    • See, I went to the link and it demonstrate exactly what we are trying to avoid. The live deom "2000 Presidential Election Results":

      Every single time you click anything, the screen reloads and it takes 3-4 seconds to get the new graph. The user experience behind this kind of figures is really bad, as I don't keep in my mind an idea of a nice graph even though the graph was nicely drawn, beautifully anti-aliased. But barely usable.

      Try out VML if you're not concerned by IE5 only limitations, and experience t
  • Javascript (Score:4, Interesting)

    by Basje ( 26968 ) <bas@bloemsaat.org> on Tuesday July 22, 2003 @06:57AM (#6497795) Homepage
    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.

  • Same problem (Score:4, Insightful)

    by gazbo ( 517111 ) on Tuesday July 22, 2003 @07:03AM (#6497814)
    We're doing a similar type of thing, but not specifically graphs - arbitrary vector graphics are required, and client side is most definitely required. The route I went with was VML.

    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.

    • Re:Same problem (Score:3, Insightful)

      Even the few that use Macs can presumably view VML. So go with VML and mandate the use of IE.

      FYI, IE for Mac is a discontinued product.

      There's really little point in writing a Windows-only web site. I mean, if you're not going to be multi-platform, why hobble yourself with the web in the first place? A real Win32 app will be much easier for everybody.

      That he wants a web-based product is a good hint he wants multi-platform.

      To add some signal to the noise, I'm facing the same issue, and generating Flas
      • Ah, yes. Forgot about Mac/IE.

        And there is sense in writing web apps for specific environments. First, if you're providing it as a service for hundreds or thousands of people, then you have the ultimate thin client - zero rollout, just a URL. Also, no need to worry about server security or reconfiguring firewalls, as everything runs on Apache and port 80. Also, as with a similar project I'm doing, if you're mostly interested in showing a load of data, then a web browser is an ideal platform to do it in;

    • Flash is on more computers than you may think. The Flash Player ActiveX Control is bundled with IE and Windows.

      Microsoft's DLL Help Database [microsoft.com] will tell you which versions of which DLLs shipped with which Microsoft products. Search for "swflash.ocx". Very helpful!

  • by DeadSea ( 69598 ) * on Tuesday July 22, 2003 @07:03AM (#6497815) Homepage Journal
    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...

  • Here's a couple ill-thought-out ideas:

    In considering possible solutions, I would take a crack at PDF. I've never done PostScript programming, but as I understand it, you can create vectors, arcs, and splines pretty well. Actually, since I don't have a good graph-generating package myself, I may just look into this ... hmm.

    For my own use I would also look into CAD software formats ... what was it, DXF? I gather that's pretty simple for vector stuff, but it's not readily supported in browsers.

  • I think it depends what you mean by "Enterprise application".

    If you mean this is for a company intranet or something where you can control the browser they're using, then having to install a plugin for SVG or Flash wouldn't seem to be a problem. Neither would dictating IE5+, although you might find that limits the companies options later.

    If you mean it to be "professional looking" for as many customers as you can, then obviously going IE only is about as short sighted as you can get (remember Mac users ar
  • Why not check the HTTP Accept header? If SVG's in there, use it. If VML's in there, use it. Etc.
  • Ploticus (Score:2, Informative)

    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 notif
    • How is that interactive ? The whole point of the story is to ask for something interactive. If we have to generate images on the server side, number of libraries are out there to help us...
  • Argh - way to many 'but java applets suck' posts already. They do. Wrong tool for the job. Just about any servlet textbook will give an example where an image was created on the server side, set the appropriate response type, and stream it back to the user. As long as you are creating the image on the fly, there is nothing stopping you from also creating an image map/html that gives you user interactivity. Odds are post/re-paint will be enough. Take a look at mapquest.com or most interactive maps that p
  • Is IE5+ a wide enough target for an enterprise application?
    Google sees very little else. [google.com]
  • Don't forget that the Batik [apache.org] SVG toolkit includes a Java Graphics2D class that outputs to SVG. This means roughly that any class that draws stuff to the screen can be quickly tweaked to draw the same stuff to SVG. If you find a pleasing Java graphing package whose source is open, you could use it to make SVG graphs on the server. (I assume when you claim that java is slow, you are referring to client startup or something.) Just remember to gzip the output stream because svgz documents are about 20-30% the si
  • first the word "ENTERPISE" is a pet peeve of mine.
    exactly what does it mean?
    as far as I can tell, its supposed to mean high end software with every feature possible and a much lower than average bug count.

    but that dosen't tell you if ie5 is a large enough target market, and itdoesn't tell you if a plugin is acceptable to use.

    If you have 100% control over the machines you will be installing on then yes ie5 is an aceptable taget.

    it is always acceptable to expepect the user to intall a
    plugin if
    1. your softw
  • Take a look at www.sodaplay.com, or news.bbc.co.uk.
    Tell me again that Java applets are too slow.
    Try to reimplement those applets in Flash, then tell me
    • Java Applets are not slow per se, but the Java plugin is a pain to start. On a laptop a little busy, it can take somewhere around 10 seconds...
    • Plus, the first time I clicked on it, it froze my browser. Granted, some other applets running might have been introducing some crappy threads in there, but welcome to the real world. If we use Java, we share the same JVM with any other Applets our end-user is viewing, and if one dead-lock with the GUI thread, we're also dead.
  • http://www.walterzorn.com/index.htm
    haven't used it, but the demo is fast and interactive.
  • Just use a java whiteboard applet. They are all over, search google.
  • by yelvington ( 8169 ) on Tuesday July 22, 2003 @03:26PM (#6502736) Homepage
    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.

  • Two options we use are
    JFreeChart (http://www.jfree.org/jfreechart/index.html), which is totally serverside generated. Not sure what you mean when you say you need interactive charting - we let the user spec some params and toss them a graph.

    On the other side of the spectrum we also use
    SpotFire (http://www.spotfire.com/) which is not at all free, but which is REALLY powerful. Scientists and statisticians seem to love it...
  • Since the formats for a .swf file are publicly available from Macromedia.com or openswf.com and since people and companies outside of macromedia have written software that creates and plays .swf files, how closed is closed? Is it the fact that the format is actually owned by someone and enforced by a license?

    If so, we might as well say that Linux is a "closed technology" because of the GPL.

    If we have to have FUD, can we at least keep it off the main page?
  • Flash is probably over kill and a closed technology.

    Flash isn't overkill at all. Except for sound. This is essentially the sort of thing it's designed for: to quickly render vector graphics. Notably, it's got a far larger deployment than SVG, Java/Javascript, or VML. Also, because the viewer is closed, it's both compliant with its own standard, and relatively stable. Moreover, it's ubiquitous; it ships with pretty much everything, and can be downloaded in a form appropriate to nearly every major web
  • So in summary... (Score:3, Informative)

    by darnok ( 650458 ) on Tuesday July 22, 2003 @10:32PM (#6507678)
    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.

"Mach was the greatest intellectual fraud in the last ten years." "What about X?" "I said `intellectual'." ;login, 9/1990