Tutorial 5: 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.
- Choose File->New->Report, and choose Blank Report when the new report wizard displays the list of report templates. Name the new report design Chart.rptdesign.
- Build a data source for the report design file using the sample database, Classic Models.
- Build a data set for the chart. Use the following data set name:
Use the following SQL SELECT statement:
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.
- 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.
- To rename the sum column to something more descriptive, choose Output Columns. Use the following text for the alias for the 2 column:
Use the following text for the display name for the 2 column:
- 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.
- Choose Palette, then drag a chart element from the palette to the report, as shown in Figure 14-3. 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.
Figure 14-3 Adding a chart element to a report
Figure 14-4 Select Chart Type showing bar chart subtypes
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.
- In the Select Chart Type list, select Pie. The chart builder shows a symbol of a pie chart in the Subtype area, as shown in Figure 14-5. Pie charts have only one two-dimensional subtype, so you see only one option in the Subtype area.
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.
- To navigate to the page you use to provide data, choose Next. Then, on Select Data, choose Use data set, as shown in Figure 14-6.
The report file includes only one data set. Select ChartData from the drop-down list.
Figure 14-6 Selecting the data set that you created
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. Chart Preview 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, Chart Preview reflects your changes.
- 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:
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
- 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:
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: Enlarge and preview the chart
In our example, the size of the default pie chart cannot accommodate all the Classic Model data, so you enlarge the chart and preview the report. The Chart Preview in chartbuilder, shown in Figure 14-10, gives you only a rough idea of your progress and rarely shows all the data. To check your progress thoroughly and to ensure that your data fits into the chart dimensions you specified, you need to look at the preview in the report editor.
- To close the chart builder, choose Finish. The chart element appears in the layout editor, shown in Figure 14-11.
Figure 14-11 Chart element in the layout editor
- Choose Preview to preview the chart in the report editor. The data includes Vintage Cars, but that data is not visible in the preview. Also, the chart appears small, relative to the report page.
Figure 14-12 Preview of chart before enlargement
- To make the chart bigger so that all the data is visible, choose Layout, and 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-13.
Figure 14-13 Enlarging a chart element
- Choose Preview to show the chart in the previewer again. The chart looks like the one shown in Figure 14-14. Compare the preview in Figure 14-14 with the preview in Figure 14-12, where Vintage Cars data is not visible.
Figure 14-14 Preview of chart after enlargement
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. You provide new title text.
- Choose Layout to return to the layout editor, then double-click the chart design to open the chart builder.
- Choose Format Chart, then choose Title in the list at the left. Figure 14-15 shows the chart builder.
Figure 14-15 Adding a title in the chart area section
- In Chart Title, type:
Choose Finish. The preview image displays the change, as shown in
Figure 14-16.
Figure 14-16 Chart preview image with new title
Task 6: Refine the chart appearance
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 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:
- To navigate to the legend section of the chart builder, choose Legend from the navigation list at the left.
Figure 14-17 Legend section of Format Chart
- Chart Preview reflects the change. The chart looks like the one shown in Figure 14-18.
Figure 14-18 Chart with hidden legend
- Now you can add the legend information to the sector labels. Navigate to the value series formatting section, then choose Series Labels. Series Labels shows you what data the sector labels display. You can also use Series Labels to change the label formatting, such as outlines and text style. Figure 14-19 shows Labels.
Figure 14-19 Labels
- 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
- 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.
- 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
To change the number format of the value part of the label, select Value Data in the list, then choose Invoke Format Specifier Editor. In Edit Format, you can change the number format of date-and-time or numerical data.
- 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.
- 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.
- 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
Now you 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
- In Leader Line Style, accept the default, Fixed Length. Change Leader Line Size to 20.
- You have finished creating and formatting the chart. To close the chart builder and 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.
