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

    You can create a page report with a chart using the ActiveReports Chart data region. This walkthrough illustrates how to create a simple report with a Column chart.

    The walkthrough is split into the following activities:

    Note:
    • This walkthrough uses the StoreSummary 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

    Column chart at design time

    Column chart at design time

    Run-Time Layout

    Column chart at run time

    Column chart at run time

    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 rptSalesByStore.
    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 StoreSummaryData. This name appears as a child node to the data source icon in the Report Explorer.
    3. On the Query page of this dialog, in the Query field enter the following SQL query.
      SQL Query
      Copy Code
      SELECT * from StoreSummary
      
    4. Click the Validate DataSet Validate DatSet icon 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 chart data region with data and grouping to the report

    1. From the toolbox, drag the Chart data region onto the design surface of the report .
    2. In the Select a Chart Type wizard that appears, select the chart type Column.
    3. Go to the Properties Window, click ellipses button next to Plots property to open the PlotDesigner Collection Editor. You see that Plot1 is already added.
    4. Select Plot1 and click ellipses next to go to Encodings>Values property to open the DataFields Collection Editor.
    5. Add a field and set its value to expression =Fields!GrossSales.Value.
    6. Click OK to save and return to PlotDesigner Collection Editor.
    7. Go to Encodings>Category>Values property and click ellipses next to Values property.  
    8. Add a field and set its value to expression =Fields!StoreName.Value.
    9. Click OK to save and exit expression editor and then again to close the collection editor.
      You see that 'Store Name' is added to Category Fields and 'Gross Sales' is added to Data Fields.

    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 'Sales by Store'.
    3. Select the chart plot and set following properties.
      Property Name Property Value
      LineStyle>LineColor Red
      LineStyle>LineStyle Dotted
    4. Select X-axis and set Labels>LabelsAngle to -45 degrees. 
    5. Select X-axis and set Title>TitleStyle>Padding>Top to 8pt.
    6. Select Y-axis and set Title>TitleStyle>Padding>Right to 4pt.
      Note: You may need to adjust:
      • Size of the chart so that all labels are displayed correctly. Select Chart and set Size property to a larger value. 
      • Page size of the report so that the chart is fully rendered. Select Report and set PageSize property to a larger value.

    To view the report

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

    OR

    See Also