Javascript graphing library to draw a region

Question

As a keen windsurfer, I'm interested in how windy the next few weeks are going to be. To that end, I've been writing a little app to scrape a popular weather site (personal use only - not relaying the information or anything) and collate the data into a single graph so that I can easily see when's going to be worth heading out.

I have the back end working but need a way to display the data. My scraper currently gives me two series of data which tell me how strong the general wind is and how strong it's likely to gust to. What I'd like to do next is display those two data sets as a pair of lines in a graph and shade the region between them.

I was considering using something like the flot library to display the data. The only problem is that I can't see a way to shade an area between two lines?

If anyone has suggestions of how to do this in flot or other libraries or graphing techniques (I have DJango on my server so anything pythonic or javascripty should be fine), I'd be interested to hear them. Ideally this will be a javascript solution to avoid having to serve up images.

Answer 1

Take a look at the Google chart API's. They make this sort of thing pretty easy. Without some example code, I would have a hard time giving you an example, but Google has nice one on the docs.

Answer 2

You should check out Dojo. It looks like it'd be pretty easy for you to do, just plot the bottom line with the same fill color as the background. That should get you the effect you're going for.

http://dojocampus.org/explorer/#Dojox_Charting_2D

Answer 3

I'd use open flash chart, you just have to create a JSON with the data and then you've to all the flashy coolness in your page....

http://teethgrinder.co.uk/open-flash-chart-2/