Adding charts

You can use the Chart Builder to add two pie charts to your report: the first pie chart shows the total dollar amount of the art sold versus the total dollar amount unsold art for each artist; the second pie chart shows the sum of artwork sold versus unsold for all of the artists.

The two pie charts are the same except for the scope. To apply a pie chart to a group (the ratio of sold to unsold art for each artist), add the pie chart to the group footer band. To apply the pie chart to the report (the ratio of sold to unsold art for all artists), add the pie chart to the report footer band.

In Adding a calculated field, you added a calculated field for the total dollar amount of artwork sold. Before you can create the pie chart for this example, you must create a second calculated field for the total dollar amount of unsold art.

Add a calculated field for the sum of unsold art

Choose Window > Fields and Parameters.
Select the Calculated Fields heading in the Fields and Parameters panel.
Click the (+) icon at the upper edge of the panel:
1. In the Name field, type Unsold.
2. In the Default Label Text field, type Unsold.
3. In the Data Type field, choose Big Decimal from the pop-up menu.
4. In the Calculation field, choose Sum from the pop-up menu.
5. In the Perform Calculation On field, enter the following expression to calculate the dollar amount of unsold art:
```
Iif(IsBoolean(query.ISSOLD) and not(query.ISSOLD), query.Price,0) 
```
6. In the Reset Field When field, choose Group from the pop-up menu.
7. In the Reset Group field, choose LASTNAME.
8. Click OK to close the Add Calculated Field dialog box and return to the report.
Choose File > Save from the menu bar to save your changes to the report.

Add a pie chart to the group footer

Expand the LASTNAME Footer band.
Choose Insert > Chart from the Report Builder menu bar:
1. Choose Pie from the Base Chart Type list. The Chart Sub-Type appears to the right of the Base Chart Type.
2. Choose the 3-D chart.
Click the Next button. Then click the Add button:
1. In the Series Label field, type Total Sales.
2. In the Paint Style field, choose Light.
3. In the Data Label field, choose Value.
4. In the Color List, type Teal,Gray.
5. In the Chart Data Source area, ensure that the Data From A Fixed List of Values option is selected.
Click the Add button:
1. In the Label field, type Sold.
2. In the Value field, choose #calc.Sold# from pop-up menu.
3. Click OK.
Click the Add button again:
1. In the Label field, type Unsold.
2. In the Value field, choose #calc.Unsold# from the pop-up menu.
3. Click OK twice to return to the Chart Series dialog box.
Click the Next button. In the Chart Formatting dialog box, click the Titles & Series tab and make the following changes:
1. In the Chart Title field, type Total Sales for #query.LASTNAME#.
2. In the X Axis Title field, type Sold.
3. In the Y Axis Title field, type Unsold.
4. In the Label Format field, choose Currency from the pop-up menu.
5. Click the 3-D Appearance tab and ensure that Show 3-D is selected.
Click the Font tab and make the following changes:
1. Change the Font Name to Arial.
2. Change the Font Size to 9.
Click the Finish button. Report Builder adds a place holder for the pie chart in the report.
Resize and move the chart to the desired location within the LASTNAME Footer band.
Choose File > Save to save your changes to the report.
Press F12 to preview the report.

Add a pie chart to the report footer

Create two calculated fields to use in the report footer pie chart with the following parameters:

Name	TotalSold	TotalUnsold
Default Label Text:	Total Sold	Total Unsold
Data Type:	Big Decimal	Big Decimal
Calculation:	Sum	Sum
Perform Calculation On:	`Iif(IsBoolean(query.ISSOLD ) and query.ISSOLD, query.Price,0)`	`Iif(IsBoolean(query.ISSOLD) and not(query.ISSOLD), query.Price,0)`
Initial Value:	0	0
Reset Field When:	Report (Changes)	Report (Changes)
Reset Group:	LASTNAME	LASTNAME

Expand the Report Footer band, which is located directly below the Page Footer band.
Copy the pie chart from the Group Footer and paste it in the Report Footer.
Double-click the pie chart and click the Next button.
Double-click Total Sales to display the Edit Chart Series dialog box.
Change the Series Label to Total Sales for Artists.
Change the chart series values:

Label

Value

Sold
#calc.TotalSold#

Unsold
#calc.TotalUnsold#
Click the Next button, and then Click the Title & Series tab.
Change the Chart Title to Total Sales for Artists, and click Finish.
Choose File > Save from the menu bar to save your changes to the report.
Press F12 to preview the report.
The Total Sales for Artists pie chart should appear only on the last page of the report. Verify that the calculations are correct.

Label	Value
Sold	`#calc.TotalSold#`
Unsold	`#calc.TotalUnsold#`

Using Cascading Style Sheets

The Report Creation Wizard automatically creates and applies the following styles to your report:

ReportTitle
CompanyName
PageTitle
ReportDate
SubTitle
DetailData (default style)
DetailLabel
PageFooter
RectangleStyle
LineStyle

The instructions on Adding and formatting fields show how to add a field called GroupFooter and apply it to a text field and a data field in the GroupFooter band. You can export the styles in a report to a CSS file. Report Builder automatically generates the CSS code for the styles. This is an efficient way to maintain a single set of styles to use with multiple reports. You can modify the styles in the CSS file by using any text editor and either import the CSS file in Report Builder or override the styles in the report at run time.

Export report styles to a CSS file

Choose Window > Report Styles.
Click the export icon (the icon with the orange arrow).
In the File Name field, type artstyles. Report Builder automatically adds the CSS extension.

Navigate the artStyles.css file and double-click on it to open it. The following example shows the generated CSS code:

ReportTitle
{
        color:Black;
        font-size:24pt;
}
CompanyName
{
        color:#6188A5;
        font-weight:bold;
}
PageTitle
{
        color:#333333;
        font-size:14pt;
        font-weight:bold;
}
ReportDate
{
        color:#333333
}
SubTitle
{
        color:#6089A5;
        font-size:12pt;
        font-weight:bold;
}
DetailLabel
{
        color:Black;
        background-color:#E3EDEF;
        font-weight:bold;
}
DetailData
{
        default-style:true;
        color:Black;
        line-size:thin;
}
PageFooter
{
        color:#2F2F2F;
        font-size:8pt;
}
RectangleStyle
{
        color:#E3EDEF;
        background-color:#E3EDEF;
}
LineStyle
{
        color:#CCCCCC;
        background-color:#CCCCCC;
}
GroupFooter
{
        color:Blue;
        font-weight:bold;
		font-family:Tahoma;

Change the ReportTitle style color attribute to Red and add the font-weight attribute, as the following code shows:
```
ReportTitle
{
        color:Red;
        font-size:24pt;
        font-weight: bold;
}
```
Save the CSS file.

Also, you can override report styles from ColdFusion. Form more information, see Overriding report styles.

Note: If you add a style to the CSS file, you must add a style with the same name to the report in Report Builder. Also, Report Builder does not support all CSS styles. For more information, see the cfreport tag in the CFML Reference.

Import the CSS file

Choose Window > Report Styles.
Click the import styles icon (the one with the blue arrow).
Navigate to the location of the artStyles.css file, and click OK. Report Builder automatically updates the report style definition and applies the updated style to report title.
Press F12 to preview the report.

Adobe ColdFusion 8

Adding charts

Using Cascading Style Sheets

Related Information

Help Resource Center