21 Replies Latest reply on Jul 25, 2013 8:53 AM by Peter Kahrel

    How to draw a "pie" in ID CS4

    MarieMeyer Level 1

      I want to draw a "pie" in ID CS4 with a dozen equal pieces, each one being an independent frame so I can give it a color fill and a script label. Can anyone tell me how to do this?

        • 1. Re: How to draw a "pie" in ID CS4
          Peter Spier Most Valuable Participant (Moderator)

          I suspect it would be easier to draw in Illustrator, then copy/paste to ID.

          • 2. Re: How to draw a "pie" in ID CS4
            MarieMeyer Level 1

            Can I do that and yet have the individual segments be frames in ID that I can fill and label for scripts?

            • 3. Re: How to draw a "pie" in ID CS4
              Jeffrey_Smith Most Valuable Participant

              This will not be easy working directly in Indesign without script or plugin, but here is a method. This method will rely on precision, therefore using round numbers for dimensions to make basic pie wedge, then scale completed pie to desired size.

              1. Create a triangle with polygon tool 1 in wide x 1.87 in height.

              2. Create a circle 1 in

              3. Align both shapes to top edge and horizontal center

              4. Move circle up .5 in

              5. Use Pathfinder and Intersect shapes, this will create one pie wedge

              6. Rotate and copy wedge 30 degrees, precisely place point of rotation at top of wedge

              7. Use Object > Transform Again > Transform Again Sequence (11 times)

              • 4. Re: How to draw a "pie" in ID CS4
                Peter Spier Most Valuable Participant (Moderator)

                MarieMeyer wrote:

                 

                Can I do that and yet have the individual segments be frames in ID that I can fill and label for scripts?

                As long as they are closed paths in Illy they should be closed paths in ID after pasting, so it should work.

                • 5. Re: How to draw a "pie" in ID CS4
                  Jeffrey_Smith Most Valuable Participant

                  If you are going to do this in Illustrator, use the Pie Graph Tool, which will create individual shapes for each of the wedges.

                  • 6. Re: How to draw a "pie" in ID CS4
                    jmlevy Adobe Community Professional

                    See here this amazing plugin, from marc Autret

                    • 7. Re: How to draw a "pie" in ID CS4
                      Michael Gianino Level 4

                      Here's another way. It sounds like a lot of work, but it's not really:

                       

                      1. Create a circle (pick the size you need)
                      2. Snap horizontal and vertical guides to the center point of the circle (you need View>Grids & Guides>Snap to Guides to be checked)
                      3. Make a rectangle that is larger than the circle
                      4. Snap the right side of the rectangle to the center of the circle
                      5. Select both objects and go to Object>Pathfinder>Subtract (you now have a half circle)
                      6. Make another rectangle that is taller than the half circle
                      7. Snap the left side of the rectangle to the left side of the half-circle
                      8. With only the rectangle selected, click on the Rotate tool
                      9. While holding the Option key, drag the rotation proxy and snap it to the center of the two guides and release
                      10. When the Rotate window opens, type -30° (for a 1/12th segment) into the field and hit the OK button (if you did it right, the rectangle should have rotated from the center of the half circle)
                      11. Select both objects and go to Object>Pathfinder>Subtract (you now have a wedge)
                      12. Select the wedge and then select the Rotate tool
                      13. If the proxy is not at the intersection of the two guides, hold the option key and drag it there. If the proxy is already there, double-click on the Rotate tool
                      14. With -30° in the field, hit the Copy button
                      15. Hold Option and Command and hit the 4 key to repeat the transform (copy and rotate) once each for the last 10 segments
                      • 8. Re: How to draw a "pie" in ID CS4
                        Eugene Tyson Adobe Community Professional & MVP

                        Draw a circle

                         

                        Put a single line through it

                         

                        Rotate it from the center of the circle - you want 12 divisions and 360/12 = 30

                         

                        So rotate it 30 degrees each time and copy it.

                         

                        Then use the pathfinder to divide the circle by selecting everything and choose the right pathfinder option.

                        • 9. Re: How to draw a "pie" in ID CS4
                          Michael Gianino Level 4

                          Eugene, that's how I would do it in Illustrator, but I only have 5 modes in the ID pathfinder, and none of them do what Illustrator's Divide will do.

                          • 10. Re: How to draw a "pie" in ID CS4
                            Eugene Tyson Adobe Community Professional & MVP

                            I should have checked out InDesign's pathfinder options first #lookbeforeyouleap

                             

                            Surprised! That's shocking.

                            • 11. Re: How to draw a "pie" in ID CS4
                              Laubender Adobe Community Professional & MVP

                              @Jeffrey – I don't think it's possible to do it *precisely* with the Pie Graph Tool in Illustrator (or I missed a feature in the lastest versions of Illustrator).

                               

                              At least I found no way to apply 12 pieces of the cake with a rotation angle of 30°. You can only punch in % values. And 100/12 is a number you cannot apply exactly in that fashion…

                               

                              Instead, I recommend doing it with the drawing tools of Illustrator.

                               

                              Or, better for Marie, with the drawing tools of InDesign!

                               

                              It's not that hard. Harder to explain than to make.
                              Here a step by step tutorial:

                               

                              A. Drawing a segment of your pie
                              Since you want 12 even parts out of a circle, we need a rotation angle of 30° (360°/12 = 30°) added to every part.

                               

                              1. Draw two guides as a hair cross. Could be positioned everywhere.
                              Move your zero point to the center of the hair cross.

                               

                              This is not essential, but will help in the next steps.

                               

                              01_ConstructingAHairCrossWithGuides.png

                               

                              2. Draw a simple, straight line with the pen tool out of the center of the hair cross.

                              Could be any length.

                               

                              02_DrawOutALineWithThePenTool.png

                               

                              3. Duplicate that line with Copy / Paste In Place.
                              Important: The duplicate has to have the exact same position as the original!

                               

                              03_DuplicateWithCopyPasteInPlace.png

                               

                              4. Now select the duplicated line
                              and change the reference point of the line to the left

                              and rotate the line to 30°

                               

                              04_RotateDuplicateBy30degrees.png

                               

                              5a. now change to the direct selection tool (the white arrow tool)

                              and select the left two path points of both lines

                              and connect the two path points
                              (sorry, my UI is in German)

                               

                              05a_ConnectPath.png

                               

                              5b Now close the path

                               

                              05b_ClosePath.png

                               

                              6. Result of closing the path:

                               

                              06_ResultOfClosePath.png

                               

                              7. Draw a circle on top of the triangle.

                              Position its center to exact center of the hair cross like this:

                               

                              07_DrawingACircle_CenterHairCross.png

                               

                              Now you'll get the picture.
                              The intersecting element would be our pie segment.

                               

                              8. Select both objects and use path finder to get the intersecting element:

                               

                              08_PathFinder_Intersect.png

                               

                              9. Result:

                               

                              09_ResultOfIntersect.png

                               

                               

                              B. Duplicate the single segment, rotate with another 30° added.

                              Center of rotation is the upper right corner of your segment.

                              Repeat that 11 times.

                               

                              This is the boring part.

                               

                              So here is a small script snippet that is working on a selection of your individual segment and will do the task for you. You can change the number of duplications easily, if you ever have to do a pie chart with more or less segments.

                               

                              [ ! ] The script assumes, that:

                               

                              1. the center of the pie chart lies in the upper right corner of your segment
                              2. you selected the segement

                               

                              The script is of type ExtendScript (JavaScript).
                              It will run on Mac and Windows.

                              It should run in InDesign CC, CS6, CS5.5, CS5, CS4, CS3.
                              Tested with InDesign CS5.5.

                               

                              var numberOfSegments = 12 ; //Here change the number of segments, if you need.
                              
                              //Some basic checks about the selection:
                              if(app.selection.length === 0 
                                  || app.selection.length > 1 
                                  || app.selection[0].hasOwnProperty("baseline") 
                                  || app.selection[0].constructor.name === "Table" 
                                  || app.selection[0].constructor.name === "Cell")
                                  {
                                  exit();
                                  };
                              
                              var currentTransferReferencePoint = app.layoutWindows[0].transformReferencePoint;
                              var idOfSelection = app.selection[0].id;
                              
                              app.layoutWindows[0].transformReferencePoint = AnchorPoint.TOP_RIGHT_ANCHOR;
                              
                              for(var n=1;n<numberOfSegments;n++){
                                  app.select(app.selection[0].duplicate());
                                  app.selection[0].rotationAngle = 360/numberOfSegments*n;
                                  };
                              
                              //Cleaning up a bit:
                              app.layoutWindows[0].transformReferencePoint = currentTransferReferencePoint;
                              app.select(app.documents[0].pageItems.itemByID(idOfSelection));
                              

                               

                               

                              10. Result after running the script:

                               

                              10_AfterScriptSnippet.png

                               

                              Uwe

                              • 12. Re: How to draw a "pie" in ID CS4
                                Eugene Tyson Adobe Community Professional & MVP

                                Very good stuff - I had a feeling a scripting solution would be posted

                                • 13. Re: How to draw a "pie" in ID CS4
                                  [Jongware] Most Valuable Participant

                                  Or in 3 steps:

                                   

                                  1. save the script in A script to make pies (and more) into your Scripts folder

                                   

                                  2. draw a circle

                                   

                                  3. run the script with values "1,1,1,1,1,1,1,1,1,1,1,1" (that's twelve times '1')

                                   

                                  make-me-another-pie.PNG

                                  • 14. Re: How to draw a "pie" in ID CS4
                                    Laubender Adobe Community Professional & MVP

                                    @Eugene – it's just a part of the solution. Drawing the initial segment is not part of it ;-)

                                     

                                    First I was looking into the other script that was mentioned:
                                    Claquos 2 (Beta) by Marc Autret.

                                    The problem here is, that with that version you cannot:

                                     

                                    1. Make 12 pieces (it's still in beta, so restricted to 8 pieces)
                                    2. Cannot make *exact* even pieces, if they do  fall into an odd percentage value like 100/12.
                                    (#2 is with a big question mark)

                                     

                                    Uwe

                                    • 15. Re: How to draw a "pie" in ID CS4
                                      Laubender Adobe Community Professional & MVP

                                      @Jongware – ah yes!
                                      Something in the back of my head was telling me this was already solved by someone!

                                       

                                      Great script btw.!

                                       

                                      Uwe

                                      • 16. Re: How to draw a "pie" in ID CS4
                                        Laubender Adobe Community Professional & MVP

                                        @Jongware – just another thing:

                                         

                                        the basic difference in geometry between the method I (or other people) presented and the script you have written is this:

                                         

                                        The orientation of the pieces in your script are not rotated individually, because every segment is made from scratch. Good. If one would transform an individual piece of the pie into a text frame the baseline will be in the "default" horizontal position.

                                         

                                        Wheras If one is building a single segment and duplicates/rotates that, the baseline would be rotated too.

                                         

                                        @Marie – put that to your advantage…
                                        err… Marie, where are you?
                                        A different time zone, I guess…

                                         

                                        Uwe

                                        • 17. Re: How to draw a "pie" in ID CS4
                                          Laubender Adobe Community Professional & MVP

                                          Ok.
                                          "Normalizing" a rotated object is no big deal:

                                           

                                          Just add a not rotated object (amaller than the rotated one) on top of it, select both and use the Path Finder with the Add method.

                                           

                                          Then transform the object to a text frame to get the "default" baseline…

                                           

                                          Uwe

                                          • 18. Re: How to draw a "pie" in ID CS4
                                            Jeffrey_Smith Most Valuable Participant

                                            @Jeffrey – I don't think it's possible to do it *precisely* with the Pie Graph Tool in Illustrator (or I missed a feature in the lastest versions of Illustrator).

                                             

                                            At least I found no way to apply 12 pieces of the cake with a rotation angle of 30°. You can only punch in % values. And 100/12 is a number you cannot apply exactly in that fashion.

                                            Illustrator has had graphing tools for some time, and to accomplish the OP's request, there isn't anything new. In the spreadsheet window, just enter the same digit in 12 columns and apply.

                                            • 19. Re: How to draw a "pie" in ID CS4
                                              Laubender Adobe Community Professional & MVP

                                              @Jeffrey – thank you for clarification. :-)

                                               

                                              Got it right now…

                                               

                                              Uwe

                                              • 20. Re: How to draw a "pie" in ID CS4
                                                Laubender Adobe Community Professional & MVP

                                                Now I testet with a pie chart in Illustrator and copy/pasted the result to InDesign.

                                                It's working well, if one un-checks "Prefer PDF When Pasting" in  Preferences/Clipboard Preferences.

                                                 

                                                Uwe

                                                • 21. Re: How to draw a "pie" in ID CS4
                                                  Peter Kahrel Adobe Community Professional & MVP

                                                  The Chartwell font is brilliant for doing pies charts. It does bar charts and other chgart types as well. The fun of OTF fonts!

                                                   

                                                  Peter