Skip navigation
Currently Being Moderated

Creating a donught shaped pie chart with javascript elements

Jun 18, 2013 12:45 AM

Tags: #illustrator #text #javascript #chart #pie

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;


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.

  • Currently Being Moderated
    Jun 19, 2013 11:09 AM   in reply to stephensmith1984



    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.

    Mark as:
  • Currently Being Moderated
    Jun 20, 2013 1:14 AM   in reply to stephensmith1984

    You are welcome, Stephen. I look forward to your findings.


    The instructions should work regardless of version.


    Depending on version, some of the things may be done differently/more easily in themselves, such as just using a compound path for the whole ring and applying Live Paint to colour the different parts after creating independent dividers (instead of 1) - 4)), but then you would have to create and place those dividers from scratch instead of just using the end segments (as in 9) - 10)), and the division of the circle for the texts (as in 5)) would have to be done afterwards; and the option of just creating long dividing lines thorugh the centre would split the outer glow both at the inside and outside, requiring more steps to give the outer glow options.


    If not for the specific features, you could start by using the Polar Grid to have both the circles and long dividing lines, but then you would have to choose the number of Concentric Dividers to match, and you would have to extend the Radial Dividers because they are inherently too short.

    Mark as:
  • Currently Being Moderated
    Jun 20, 2013 3:26 AM   in reply to stephensmith1984



    Here are some images, referring to the steps (trying to show as much as possible, but certain things (such as the 6 parts of the Art Brush in 2) are invisible):



    Mark as:
  • Currently Being Moderated
    Jun 20, 2013 3:37 AM   in reply to stephensmith1984

    You are welcome, Stephen.


    I still hope you will post your findings. There might also be some choices that require special solutions.

    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points