ActiveReports 13
Funnel Charts
ActiveReports 13 > ActiveReports User Guide > Samples and Walkthroughs > Walkthroughs > Page Report/RDL Report Walkthroughs > Chart > Funnel Charts

The Funnel charts enable users to visualize stages in a linear process. This walkthrough illustrates a step-by-step implementation for creating a composite chart with three Y-axis series. The walkthrough is split into the following activities:

Note:

When you complete this walkthrough you get a layout that looks similar to the following at design time and at run time.

Design-Time Layout

Run-Time Layout

To create an ActiveReports project in Visual Studio

  1. Create a new Visual Studio project.
  2. In the New Project dialog that appears, select ActiveReports 13 Page Report Application and in the Name field, rename the file as rptFunnelChart.
  3. Click OK to create a new ActiveReports 13 Page Report Application. By default a Page report is added to the project.

    See Adding an ActiveReport to a Project for information on adding different report layouts.

To connect the report to a data source

  1. In the Report Explorer, right-click the Data Sources node and select the Add Data Source option or select Data Source from the Add button.
  2. In the Report Data Source Dialog that appears, select the General page and in the Name field, enter a name like ChartData.
  3. On this page, create a connection to the Reels database. See Connect to a Data Source for information on connecting to a data source.

To add a dataset

  1. In the Report Explorer, right-click the ChartData data source node and select the Add Data Set option or select Data Set from the Add button.
  2. In the DataSet Dialog that appears, select the General page and enter the name of the dataset as StoreSalesData.
  3. On the Query page of this dialog, in the Query field enter the following SQL query.
    SQL Query
    Copy Code
    SELECT * from StoreSales
    
  4. Click the Validate DataSet icon  at the top right hand corner above the Query box to validate the query.
  5. Click OK to close the dialog. Your data set and queried fields appear as child nodes to the data source in the Report Explorer.

To add a chart data region and define plots

  1. From the toolbox, drag a Chart data region onto the design surface of the report.
  2. In the Select a Chart Type wizard that appears and select the chart type as Column.
  3. Right-click on the chart and go to Plot Template > Miscellaneous and select Funnel.
  4. Select the chart plot and go to Properties window.
  5. Go to Encodings > Values property and click ellipses next to Values property to open ValueAggregateEncodingDesigner Collection Editor.
  6. Add a new Value field to the collection editor.
  7. Open its Value collection editor and add a value field and set its expression to =Fields!TotalSales.Value.
  8. Click OK to save and exit the collection editor. You see that 'Total Sales' field is added under the Data Fields on chart.
  9. Select the chart plot and go to Properties window.
  10. Go to Encodings > Details property and click ellipses next to Values property to open DetailEncodingDesigner Collection Editor.
  11. Add a new Detail field to the collection editor.
  12. Open its Values collection editor and add a value field and set its expression to =Fields!StoreName.Value.
  13. Click OK to save and exit expression editor and then again to close the collection editor. You see that 'Store Name' is added as Details encoding on the chart.
  14. Select 'Store Name' encoding and set following properties:
    Property Name Property Values
    Group Stack
    SortDirection Ascending
    SortingField =Fields!StoreName.Value

    Let us add legend to the chart.
  15. Select the chart plot and go to Encodings > Color > Values property.
  16. Click ellipses next to Values property to open the expressions editor.
  17. Add a value field and set its expression to =Fields!StoreName.Value

To configure the appearance of the chart

  1. Select Chart and set Pallet to Office.
  2. Select 'Chart title' on the chart and set Title to 'Store Sales'.
  3. Select Category axis and set Lines>ShowLine and Labels>ShowLabels to False.
  4. Select Value axis and set ShowLine and ShowLabels to False.
  5. Select the chart plot and set the label settings for the Funnel chart as:
    Property Name Property Values
    Labels>Color White
    Labels>Template
    Specify the template to be displayed for the label.
    {valueField.value:c}
    Labels>TextPosition
    Specify text position of the label.
    Center
  6. Select Legends on chart and set Title to 'Store Name'.

To view the report

OR