In this tutorial we will use Adobe Illustrator to create two types of charts; pie charts and bar charts. Whichever type you choose will depend on the data you want to display. Pie charts are good for showing the relative magnitudes (percentage of the whole group) whereas bar charts are good for comparing magnitudes.
Note: this tutorial was created using Illustrator CS3. However, other than a few changes in screen layout the same techniques can be used in CS2.
i) first open up Illustrator and, since we want to use these charts on the web, we choose Basic RGB Document (CMYK is only used in printed documents).
ii) you will be shown a window in which you can enter details of the chart (such as name, size). You should use pixels as the unit of size because we are creating a chart for use on the web.
iii) you are now presented with a blank workspace with a box of the dimensions you specified in the previous step. Now you have to choose the type of chart to create and we will start with a pie chart (but you can see there are many types to choose from)
Pie Chart
a) select Pie Graph Tool from the list
b) your mouse cursor will change to cross-hairs and you need to left-click and drag a box shape (which will contain your pie chart) until it is the size you want. Release the mouse button and you will see this:
c) you can now enter your data into the small spreadsheet provided. The top row should contain the name of that segment of the circle and the second row should contain the actual magnitude of the data. Note that the cell widths can be dragged so that you can see your text (eg Internet Explorer, below). When your data is all entered click the tick mark (top right) to apply your data to the chart.
d) you now have the basic pie chart. However, it is in greyscale and is not very attractive so you may wish to style it.
e) it is VERY important to notice that initially all the parts of the chart are selected (surrounded by blue lines) and you need to click anywhere away from the chart to deselect everything! Once you have done that you are ready to select individual parts of the chart. To do this you use the Direct Selection tool (top right of toolbar – pink in colour when selected):
f) using this tool, click on one segment of the chart to select only that. That segment is now bounded by a blue line.
g) look for the Colour Swatch tool and select the colour you want that segment to be. The swatch panel is usually denoted by a colour grid icon as shown below. Click your choice of colour and the segment changes to it. Repeat for all segments (select it, change colo, choose next…) and remember to change the colours of the associtaed legend!
h) your chart starts to look better (below).
i) when all the segments are coloured you may want to highlight a particular segment. The usual way to do this is to pull a segment slightly outwards. Once again, to do this you can use the Direct Selection tool (white arrow). Left-click (and hold) on the segment you want and pull it outwards.
j) To add a title or notes to your chart you need to select the Text Tool.
k) Then click where you want to add your text and start typing. There is a also line to to allow you to draw lines.
Note that when you are using the text and line tools there are options along the top of your workspace to change thickness, size, colour etc.
l) finally your chart is finished!
m) choose Export from the File menu and save your work as a jpg file. You can now use it in your blog.
Bar Chart
n) many of the steps for making a bar chart are the same as you used for the pie chart. In this example a horizontal bar chart was selected. Once again a bounding box for your chart is drawn (step b for pie charts), and data is entered (step c). Click the Apply button (the tick symbol) and then start colouring the bars and adding text. In this example the data is for TV show rating in the UK and a horizontal bar chart is suitable so that the show names can be read normally. The finished chart is shown below:
One thing to note is that in this case the legend created is not really needed. However, it seems that Illustrator does not allow you to delete the legend boxes. In order to remove them from your finished chart you simply drag them outside of the workspace you created (the “page” you are working on). That way the boxes are not visible when your chart is exported.
