Web Designer
Tutorial 6.1: Create Simple Report with Chart
Get Started > Tutorial 6: Create Report with Chart > Tutorial 6.1: Create Simple Report with Chart

Let us see how easy it is to represent data in charts.

What You Will Learn

This tutorial guides you through the steps to create a report with Chart data region.

Note: This tutorial uses shared data set - SalesByRegion. The shared data sets and shared data sources can be viewed or modified in the Administrator Dashboard. For information on adding shared data sets, see Tutorial 7.1: Add Shared Data Set.

After you complete this tutorial, you will have a report that looks similar to the following.

Access the ActiveReports Web Designer and Add Data Set

  1. On the ActiveReports Server Report Portal, click Create report. 
    The ActiveReports Web Designer opens in the new browser tab.
  2. From top right corner of the Web Designer, click Data icon .
  3. Click Add and then from the shared data sets available, select SalesByRegion.
  4. Click Add. The SalesByRegion data set is added to the report.

Create Report Layout

The report uses the Chart data region to display data. Drag and drop the Chart data region  onto the design area of the report.

The default chart type is Column Plain. You can change the chart type from the Type property. 

Bind Data to Chart

We will create a chart with two series plotted along the Y-axis.

  1. From the fields available in the data set, drag the Store field into the Category Fields area. This automatically binds the Store field to the X axis.
  2. Drag the Profit and the Quantity field into the Data Fields area. This plots the Profit and Quantity fields to the Y axis of the chart.

    Note that the Data Set Name property of the chart is already set to SalesByRegion data set.

Add Y2 Axis

  1. From the Explorer , select the Chart data region.
  2. In the Value Axes field, click Show Items. You will see that Y1 axis is already added.
  3. Click Add Item. The Y2 axis is added to the chart.
  4. To bind the Quantity field to Y2 axis, select Quantity in the Data Fields area and change the Value Axis Name property to Y2.

Add Titles

Let us add titles to our chart, and to the X and Y axes.

  1. From the Explorer , select Title under Chart1 (or the name of your chart).
  2. From the Properties pane, set Caption to Store Summary.
  3. In the Explorer, select the Category Axis > Title and set Caption to Store Name.
  4. In the Explorer, select the Value Axis Y1  > Title and set Caption to Profit.
  5. In the Explorer, select the Value Axis Y2 > Title and set Caption to Quantity.
  6. In the Explorer, select Legend and under Layout, set Position to TopCenter.

Customize the Appearance of the Chart Report

Let us now customize the appearance of chart and its labels and axes.

Note: You may need to resize the Chart data region on the report to accommodate data, and for a cleaner look.

  1. To sort the order for the stores displayed on X axis in the ascending order,

  2. Select Chart1_CategoryGroup1 in the Category Fields area.
  3. In the Properties pane, go to the Sort Expressions field.
  4. Click Show Items and then Add Item.
  5. Click the radio button and select Store from the list of data set fields.
    The default sort order is ascending order. 

    To define the Y axes that will be displayed on the chart,
  6. Select chart.
  7. In the Value Axes field, click  next to Y2. The Axis Properties pane is displayed.
  8. Set the Location property of Y2 axis to Right.

    To define the data fields for the type of chart that they will display,
  9. Select Profit in the Data Fields area.
  10. From the Properties pane, set Type to Line Plain.
  11. Select Quantity in the Data Fields area.
  12. From the Properties pane, set Type to Area Plain.

    To change the color of chart,
  13. Select the chart on the design area of the report.
  14. Under the Properties tab, set Palette to Excel.

Preview and Save Report

  1. Click Preview  to view your report in the final output.
  2. Exit the preview mode by clicking Back on the top left side of the designer.
  3. Switch to the File tab and click Save to open the Save dialog box. Enter the report name and click Save Report. You can also provide a description and a revision comment for the report.