Useful Tips

Creating 3D charts with iLLustrator

Pin
Send
Share
Send
Send


When selected in the field Toure (Type) section Graph options (Chart Options) dialog box Graph type (Chart type) pie chart buttons (eighth button on the left) group Options (Options) appears in the form shown in Fig. 12.16.

List Legend (Legends) offers options for the location of legends:

  • No Legend ( Do not post) - entered texts of legends are omitted,
  • Standard legends (Standard) - the legends are located in a column outside the diagram itself (the default option),
  • Legends in Wedge (In sectors) - the legends are located on the diagram itself. In this case, it is necessary to show increased attention to possible coincidences of the color of the sector and the text of the legend.

Fig. 12.16. Group Options section Graph options dialog box Graph type for pie charts

In the list Position (Position), you can choose how to display multiple pie charts (if the data table has more than one row):

  • option Ratio (Proportional) - the size of the diagrams is determined in proportion to the data,
  • option Even (Evenly) - the size of the diagrams is determined with equal diameters,
  • option Stacked (One above the other) - one diagram is located on top of the other, the dimensions of the diagrams are determined in proportion to the data.

In the list Sort (Sort), you can select the option to display the data in a circle in a clockwise direction (top to bottom).

1. Creating a schedule

Launch the Pie Graph Tool software component. This can be done by clicking on the free working area. When a special menu is displayed on the screen, you just have to set the required parameters for the chart. For example, 200x200px:

Working with a data table

In the image below, you can see a special table used by the software to create a future chart. Fill out our table in accordance with the example, and then confirm their application by setting the appropriate checkmark in the upper right corner. Now the table can be collapsed or completely closed.

2. Ungroup the chart

In order for each individual sector of the chart to get its own color and type of fill, you need to use the ungroup function. Having selected the whole diagram, you will need to execute a sequence of commands Object> Ungroup, you can also use the keyboard shortcut Ctrl + Shift + G. After that, a warning should be displayed on the working screen, according to which the user will no longer be able to change the shape of the object or its data after completion of the required procedure. A similar message may also appear in the English version, in any case, you will need to click Yes. Then it remains to run the Ungroup command again to finally divide the diagram into separate elements. Now each sector can be assigned a color and get rid of the stroke.

3. Using the Extrude & Bevel component.

Having selected any part of the object, go to the menu and apply the combination of the commands Effect> 3D> Extrude & Bevel.

Auxiliary menu items Extrude & Bevel.

When, by default, the program does not display the complete set of commands for this menu, you can always use the More Options tab. This will allow the designer to twist the control cube in different directions to manually set the rotation angles of the three axes of the object. The thickness of the fragment, also known as Extrude Depth, should be approximately 20 pt. At this design stage, you can also insert a light source by selecting the New Light tab. An example of use can be seen in the picture below:

4. The formation of a new graphic style

Under the selection should still be the element you have selected previously. Go to the Graphic Styles palette, where you need to find the New Graphic Style button, which will allow you to create a completely new style based on it. You can start the palette using the special context menu Window> Graphic Styles or using the key combination Shift + F5.

5. Using a new style.

After the above points, you should deal with the remaining two sectors, highlighting them simultaneously. To do this, click on the icon of the new style that we just created. So it will be applied to the whole chart.

After performing all these procedures, the user can only align the elements of the diagram. This can be done most conveniently through a software component called the Selection Tool. Here is such a nice three-dimensional diagram we should get in the end:

Additionally:

Using a similar method, you can draw any other diagram. For practice, you can try to create an object yourself, which is shown in the figure below:

Dear users, we want to inform you that some anti-virus programs work falsely on the distribution kit of MediaGet, considering it to be infected. This software does not contain any malicious programs and viruses, and many of the antiviruses just warn you that it is a downloader. If you want to avoid such problems, just add MediaGet to the list of trusted programs of your antivirus program.

Having selected the necessary version of the program and clicking on the link, the distribution kit of the MediaGet application is downloaded to your computer, which will be located in the “Downloads” folder for your browser. We find this file and run it.

Next, the installation of the application begins. The program offers you to select a folder for saving. Choose any folder convenient for you or create a new one. Click OK

In the next window, click the "Continue" button, we accept the user agreement. Next, the application is installed, which takes some time.

After installation, the application starts and the download of the program you have chosen automatically starts. You can find the downloaded files in the folder that you selected to install the MediaGet application.

Please note that the provided software is laid out solely for personal use and review. All files available for download are free of viruses and malware.

What is a chart?

A diagram created in Illustrator is a collection of grouped objects that can be thought of as ordinary vector objects. This means that you can change, move and transform all available parameters of objects. The unlimited ability to modify the chart allows you to get a real masterpiece from the original version (it should be admitted that it does not make much impression) and achieve a unique result.

It should be borne in mind that after executing the command Oungroup (Ungroup) from the menu Object (Object) editing diagrams as a whole becomes already impossible. In addition, when you enter new input data, the chart is automatically rebuilt, and this often causes unwanted changes in the appearance of the chart. Therefore, the ungrouping of diagram elements and work on its appearance should be carried out at the very last stage.

Chart types

Illustrator provides a group of tools for working with charts. Graph tool inside which are the tools for creating nine types of diagrams:

  • Column (Vertical bars) - a regular histogram that displays the values ​​of various parameters,
  • Stacked column (Vertical stack) - a histogram with accumulation, which reflects the contribution of each parameter to the total amount,
  • Bar (Horizontal stripes) - a histogram, the columns of which are located horizontally,
  • Stacked bar (Horizontal stack) - a histogram with accumulation with a horizontal arrangement of columns,
  • Line (Linear graph) - a linear diagram, the task of which is to display the dynamics of discrete values ​​of a parameter at certain time intervals,
  • Area (Additive graph) - a chart with areas of accumulation, showing the change in both the total amount and the influence of individual values,
  • Scatter (Scatter plot) is a scatter plot that can be used to display data deviating from a value,
  • Pie (Pie chart) - A pie chart that displays the percentage of each value relative to the total,
  • Radar (Radar) - the so-called spider diagram, which is usually used to display comparative values ​​in time or by category.

Fig. 1. Toolbar with activated Graph Tool group

Fig. 2. Types of graphs that can be built in Illustrator

At first it might seem that nine types of diagrams - this is not too much, but this is not at all - the variety of diagrams that can be built on their basis can satisfy the most demanding designer. The number of possibilities is so great that it is completely unrealistic to consider them within the framework of the article, so we will focus only on the main and most interesting points.

Chart creation

The technology for creating a simple diagram is not difficult. First, you need to select the appropriate tool to build the type of chart you want on the toolbar, then outline the rectangular area that the chart is supposed to occupy, enter data (not only numerical values, but also labels based on which the signatures are created) in the table that opens and click on the button Apply (Apply).

Fig. 3. The initial stage of data entry in the construction of the chart

Data input

Data for the chart can be entered directly in Illustrator, either imported or copied through the clipboard. It should be borne in mind that each type of chart has its own characteristics of entering labels and numerical values:

  • in charts Column and Stacked column numerical data is entered vertically, and labels are entered horizontally, in diagrams Column positive and negative values ​​are possible, while Stacked column - only positive or only negative,
  • in charts Bar and Stacked bar numerical data is entered horizontally, and labels are entered vertically, Bar charts may have both positive and negative values, Stacked bar - only positive or only negative,
  • the chart Line numerical data (a combination of positive and negative values ​​is possible) is entered vertically, with each data column being interpreted as a separate line of the chart,
  • to build a chart Area at least two lines of data are required - they can be either positive or negative, each data line is interpreted as a separate filled area,
  • the chart Scatter vertical values ​​are entered in the first column, and horizontal values ​​in the second. In this type of diagram, both axes have a "measuring" character, therefore, it has no categories. If the first column is occupied by labels, then it is ignored, and the data from the second column is interpreted as data for the Y axis,
  • the chart Pie enter only one row of data - only positive or only negative, when you enter more lines for each row, a separate diagram of a smaller size is formed,
  • when plotting Radar labels for the axes are entered in the first column, and numerical data in the following columns, each label is interpreted as a separate axis, and each numerical value is marked on its numerical axis and intersects with others, forming a kind of web.

First of all, consider the option of manual data entry and for example, try to build a diagram of the type Column. On the toolbar, select this type of chart, draw a rectangular area for the chart, enter numerical data for the columns themselves, click on the button Apply (Apply) and close the data table. As a result, you get a chart without captions and a title.

Fig. 4. Table with entered numerical values

Fig. 5. The initial view of the chart

The chart area can be defined in another way - you should select the type of chart in the tool palette, double-click on the work area and enter the values Width (Width) and Height (Height) in the window Graph (Diagram).

Fig. 6. Sizing a chart

It is not necessary to enter data for the chart manually - they can be copied from other programs working with tabular data, for example, from Excel, through the clipboard or imported. Select the whole chart with a tool. Selection (Selection), call up the data table with the command Data (Data) from the menu Object => Graph (Object => Chart), switch to the existing data table, copy the data without headings to the clipboard in the usual way, go back to Illustrator, place the cursor in the table on the first cell of the first column and paste the data from the clipboard with the command Edit => Paste (Edit => Paste). Click on the button Apply (Apply), and then the diagram will change, but not at all as we would like - instead of being in the legend, the data labels will be under the columns of the horizontal axis. To correct the situation, transpose the rows and columns by clicking on the button. Transpose row / column (Transposition of rows / columns) and then again on the button Apply (Apply).

Fig. 7. Table for copying data through the clipboard

Fig. 8. Chart view with data copied through the clipboard

You can go the other way and import the data. But in this case, you will have to save them in a text file first, taking into account certain rules: the values ​​of each cell in the row should be separated using tabs, each row should end by pressing Enter only a dot can be used as a separator of the integer and fractional parts. To import data in a dialog box Graph data (Chart data) click on the button Import data (Import data) and in the dialog that opens, specify the data file.

Highlight Chart Elements

As noted above, the diagram constructed in Illustrator is a set of vector objects to which you can apply almost all the actions that are valid with respect to vector paths. This allows you to achieve an effective design of the chart.

To change the parameters of group elements, for example, the first group of columns, they are selected using tools Group selection (Group selection in a group): one click on any of the elements of the group selects this element, and another click - all elements of the group. You can also select elements with a tool. Direct selection (Partial selection) when the key is pressed Shift, but it will be slower, since you will have to click on each element of the selected group.

Adding Legends and Categories to a Chart

To enter data that must be selected in a legend or categories (they are called labels), there are certain rules:

  1. Data for the legend is entered horizontally in the very top row, and data for categories is entered vertically in the first column. An exception is the Scatter chart, in which categories are not used.
  2. If both the legend and the categories appear in the diagram, then the upper left cell of the table is not filled.
  3. Labels consisting only of numbers are enclosed in quotation marks - otherwise they will be perceived by the program as numerical data. For labels that include letters and numbers, quotation marks are not required.
  4. To break the text of labels into several lines at the place of line division, you must put the vertical bar "|".

Let's go back to the diagram in fig. 5 and try to give it a more attractive look, taking into account the above rules. First, add a legend to it, for which you need to select the entire chart with a tool Selectioncall the data table with the command Data (Data) from the menu Object => Graph (Object => Chart), select the previously entered numerical values ​​with the mouse, cut them to the clipboard with the command Edit => Cut (Edit => Cut), move the mouse to the first column of the second row and paste the data using the command Edit => Paste (Edit => Paste). As a result, the first line will be freed, and in it it will be possible to enter data for the legend. Click on the button Apply (Apply) and you will see the diagram shown in fig. 10.

Fig. 9. Table supplemented by data for the legend

Fig. 10. Chart with a legend

To supplement the chart with horizontal axis captions or categories, select all the table data again, cut them to the clipboard and paste in the first cell of the second column, and manually enter the category values ​​in the first column. Please note that numbers are used as categories, so enter them in quotation marks. The result will be a diagram presented in Fig. 12.

Fig. 11. Table supplemented with data for categories

Fig. 12. Chart with categories on the horizontal axis

If you are not comfortable with the location of the legend on the chart, this is not difficult to fix. You can pre-select the entire chart with the tool Selectiontake advantage of the team Object => Graph => Type (Object => Chart => Type) and enable the checkbox Add Legend Across Top (Add legend to the top) (Fig. 13 and 14). And even if such a variant of the legend does not look very successful, then, taking into account the fact that all objects of the diagram are vector, we can separate the legend with its corresponding signatures using the tool Direct selection when the key is pressed Shift and move it as needed, for example as in fig. fifteen.

Fig. 13. Graph Type Window

Fig. 14. Chart after the first legend move

Fig. 15. Chart after the second legend move

Chart color scheme

Выделите инструментом Group Selection столбцы, соответствующие одному из данных, и установите подходящую заливку в окне Fill. Аналогичную операцию проведите в отношении оставшихся столбцов. Возможно, что полученный результат будет напоминать рис. 16.

Fig. 16. Вид диаграммы после изменения заливки столбцов

Дополнительно можно наложить на столбцы подходящие эффекты, например в рассматриваемом примере к ним были применены эффекты Inner Glow (Внутренний свет) — командой Effect=>Stylize=>Inner Glow (Эффект=>Стилизация=>Внутренний свет) и Drop Shadow (Наложение тени) с помощью команды Effect=>Stylize=>Drop Shadow (Эффект=>Стилизация=>Наложение тени). The modified diagram is shown in fig. 17.

Fig. 17. Chart view after applying to effect columns

It is worth noting that the overlay effect Drop shadow to get the shadow is optional - there is another way. To use it, select the entire chart with the tool Selectionopen command Type (Type) from the menu Object => Graph (Object => Chart) and in the window that opens Graph type (Chart Type) check the box Add drop shadow (Add shadow overlay, Figure 18). The result is presented in fig. 19.

Fig. 18. Graph Type window

Fig. 19. Chart after applying shadow

Editing chart text elements

The most important component of diagrams is text. To change the parameters of individual text blocks, you need to select them similarly to columns using the tool Group selection in two clicks or tool Direct selection when the key is pressed Shift.

Then call the palette Character (Symbol) team Window => Type => Character (Window => Type => Symbol) and change the font as needed.

Fig. 20. Change the font size (chart and palette Character)

Chart Type Change

In the first experiments of constructing a diagram, it is far from always possible to successfully select the desired type of diagram, which would make it as effective and informative as possible. However, the program Adobe Illustrator makes it quite easy to switch from one type of diagram to another - just select the entire diagram with the Selection tool and open it with the command Object => Graph => Type (Object => Chart => Type) window Graph type and set another type (fig. 21 and 22).

Fig. 21. Graph Type Window

Fig. 22. The result of changing the type of chart

At the same time, it should be borne in mind that before making a final decision regarding the type and shape of the diagram, it is better not to rush to design it (change color, use fills, apply effects, and also transform the vector elements of the diagram themselves). The fact is that after changing the type of chart, some of these actions may need to be repeated.

Change Column Width

For an example we will take as a basis the diagram in fig. 23, open the window Graph type and consider the principle of creating overlapping columns. To this end, change the parameter values Column width (Column Width) and Cluster width (Band Width) (Fig. 24 and 25). The result obtained is shown in Fig. 26. With this setting, the red columns overlap the columns filled with the gradient, however, you can do the opposite, turn off the window Graph type check box First column in front (The first column to the foreground, Fig. 27). When creating a type chart Bar overlapping columns can also look spectacular, especially if the length of the columns in the foreground is always less than the length of the columns in the background.

Fig. 23. Source chart

Fig. 24. Graphic illustration of assigning Column Width and Cluster Width

Fig. 25. Changing the column parameters in the Graph Type window

Fig. 26. Chart after adjusting column width

Fig. 27. The result of highlighting the columns with gradient fill

Fig. 28. Bar Style Chart Option with Overlapping Columns

Change marker length

In some cases, it may be useful to add a grid to the diagram, which is constructed by increasing the length of the existing separation markers. For clarity, first convert the working diagram (see Fig. 23) to Fig. 29, transporting its columns and rows. By the way, note that after such a radical change in the chart, you will have to deal with the issue of filling the columns again (that's why you should not put a gloss ahead of time). Select a chart, use the command Object => Graph => Type (Object => Chart => Type), select the option from the drop-down list Category Axis (Category axis) and for the parameter Length (Length) set option Full width (Full width). The result will be the appearance of a dividing line between the columns of the first and second categories (Fig. 30 and 31). Then reopen the window Graph type, set the option in the list Value axis (Axis of values) and again maximize the length of the axis. The result is shown in fig. 33. If necessary, you can do the opposite, that is, completely abandon the markers, setting in both cases the value None (No), .

Fig. 29. Chart after transporting columns and rows

Fig. 30. Change the length of the vertical separation markers

Fig. 31. The chart after adjusting the length of the vertical markers

Fig. 32. Changing the length of horizontal separation markers

Fig. 33. Chart after adjusting the length of horizontal markers

Fig. 34. Chart after the complete removal of markers

Adjusting the axis value

In addition to the possibility of changing the length of markers in the window considered above Graph type on the tab Value axis (Value axis) There are many more useful settings. You can, for example, adjust all the reference values ​​set on the axis, and the interval between them. To do this, enable the checkbox Override calculated values (Setting calculation of values) and adjust the parameters for changing the reference values ​​in accordance with the task, for example, as in Fig. 35. The result is shown in Fig. 36.

Fig. 35. Changing the parameters for calculating axis values

Fig. 36. Chart after adjusting axis values

In addition, the so-called prefix (Prefix) and / or suffix (Suffix), which increases the information content of the chart. For example, add a suffix, and the diagram will become approximately the same as in Fig. 38.

Fig. 37. Adding a suffix to the axis value

Fig. 38. Chart after adding a suffix

Then, to make it easier to navigate, we add horizontal dividing lines as described above. It can be seen that the lines created by default are too thick. To reduce their thickness, select all lines with two clicks using the tool Group selection (Group selection in a group) and in the palette Stroke (Border) Reduce the width of the border, for example, to 0.1 pixels. The diagram will take the form as in Fig. 40.

Fig. 39. The original diagram with dividing horizontal lines

Fig. 40. The diagram after reducing the thickness of the dividing lines

And finally, bring the chart fill to some unified style, for example, as in Fig. 41 or 42. Such effects can only be achieved manually, sequentially highlighting with a tool Group selection appropriate columns and setting the desired fill option. If you use gradient fills, you will have to create them (or use the built-in ones - they are in the folder Presets Gradients), and solid fills with suitable color transitions can be taken from some library Windows => Swatch Libraries (Window => Library collection) - in this example, colors from the library were involved Pastels. In addition, in the diagram presented in Fig. 42, we abandoned the rather rough shadow set in the window Graph type, in favor of the shadow obtained by applying the effect Effect => SVG Filters => AI BevelShadow_1.

Fig. 41. Gradient Chart

Fig. 42. Chart with solid pastel color

Pie Chart - Pie

Let's try to build a spectacular pie chart that reflects the popularity of used Internet browsers. In the toolbar, select a chart type. Pie, then define the area of ​​the chart and enter data in the table. The diagram presented in fig. 44. Choose the appropriate fill option for all elements of the chart.

Fig. 43. The table with the entered numerical values

Fig. 44. The initial view of the diagram

Fig. 45. Result of changing chart fill

Very good legend labels look right on the chart elements. At the same time, it’s nice to add to the browser names the percentages corresponding to them, which will be printed in the following lines. Therefore, use the command Object => Graph => Data (Object => Chart => Data) and change the headers. After that, rotate the diagram in the same way as a regular vector object, by 45 ° and move out the two elements with the lowest values ​​- the diagram will look much more spectacular.

Fig. 46. ​​Graph Data window with modified labels

Fig. 47. Chart after adjustment

Now for placing legend labels in the window Graph type you can choose an option Legends in Wedges (Legend on wedges), and then adjust the size and position of the text in the usual way. To give the diagram a finished look, add a shadow to the graphic elements and provide it with the necessary headers, for example, as in Fig. fifty.

Fig. 48. The result of placing the legend data on the diagram itself

Fig. 49. The diagram after editing the inscriptions

Fig. 50. Final view of the pie chart

Bar graph with horizontal columns - Var

Consider the example of creating a histogram in the style of a histogram that reflects the readability of spam in different countries. On the toolbar, select the chart type Var, then define the chart area and enter the data from two columns in the table: the first with the names of countries, the second with the corresponding percentages. Choose the appropriate fill option for all elements of the chart.

Fig. 51. Chart after changing a column fill

Select the columns with the tool Direct selection when the key is pressed Shift and apply appropriate effects to them, in this example, the effects are applied to them Drop shadow (Shadow overlay) with the command Effect => Stylize => Drop Shadow (Effect => Stylization => Overlay Shadow) and Inner glow (Inner light) through command Effect => Stylize => Inner Glow (Effect => Stylization => Inner Light). The diagram will take the form as in Fig. 52. Select the labels (categories) and move them inside the columns, and then manually add the headings and percent values ​​to the chart.

Fig. 52. The result of superimposing effects on the columns of the chart

Fig. 53. Chart after moving categories

Fig. 54. The final view of the histogram with horizontally arranged columns

Area Chart - Area

Now let's try to build a diagram of type Area, which will show the gradual changes that have occurred in the server OS market. On the toolbar, select the type of chart Area, define the area of ​​the chart and enter in the table data on changes in the volumes of paid server deliveries for the period from 2000 to 2007. In this case, the first row should contain the names of the OS, and the first column should contain the years. The result will look something like Fig. 55. Choose the appropriate fill option for all elements of the diagram and add horizontal dividing lines by opening the Graph Type window and setting the option in the list Value axis (Axis of values) for the parameter Length (Length) and option Full width (Full width). Reduce the thickness of the markers to about 0.1 pixels by first selecting them with the tool Group selection (Group selection in a group) and entering the appropriate value in the palette Stroke (Border), .

Fig. 55. The initial view of the diagram

Fig. 56. Changing the chart after changing the fill elements and lengthening horizontal markers

To eliminate black borders between areas of the chart, select all areas with the tool Group selection and in the window Stroke set option None (No

Pin
Send
Share
Send
Send