Creating a donught shaped pie chart with javascript elements

Question

Good morning chaps,
We recently built our new company website which we're happy enough with. However one element we tried to capture was an interactive donught shaped pie chart, using javascript to click on each seperate section.
The end result can be viewed at;
http://insight247.co.uk/index.php?page=aboutus
You'll notice imemdiately that the part that's a little off is the text which sits in each section. IS there an easier way to combine the graphic, text and javascript to achieve the effect we're looking for?
Many thanks to all responses.

Answer 1

Stephen,
There are a few strange parts: the irregular text, the irregular shapes of the underlying ring parts (which do not have consistent widths at the gaps), and the outer glow (or whatever) which correponds to a full ring on the inside but partially to separate objects on the outside.
IS there an easier way
Maybe not easier, but more accurate; the specific appearance is somewhat demanding.
To get the right shape of both ring parts and letters and different choices concerning the outer glow, you may (Smart Guides are your friends):
1) Create a fill/nostroke rectangle with the same height as the ring parts and an arbitrary length, then Object>Transform>Move a copy by the length, then Ctrl/Cmd+D to repeat 4 times;
2) Select all six rectangles and in the Brushes palette flyout tick New Brush, select Art Brush with default settings;
3) Create a 1pt stroke/nofill circle corresponding to the middle of the ring parts where the text bits are supposed to be, apply the Art brush to it, Object>Expand Appearance, and move the circle to the top in the Layers palette, above the Group;
4) Direct Select each of the 6 ring parts and apply the desired colour (you may rotate later, see below);
5) Select the stroked circle and with the Scissors Tool click where the ring parts meet (Smart Guides say intersect except at the sides where they say anchor) so you have 6 circle parts to match the ring parts, then select the 4 circle parts that are not at top and bottom and Object>Path>Add Anchor Points so you have a centre point for each of them (you had one already at top and bottom);
6) Select one of the circle parts and with the Path Type Tool click on the centre point, then type the text bit and in the Character palette adjust the Baseline Shift once and for all (you may need to tick Show Options in the flyout);
7) Repeat 6) for the other circle parts (except the Baseline Shift);
8) Select the ring parts group and Effect>Stylize>Outer Glow, adjust the colour (black) and settings to make it look as desired;
9) With the Direct Selection Tool click where two ring parts meet (avoid the Path Type) to select an end segment and Ctrl/Cmd+C+F+X+F to create a straight stroke/nofill path at the very top of the stacking order, then change the Stroke Weight to the desired width of the gap between ring parts and change the Colour to white;
10) Repeat 9) on the opposite side of the circle, select both 9) and 10) and rotate copies twice by 60 degrees, group all;
11) Rotate everything by 30 degrees to amtch the angles of the image.
Now you have the final appearance with white gaps. If you want to have gaps in the same colour as the background, you may:
12) Select everything and in the Appearance palette flyout tick Make Opacity Mask, with Clip unticked and Invert Mask ticked.
If you want to hide the outer glow at the gaps at the outside (as in the image) or at the inside or both, you may extend the lines in 9) and 10) at either or both ends.