Convert Doughnut graphics/charts to show appointments and display HTML/CSS.

I have two Radial/Doughnut graphics that I would like to be converted from a static graphic to something which is driven from data (list). There is no need for extensive client/server/database type application, nor is there any need for any admin type facility. I am quite happy to edit the text either directly into a JavaScript object or equivalent (the data will not often change). What is the Concept: ---------------------------------- In both cases the concept is the same. The idea is to show appointments in a doughnut type fashion. In both cases I would expect the data attributes to be: Short Name: DW 1:1 [freetext] Long Name: One to One with David Weir [freetext] Notes: This is when David Weir and I have a catch-up. [freetext] Category Type: Personal [denotes the colour of the square/circle within the appointment] Location: Room 42 [freetext] When: 9:00 – 10:00 [This dictates where abouts on the ring it should appear] Recurrence: Daily {Monthly, Fortnightly, Weekly, Daily} [This dictates which ring it appears on] Graphic 1: Typical Month This graphic displays 3 rings. Inside: Monthly Middle: Fortnightly Outer: Weekly Graphic 2: Typical Week This graphic displays 2 rings Outer: Daily Inner: Weekly In both cases I expect to see the doughnut chats on the left hand side (with the appointments located to the assign ring at the correct place for the day/time. On the right hand side I would like to see all appointments in a simple formatted list. With tool tips. When you click on an appointment in the chart, I would like to scroll/highlight the appropriate appointment in the right hand list. What are the technologies: ------------------------------------ Happy to use any suggested technologies provided I can view the info via a web browser (somehow). The graphics attached are a combination of quick design concepts and some more fleshed out [login to view URL] for you to change some of the designs/colours to suit.