What would be a good way to create a graphic on a website?
I got a bunch of data in the database. The goal is to present them to the user in an understandable way, and since they represent stock data, there should be a graph there.
Now one question arises, which approach would be better to create a server-side graph dynamically, or let the server just input raw data while letting the client generate the graph? I've seen there are several jQuery libraries for this, flot for example.
I usually prefer to do as little as possible on the client side, but this time I'm wondering: Generating the graph on the client side will result in less server load.
Also, changing some parameter (like displaying data for different bit times) would only require fetching the missing data from the server using ajax and a redraw graph instead of fetching a completely different image. This will give a more flexible interface.
I saw that Google Finance uses flush for their charts, but I would like to avoid that if possible ...
source to share
The client side offers more user experience here. Server-side bitmap creation is pretty weak in this regard, and as you mentioned it adds to your server load.
In that case, I will go to the navy. Browser support is really good, it's not wasteful with client resources, and you can easily provide your users with a few additional features like scaling or activating and deactivating a piece of data. Of course, the graphics look good too.
source to share
How about using the Google Chart API ?
The Google Chart API allows you to dynamically generate charts. To see the Chart API in action, open a browser window and copy the following URL into the address bar:
https://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=Hello|World
Press the Enter or Return key and - presto! - you should see the following image:
Pros of this solution:
- It will not generate more load on your servers.
- It does not include the client.
- The graphs look sexy (IMHO).
Disadvantages of this solution:
- This requires an internet connection.
- You're relying on a third party (but that's Google and they have decent downtime).
- You are submitting information to Google and this could be a problem.
source to share
There are several problems with client side graphics:
- For Javascript / Flash based charts, your clients must have javascript / flash enabled. If your application is already js dependent, this is not a problem.
- The problem, however, is that someday on the line you will receive a request to send reports to customers by email (be it emails or embedded PDFs or whatever you have). Suddenly flash / javascript doesn't help at all, so you end up with the server side build and now either have to support both or refactor your UI.
- Using Google Charts avoids both of the above problems; however, it introduces external dependency. Something that you may or may not want to live with.
If all of the above doesn't scare you, client-side navigation is great, especially interactivity.
source to share
Having extremely powerful JS libraries with processors can actually make it difficult for users to get to work (it doesn't mean that my FireFox 3.5 freezes for 1 minute, and Yahoo Mail - the latest and arguably the best code - does what I never wanted or didn't need to). So, if you can afford server side resources, do it server side.
However, remember to cache the graph images with the same input - this can make the difference between valid and using a DOA server.
At least give the user a "lite" option - ala Yahoo Finance, which allows you to switch to simple no flash charts or Google Maps, which have a simple HTML-only interface.
source to share
I would just find a graphics library that works with your chosen development language and will go with it - unless you have a strong excuse to write your own graphics system.
If you are using Asp.Net the new chart control is probably a safe bet - it generates a chart server (as images)
source to share