Making an interactive 24 hour clock/organizer

[gaptrast]

Hello,

I have just started a project. This little web application will be used to make planning easier for people living around the clock (specifically those interested in polyphasic sleep).
On the website there will be some input fields where users can write their sleeping times and then it shows up in a visual diagram. The diagram is like a pie or doughnut chart diagram. I will also let users put in other things like work, school, or other organized events. This will hopefully make it easier to see what times are good to choose.

Let me give you an example:

This is a beautifully designed diagram (not made by me though), and that is pretty much how I want the generated charts to look like.

The thing is that I do not really know how to make circles and fancy charts in html and javascript. It must be able to change real-time when the users edit data in the input boxes, and prefferably a way to rotate or drag around the sleeping times.

I have done some research and what I (think I) need is:

• Some kind of javascript chart library (http://en.wikipedia.org/wiki/Comparison_of_JavaScript_charting_frameworks) that is customizable and has a doughtnut chart.
• Maybe a own background, and then simply put several pie charts on the top of it?

I jotted down something in GIMP that is not as good as the other one:

What method do you think I should use to achieve this? If I am going to use a charting library, which do you think would fit my needs best?

Thanks

 

[essellar]

If you need interactive, then JS + <canvas> is really your only option. Raphael/gRaphael is relatively tame and capable, but really, really simple, and the Google tools tend to be better than average; you'd need to go to a paid solution to get better documentation. But remember all of that trig from school? You're going to have to understand that again (just sine and cosine, really, but that's enough to be getting on with), or have/create a library that understands it for you. (Still it's better to have some clue about what's going on; it makes it a lot easier to debug things when they're not working the way you expect them to.) (If paid is okay, Fusion Charts is excellent but expensive. More than worth having on a business's server, but maybe a bit much for a hobbyist or a small business.)

 

[gaptrast]

I think you are right about getting knowledge about what is really going on rather than relying on a library. I will try to learn to use the canvas element and maybe I will figure it out