Previous TopicNext Topic


Tutorial 4: Creating a chart

This section provides step-by-step instructions for building a report that displays order totals 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. The following illustration shows the finished chart, so you understand the objective of the tutorial.

To create this chart, you complete the following tasks:

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 you set up the data source and data set that the chart uses. These tasks are discussed in detail in earlier sections of Field Guide to BIRT, including a tutorial in which you build a sample report. This tutorial explains how to select the specific data you use to build the sample pie chart.

Using the Blank Report template, create a new report design called Chart.rptdesign. The report you create will contain only the chart, without any other report elements, so you use a blank report format.

The next part of this task is to build a data source for the report design file. Your data source is the sample database, Classic Models. Open Data Explorer.

To open the data source wizard, right-click Data Sources, then choose New Data Source from the context menu.

Select Classic Models Inc. Sample Database, then choose Next, then choose Finish. When you do so, BIRT adds the new data source to the report design file. You can see it within Data Sources in Data Explorer.

Once you have established the data source, the final part of setting up the report design file is to build a data set for the chart using a SQL SELECT statement. The SQL SELECT statement retrieves data from the data source. To open the data set wizard, New Data Set, right-click Data Sets in Data Explorer and choose New Data Set from the context menu.

Replace the data set name with the following text:

ChartData 

Choose Finish, and Edit Data Set appears. You use Edit Data Set to type the SQL SELECT statement to use. Type the following text:

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 product line group.

From the menu items on the left of Edit Data Set, choose Preview Results to test and validate the query.

If you created the SELECT statement correctly, you should see the following results. These are the data rows that the query returns.

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 column to something more descriptive, choose Output Columns.

In the 2 row, in Alias, type:

TotalOrders 

In Display Name, type:

TOTALORDERS 

Now that you have renamed the sum column, you are finished setting up the report design file. Choose to OK close Edit Data Set and open the layout editor.

Task 2: Add the chart to the report

Choose Palette, then drag a chart element from the palette into the report.

The chart builder, New Chart, appears. If you have an existing chart, the window title is Edit Chart.

Once the chart element is in place, you select a chart type. Chart--Select Chart Type displays the different types of charts 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. Choosing a different type in the Select Chart Type list displays the available subtypes for that type.

In this tutorial, you build a pie chart. In the Select Chart Type list, select Pie Chart. The chart builder shows the pie chart in the preview window.

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 pie chart title, the preview window reflects your changes.

Task 3: Providing data for a chart

In this tutorial, you already created the data source connection and data set 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.

To navigate to the page you use to provide data, Select Data, choose Next. Then choose Use data set.

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 you are using. You can see the product line and total orders columns. By default, Data Preview shows only six data rows. To show more or fewer rows, you must change the preview row setting in the chart preferences.

After selecting the data set to use, you set up the expressions that are used by the chart. Each type of chart uses data differently. For a pie chart, you must select data expressions that specify:

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 into a field. You can also type the expression or use Expression Builder to create an expression.

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 the following illustration.

The following expression appears in Category Definition:

row["PRODUCTLINE"] 

In Data Preview, the product line column now appears colored, so you can tell that you have used the column in the chart.

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 the following illustration.

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. The sample chart now uses 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 in the chart builder to verify that you supplied the correct expressions for the chart.

Now you have completed the steps necessary to create a basic chart: selecting a chart type, linking the chart to a data set, and specifying what data to show in the chart. To make sure the chart looks correct in the report document, you review it in the previewer.

Task 4: Review the chart

Testing as you go is an important aspect of the developer process. One of the challenges developers face is to confirm that a report is shaping up the way they want to as they go along. 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.

To close the chart builder, choose Finish. The chart element appears in the layout editor.

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 so it is approximately 5 inches wide and 3 inches tall. To enlarge the chart, select it, then drag the handles that appear in the border of the chart element.

Choose Preview to show the chart in the previewer.

The chart uses the correct data, but the layout is not very attractive and some superflous information appears, such as the <undefined> text below the pie. You need to refine the chart appearance and organization to emphasize the points you want. The remaining procedures in this tutorial help you to modify the chart. Some of these changes include creating a new title, adjusting the data labels, and removing the legend.

Task 5: Updating chart titles

Choose Layout to return to the layout editor, then double-click the chart design to open the chart builder. Choose Format Chart, then choose Chart Area in the menu to the left.

First, you change the chart title, which currently appears as Pie Chart Title. In Chart Title, type:

Orders by Product Line 

The preview image shows the change.

The other title this chart displays is the pie title. Currently, the text for this title is <undefined>. You could change the text to something more descriptive, but because this chart shows only one pie, the pie title is unnecessary. You can delete it. In other charts, you may want to keep the pie title. For example, in a chart that shows multiple pies, you might want to use different titles for each pie in addition to a title for the chart.

To delete the pie title, go to the menu at the left of the chart builder and choose Value Series to open the value series formatting section. Then choose Titles to open the Titles window.

Deselect Visible, then close this window. Chart Preview displays the change.

Task 6: Refine the chart appearance

Besides the titles, the chart includes labels that identify the value of each sector. Lines connect values and sectors. 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.

To navigate to the legend section of the chart builder, in the menu on the left, choose Legend.

To open the window in which you can delete the legend, Legend Layout, choose Layout at the bottom of the screen.

Deselect Visible, then close the window. Chart Preview reflects the change.

Now you add the legend information to the sector labels. Each data label will display category information (the sector name) and value information (the total orders for the sector). For example, the following label identifies the motorcycles sector:

Motorcycles: 12,778 
 

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.

To add the section name to the label, ensure that Category Data appears in the drop-down list on the right, then choose Add. Category Data appears below Value Data in the list.

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.

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.

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. Then select Edit Format.

You can use Edit Format to change the number format of date and time or numerical data. Select Standard, then change the value in Fraction Digits to 0.

Choose OK to close Edit Format.

To change the formatting attributes of the label text, choose Invoke Font Editor.

You use Edit Font to change the text format of the labels.

Change the font to Tahoma and the size to 11, then choose OK. Close Labels to save your label changes.

To use a consistent leader line length, you can specify a fixed length for the leader lines that connect the labels to the sectors.

In Leader Line Style, select Fixed Length. Change Leader Line Size to 20.

You have finished creating and formatting the chart. To see the chart element in the layout editor, choose Finish. For the last time, choose Preview to preview the chart. The chart looks like the one in the following illustration.

The chart shows the category names for each sector as well as the sector values, making quick analysis possible. For example, the user can immediately see that the largest pie sector is Classic Cars, with 35,582 orders, followed by Vintage Cars. The two car sectors are larger than all the other sectors put together.

 


(c) Copyright Actuate Corporation 2006

Previous TopicNext Topic