Question

I have been using jfreechart to create Gantt chart and even managed to add mile stone to it. I am also able to show these charts dynamically on the web page.

But now I want to add more interactions to the chart so I need some kind of client side thing. I checked about jsgantt, it works fine in general and I tried to extend it to suit my own requirements. I gave it up because there are HTML CSS styles everywhere in the codes which make it hard to follow – the author claims this is for better cross-browser support but the cross-browser behavior is still a problem: the text of the tree does not align properly with the chart itself on Firefox.

I am now thinking about doing it from ground up but not sure where to start with. There seem to be several choices here:

1. Javascript, HTML and CSS – using table and background color to format charts which is actually the jsgantt way.
2. HTML5 Canvas and Javascript – not supported by old browsers and not DOM friendly.
3. Java applet – not sure.
4. SVG and Javascript – never worked before.

Could anyone give me some advice out of your experience regarding the choice. Thanks!

Answer 1

Firstly, ask yourself what browsers and/or platforms you need to support, because the answer to that question will determine which route you go.

As you say, Canvas is not supported on older browsers, so that will be a problem if you need to support them. There are polyfill hacks to add canvas support to old versions of IE, but it’s very slow.

SVG is also not supported on older versions of IE. However, in this case there is a good fall-back solution, as IE has supported an alternative vector format called VML since IE5.5. Several JS libraries, such as the excellent Raphael support both SVG and VML, depending on the browser they’re running in, allowing you to create cross-platform vector graphics very easily.

Given the above, it’s clear that SVG (with VML fallback) is a very good bet. The only down-side with SVG is that Android v2.x doesn’t support it. v3 and v4 do support it, but the majority of Android devices out there today are still running v2.x.

So for the time being, if you need to include mobile support, don’t use SVG. However this picture will change rapidly, and I would expect to give different advice in a year’s time. And if you’re not worried about Android users, then I would definitely say go with SVG now.

A Java applet is a bad idea. This will definitely break in a lot of mobile environments, and will run painfully slowly on others. Applets have very much fallen out of favour, because they take excessive processing resource, and also often have an awkward user interface disconnect between themselves and the rest of the page they’re sitting on.

Similar things could be said about Flash and ActiveX. If you’re going to go down this route, Flash is probably the safest option, rather than a Java applet, but of course Flash doesn’t run on iOS devices.

So with all the above, it becomes clear that if you want a completely clean solution that is fully cross-browser and cross-platform, then you need to work with pure JS, HTML and CSS. This isn’t the burden it sounds, particularly for a chart like a Gantt chart where everything is horizontal and vertical lines and boxes. You don’t even need to use an HTML table for it — in fact, I’d strongly recommend against using tables, as they do introduce cross-browser quirks. Just use <div> elements for everything, with careful positioning and layout, and you’ll be fine.

Whatever you go with, if you want to make it interactive, I strongly recommend using jQuery to handle the clicking and dragging, moving and resizing. It can be done in pure JS, and it can work well, but it’s a lot of work, and jQuery makes it a lot easier.

Hope that helps.