What would be a good way of creating graph on a website?

Question

I got a bunch of data in a database. The goal is to present them to a user in a readable way, and since they're stock-data, there needs to be a graph there.

Now it brings one question: which approach would be better, to create a graph on a server side dynamically or let the server just push raw data, allowing the client to generate graph? I saw there are some jQuery libraries for doing this, flot for example.

I usually prefer to do as little as possible on the client side, but this time I wonder: generating the graph on client side would produce lower server load.

Also, changing some parameter (like displaying data for bit diffrent timespan) would require only to fetch missing data from server with ajax and redraw graph, instead of fetching completly diffrent image. This would give a more responsive UI.

I saw that Google Finance uses flash for their graphs, but I'd like to avoid it if it's possible...

Answer 1

Having extremely CPU heavy JS libraries can actually hamper user experience (nothing like having my FireFox 3.5 freeze up for 1 minute while Yahoo Mail's latest and supposedly greatest code does something which I never wanted or needed for it to do). So, if you can afford server side resources, do it on a server.

However, make sure to cache the graph images with the same input data - it may make a difference between acceptable and DOA server utilization.

At the very least, allow user a "lite" option - ala Yahoo Finance which allows you to switch to simple non-flash graphs or Google Maps that has a lite HTML-only interface.

Answer 2

If the users are customizing what data is displayed in the graph, I might consider drawing the graph on the client side. If the graph is going to be relevant to more than one user, I'd definitely generate it once on the server side and cache it for everyone.

Answer 3

Also depends on how important it is for your users to see the graphs, and whether they are in a controlled environment. If you can not be sure they will have javascript enabled, better generate the graphs server side.

Answer 4

There are several issues with client side charting:

1. For Javascript / Flash based charts your clients must have javascript / flash enabled. If your application is already js-dependent that's not a problem.
2. What is a problem, though, is when sometime down the line you'll get a requirement to send reports to customers via emails (be they HTML emails or embedded PDFs or what have you). Suddenly flash / javascript are no help at all, so you end up implementing server side charting and now either have to maintain both or refactor your UI.
3. Using Google Charts avoids both of the above issues; however it introduces an external dependency. Something you may or may not want to live with.

If all of the above don't scare you, client side charting is great, especially the interactivity of it.

Answer 5

The client-side offers more opportunities for the user here. Generating a bitmap on the server is pretty lame in that regard, and as you mentioned, it adds to your server load.

I'd go for flot in that case. Browser support is really good, it isn't wasteful with client resources, and you can easily give your users a couple of extra features like zooming in or activating and deactivating part of the data. Of course, flot graphs also look quite nice.

Answer 6

I'd probably just find a charting library that works with your chosen development language and go with it - unless you have a strong justification for writing your own charting system.

If your using Asp.Net then the new charting control is probably a safe bet - it generates charts server (as images)