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.

• Access the ActiveReports Web Designer and Add Data Set
• Create Report Layout
• Define Plots
• Define Axes
• Add Titles
• Customize the Appearance of the Chart Report
• Preview and Save Report

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

Run the Web Designer sample (WebDesigner_MVC(Core)) that you can download from the following link:

https://github.com/activereports/WebSamples14/tree/master/WebDesignerSamples

The Web Designer is opened in browser ready to create your reports.

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.
 

Define Plots

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

1. Go to the Properties tab and click Show Items next to Plots property. You see that 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.
   
3. From the Report Explorer, select Plot - Plot1 and go to Properties tab to set the properties for Plot1 as follows:
   
   1. In the Values property, click Show Items, and then select Add Item.
   2. Click  to display the Value properties.
   3. Again in the Values property, click Show Items, and then select Add Item.
   4. Click the radio button to display the fields and select UnitsInStock.
      
      Note that UnitsInStock field is added to the Data Fields adorner.
      
   5. With Plot - Plot 1 selected, go to Encodings>Category and click Show Items, and then select Add Item.
   6. Click the radio button to display the fields and select CategoryName.
   7. Set Show Values Names in Legend to True.
   8. Go to Chart tab and from Set Plot Template, select Line.
      
4. From the Report Explorer, select Plot - Plot2 and go to Properties pane to set the properties for Plot2 as follows:
   1. Repeat steps 3.1- 3.4 to set Values property for Plot2 to UnitPrice.
      
   2. Go to Encodings>Category and click Show Items, and then select Add Item.
   3. Click the radio button to display the fields and select CategoryName.
   4. Set Show Values Names in Legend to True.
   5. Go to Chart tab and from Set Plot Template, select Column.
                 
      Note that the Data Set Name property of the chart is already set to Products data set.

Define Axes, Labels and Legends

1. From the Explorer , select Y Axis - [Plot 1].
2. Set Title>Value property to Units In Stock.
3. Similarly, select Y Axis - [Plot 2] and set Title>Value property to Unit Price.
4. Set Labels > Format property to Currency.
5. From the Report Explorer, select X Axis - Plot 1.
6. Set the Title of the X axis to Category Name.
7. From the Properties pane, set Plots property to two plots as 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.   

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.