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