## Tutorial 4: Creating a chart

This section provides step-by-step instructions for building a report that displays order totals that are organized by product line. The report shows the information graphically in a pie chart.

The chart uses data from the sample database, Classic Models. You install that database when you install BIRT. Figure 14-1 shows the chart that you create in the tutorial.

Figure 14-1 Completed tutorial chart

To create this chart, you complete the following tasks:

- Set up the report design file. You create a new report, data source, and data set.
- Add the chart to the report. You insert a chart element and select a chart type.
- Provide data for the report. You link the chart to a data set and set up the expressions that the chart uses.
- Review the chart. You use the previewer to examine the chart.
- Update chart titles. You modify the chart title and remove an unnecessary title beneath the pie.
- Refine the chart appearance. You remove the chart legend and modify the labels that identify each sector.

### Task 1: Set up the report design file

Before you start to design a chart, you must create a report design file in which to display the chart, then set up the data source and data set that the chart uses. These tasks are discussed in detail in earlier sections of this book, including a tutorial in which you build a sample report. This tutorial explains how to select the specific data that you use to build the sample pie chart.

1. Using the Blank Report template, create a new report design called Chart.rptdesign.
2. Build a data source for the report design file using the sample database, Classic Models.
3. Build a data set for the chart. Use the following data-set name:

    ChartData

Use the following SQL SELECT statement:

    SELECT Products.ProductLine,
    sum(OrderDetails.QuantityOrdered)
    FROM OrderDetails,
    Products
    WHERE Products.ProductCode=OrderDetails.ProductCode
    GROUP BY Products.ProductLine
    ORDER BY Products.ProductLine

This statement gets values from the ProductLine column in the Products table. Then it groups the results by product line and calculates the sum of the order quantities for each group.
4. Preview the query to validate the data it returns. If you created the SELECT statement correctly, you should see the data rows that appear in Figure 14-2.

Figure 14-2 Previewing the data set
The first column lists product-line names. The second column shows the sum of the order totals for each product line. The sum column is called 2.
5. To rename the column to something more descriptive, choose Output Columns. Use the following text for the 2 column alias:

    TotalOrders

Use the following text for the 2 column display name:

    TOTALORDERS

6. Now you are finished setting up the report design file. To close Edit Data Set and open the layout editor, choose OK.

### Task 2: Add the chart to the report

You use the palette to add a chart element, and then select a chart type. In this tutorial, you build a pie chart.

1. Choose Palette, then drag a chart element from the palette to the report, as shown in Figure 14-3.

Figure 14-3 Adding a chart element to a report
The chart builder, New Chart, appears. If you have an existing chart, the window title is Edit Chart. The Select Chart Type page displays the different types of charts that you can create. Each chart type includes several subtypes, giving you an extensive range of available types.
For example, when you first open the chart builder, you see three different bar chart subtypes, as shown in Figure 14-4. Choosing a different type on Select Chart Type displays the available subtypes for that type of chart. These subtypes create two-dimensional charts. Later in this chapter, you learn how to use the Dimension option to show even more subtypes.

Figure 14-4 Select Chart Type showing bar chart subtypes
2. In the Select Chart Type list, select Pie Chart. The chart builder shows the pie chart in the preview window, as shown in Figure 14-5. Pie charts have only one two-dimensional subtype, so you see only one option in the Subtype area. As you design a chart, the preview window gives you an indication of the progress you are making. For example, if you change the color of the pie chart sectors or replace the default title text with a new title, the preview window reflects your changes.

Figure 14-5 Two-dimensional subtype for a pie chart

### Task 3: Providing data for a chart

In this tutorial, you already created the data source connection and data set that you need. If necessary, you can use the chart builder to build a new data set or create filters or parameters that refine the chart data. After selecting the data set to use, you must set up the expressions that the chart uses. Each type of chart uses data differently. For a pie chart, you must select data expressions that specify:

- Which sectors appear in the pie. In this tutorial, you use an expression that creates one sector for each product line.
- The size of each sector. In this tutorial, the number of orders determines the size of each product-line sector.

You can use different techniques to provide a data expression in a chart. The easiest way to specify the data to use is to drag a column from Data Preview to a field. You can also type the expression or use Expression Builder to create an expression.

1. To navigate to the page you use to provide data, choose Next. Then, on Select Data, choose Use data set. Figure 14-6 shows the options that appear.

Figure 14-6 Selecting the data set that you created
This report file includes only one data set, ChartData. If the file included more data sets, the data-set names would appear in the drop-down list.
In the lower half of the chart builder, Data Preview displays some of the data from the data set that you are using. You can see the product line and total orders columns. By default, Data Preview shows six data rows.
2. First, to determine which sectors the pie displays, you provide a category series expression. In Data Preview, select the PRODUCTLINE column header, and drag it to the empty field to the right of Category Definition, as shown in Figure 14-7.

Figure 14-7 Supplying a category series expression
The following expression appears in Category Definition:

    row["PRODUCTLINE"]

In Data Preview, the product-line column now appears colored to show that you have used the column in the chart. Figure 14-8 shows the selected column.

Figure 14-8 Data Preview with selected column
3. To set the size of each sector, select the TOTALORDERS column header, and drag it to the empty field below Slice Size Definition, as shown in Figure 14-9.

Figure 14-9 Supplying a value series expression
The following expression appears in Slice Size Definition:

    row["TOTALORDERS"]

In Data Preview, the total orders column now appears colored to indicate that the column is used in the chart. The image in Chart Preview also changes to use the data you specified. The product lines are chart categories. Each sector represents one product line. The order totals are chart values. The size of each sector represents the total orders for that product-line category. You can use the preview image to verify that you supplied the correct expressions for the chart. The preview image should look like the one shown in Figure 14-10.

Figure 14-10 Chart Preview image

Now you have completed the necessary steps to create a basic pie chart. To confirm that the chart looks correct in the report, you view it in the previewer.

### Task 4: View the chart

Testing as you go is an important aspect of the developer process. Reviewing your work at different points in the process ensures that you do not waste time by pushing the report in the wrong direction. The preview image in the chart builder is one way to check your progress. You should also use the previewer to review how the chart looks in a report document.

1. To close the chart builder, choose Finish. The chart element appears in the layout editor. The chart should look similar to the one shown in Figure 14-11.

Figure 14-11 Chart element in the layout editor
2. The chart element appears small, relative to the report page. To make the chart bigger so that the data appears more clearly and takes up more of the report page, enlarge the chart element to approximately 5 inches wide and 3 inches tall. To enlarge the chart, select it, then drag the handles that appear in the borders of the chart element, as shown in Figure 14-12.

Figure 14-12 Enlarging a chart element
3. Choose Preview to show the chart in the previewer. The chart looks like the one shown in Figure 14-13.

Figure 14-13 Chart in the previewer

The chart uses the correct data, but the layout is not very attractive. You need to refine the chart appearance and organization to emphasize the points that you want. The remaining procedures in this tutorial help you to modify the chart. Some of the changes that you make include creating a new title, adjusting the data labels, and removing the legend.

### Task 5: Updating the chart title

Currently, the chart displays a default title.

1. Choose Layout to return to the layout editor, then double-click the chart design to open the chart builder.
2. Choose Format Chart, then choose Chart Area in the list at the left. Figure 14-14 shows the chart builder.

Figure 14-14 Adding a title in the chart area section
3. In Chart Title, type:

    Orders by Product Line

The preview image displays the change, as shown in Figure 14-15.

Figure 14-15 Chart preview image with new title

### Task 6: Refine the chart appearance

Besides the title, the chart includes labels that identify the value of each sector. A legend identifies which product line a sector represents. While the legend includes useful information, it takes up space in the chart and reduces the size of the pie. You can remove the legend and add the legend information to the sector labels to display the same information in a different way. An additional benefit to moving the labels is that, when you print the report, the chart clearly shows which sector represents a product line, even if the colors are not easily distinguished. Each data label will display category information (the sector name) and value information (the total number of orders for the sector). For example, the following label identifies the motorcycles sector:

    Motorcycles: 12,778

1. To navigate to the legend section of the chart builder, choose Legend from the list at the left, as shown in Figure 14-16.

Figure 14-16 Legend section of Format Chart
2. To open the window from which to delete the legend, choose Layout at the bottom of the screen. Layout Legend appears, as shown in Figure 14-17.

Figure 14-17 Using Layout Legend to hide the legend
3. Deselect Visible, then close the window. Chart Preview reflects the change. The chart looks like the one shown in Figure 14-18.

Figure 14-18 Chart with hidden legend
4. Now you can add the legend information to the sector labels. Navigate to the value series formatting section, then choose Labels. Labels shows you what data the sector labels display. You can also use Labels to change the label formatting, such as outlines and text style. Figure 14-19 shows Labels.

Figure 14-19 Labels
5. To add the section name to the label, ensure that Category Data appears in the drop-down list in the Values area, then choose Add. Category Data appears below Value Data in the list, as shown in Figure 14-20.

Figure 14-20 Adding category data to a label
6. Using this setup, the labels show sector values, then sector names. You want to rearrange the label data so the sector names appear first. Select Value Data, and choose Remove, then, in the drop-down list, select Value Data again, and choose Add. Value Data now appears below Category Data in the list, as shown in Figure 14-21.

Figure 14-21 Labels with rearranged data
Now the labels will display information in the correct order, but you still need to change the label appearance. When you use more than one kind of information in a label, you can use a separator in between the different sections. The current separator is a comma.
7. To change the separator, in Separator, type a colon (:) then a space. Figure 14-22 shows where to type the separator text.

Figure 14-22 Adding a label separator

8. Because the chart uses data with whole numbers, a number format that shows decimal values is unnecessary. To change the number format of the value part of the label, select Value Data in the list, then select Edit Format. You can use Edit Format to change the number format of date-and-time or numerical data.
9. Select Standard, then change the value in Fraction Digits to 0. At this point, Edit Format appears as shown in Figure 14-23.

Figure 14-23 Edit Format
Choose OK to close Edit Format.

10. To change the formatting attributes of the label text, choose Invoke Font Editor. Figure 14-24 shows where to find the Font Editor button.

Figure 14-24 Opening Font Editor from Labels
Edit Font appears. You use Edit Font to change the text format of the labels.
11. Change the font to Tahoma and the size to 11, as shown in Figure 14-25. Then choose OK, and close Labels.

Figure 14-25 Edit Font
You can set a consistent length for the leader lines that connect the labels to the sectors. Figure 14-26 shows where to find the leader line settings.

Figure 14-26 Value Series section of Format Chart
12. In Leader Line Style, select Fixed Length. Change Leader Line Size to 20.
13. You have finished creating and formatting the chart. To see the chart element in the layout editor, choose Finish. Then, for the last time, choose Preview to preview the chart. The chart looks like the one shown in Figure 14-27.

Figure 14-27 Completed tutorial chart

The completed chart shows the category names for each sector as well as the sector values. The size and organization of the chart make quick analysis possible, while still providing more detailed data. For example, the user can immediately see that the largest pie sector is Classic Cars, which has 35,582 orders, followed by Vintage Cars, which has 22,933. The two car sectors are larger than all other sectors combined. Other product-line groups, such as Trains, do not contribute significant numbers of orders.