"Best" way to generate ~500 smallish images, either in JavaScript or server-side C

This is my very first attempt at generating images on the fly.

I want to display around 500 small -- say, 32px X 24px -- 16-color images, each in a table cell. Each 开发者_运维知识库image (as I see it now) is a 2D array of colored pixels, each representing a value furnished by C-language CGI.

The finished, displayed image is a prmitive candlestick graph, each candle one pixel wide, something like: http://www.sellmycalls.com/pics/candle-sample.png

All of the ~500 images want to be available for redisplay every 10 seconds, although:

• only around 30 of these guys show up in the viewport at any instant; and
• the images change only every ~10 minutes.

I can generate the images on any combination of the server and the client. But I need a general strategy to get me started.

What's the lightest-weight (no huge JS lib, I hope), quickest (implementation), fastest (execution), and cheapest (client-side RAM) to get these images displayed?

Thanks!

If you ask me what is the

• fastest
• quickest
• cheapest

I have no dubt about it:

http://code.google.com/apis/chart/

You can delegate all the dirty job to google' server.

And that's not bad at all.

Another option should be to simply use Canvas. Simply draw each candle onto the canvas according to to the values generated by your C CGI. You can fetch those values through a simple AJAX call into the client.

No JS library required. The canvas API is trivial, a few lines of code will generate your images. It should execute fast enough so that the user won't even notice they are generated dynamically (that is 30 images / viewport). And it is not much more expensive than displaying static images for the client RAM and also will not produce any additional load on your server.