ActiveReports 14 .NET Edition
ActiveReports 14 User Guide / Samples and Walkthroughs / Walkthroughs / Page Report/RDL Report Walkthroughs / Chart / Funnel Charts
In This Topic
    Funnel Charts
    In This Topic

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

    Note:

    • This walkthrough uses the StoreSales table from the Reels database. The Reels.mdb file can be downloaded from GitHub: ..\Samples14\Data\Reels.mdb.
    • Although this walkthrough uses Page reports, you can also implement this using RDL reports.

    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

    Funnel Chart - Design Time Layout

    Funnel Chart - Design Time Layout

    Run-Time Layout

    Funnel Chart - Run Time Layout

    Funnel Chart - 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 14 Page Report Application and in the Name field, rename the file as rptFunnelChart.
    3. Click OK to create a new ActiveReports 14 Page Report Application. By default a Page report is added to the project.

      See Quick Start 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.
      Adding a DataSource
    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 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

    • Click the Preview tab to view the report at design time.

    OR