Simple Report with Chart

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

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

Bind Data to Report

1. Create a new report. By default, you have a blank RDL Report.

2. Connect to a data source.

   1. Go to the Data tab and click Add.

   2. In the DataSource dialog, provide the following URL as Endpoint for the 'Remote JSON' provider:

   https://demodata.grapecity.com/northwind/odata/v1/
   

   3. Click Save Changes.

3. Add a dataset.

   1. Click Add Data Set for the added data source.

   2. In the DataSet dialog > Uri/Path, write the resource name as 'Products'.

   3. Enter the Json Path: $.value[*].

   4. In the Parameters property, click Add Items and enter the following key/value pair to extract fields from another resource, 'Category'.

      • Key=$expand , Value=Category
        
        Doing this joins the fields from 'Products' and 'Category' resources into the single dataset.

   5. Validate the query to retrieve fields and Save Changes.
      See Databinding for information on connecting to data sources and adding datasets.

Create a 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.

Define Plots

We will create a column chart with two series plotted along the Y-axis. For that, we need to add two plots to the chart area.

1. With the chart selected, from the Properties tab, click Show Items next to the Plots property. You will see that a default Plot1 is already added.

2. Add one more plot and set its Name as Plot2. Now you have two chart plots - Plot1 and Plot2.

Let us now set the properties for the plots as described below:

3. From the Report Explorer, select 'Plot - Plot1' and go to Properties tab.

4. In the Values property, click Show Items, and then select Add Item.

5. Click to display the Value properties.

6. Again in the Value property, click Show Items, and then select Add Item.

7. Click the radio button to view the fields and select 'UnitsInStock' from the list.
   

   The 'UnitsInStock' field is added to the Data Fields adorner.

8. With 'Plot - Plot 1' selected, go to Encodings > Category and click Show Items, and then select Add Item.

9. Click the radio button to view the fields and select Category.CategoryName from the list.

10. Set Show Values Names in Legend to 'True' to display the legend in the chart.

11. Click Chart tab from the Menu bar.

12. From the Set Plot Template option, select 'Line'.
    

13. Similarly, set the Values property for 'Plot - Plot2' to UnitPrice as shown in the following image.
    

14. Go to Encodings > Category and click Show Items, and then select Add Item.

15. Click the radio button to view the fields and select Category.CategoryName from the list.

16. Set Show Values Names in Legend to 'True' to display the legend in the chart.

17. Click Chart tab from the Menu bar.

18. From the Set Plot Template option, select Column.

Define Axes, Labels and Legends

1. From the Explorer , select 'Y Axis - [Plot 1]'.

2. Enter Common > Title property as 'Units In Stock'.

3. Similarly, select 'Y Axis - [Plot 2]' and enter Common > Title property as 'Unit Price'.

4. Set Labels > Format property to 'Currency'.

5. From the Report Explorer, select 'X Axis - Plot 1'.

6. Enter the Title of the X axis as 'Category Name'.

7. With 'X Axis - Plot 1' selected, set Plots property to two plots, that is, 'Plot 1' and 'Plot 2':
   

8. Set Labels > Label Angle property to -45 deg.

9. From the Report Explorer, select Global Legend and set its Common > Position to 'Top'.

Add Titles

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

1. From the Explorer , select Header under Chart1 (or the name of your chart).

   

2. From the Properties pane, set Caption to 'Products By Categories'.

   

Customize the Appearance of Report

Note: You may need to resize and reposition the chart control on the report to accommodate data, and for a cleaner look.

1. Set the Text - Font Size for the text in chart title.

2. Choose a suitable color palette for the chart using the Set Color Palette tab available on the top of designer (Blue).

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. Click Save to open the Save dialog box. Enter the report name and click Save Report.