Wyn Enterprise Documentation

Wyn Enterprise: Simple Report with Chart

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 using a Chart data region.

• Create Report Layout
• Define Plots
• Define Axes
• Add Titles
• Preview and Save Report
• Customize the Appearance of the Report

Note: This tutorial uses Product data set.

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

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.
4. In the Values property, click Show Items, and then select Add Item.
5. Click to display the Value properties.
6. Again, in the Values property, click Show Items, and select Add Item.
7. Click the radio button to display the fields and select UnitsInStock.
   

   Note: You can now see that the UnitsInStock field is added to the Data Fields adorner.

8. With Plot - Plot 1 selected, go to ENCODINGS - Category property and click Show Items, and then select Add Item.
   
9. Click the radio button to display the fields and select CategoryID.
   
10. Now, specify the sorting details for the category axis for Plot1. Click the radio button next to Category Sort Expression property and select 'CategoryID' from the list.
    
11. Then, in the Category Sort Expression property, click the drop-down and choose 'Ascending' from the list.
    
12. Set Show Values Names in Legend property to 'True'.
    The encoding settings for Plot1 will now look as shown below.
    
13. Go to Chart tab and from Set Plot Template, select 'Line'.
    
14. From the Report Explorer, select Plot - Plot2 and go to Properties pane to set the properties for Plot2.
    
15. Similarly, set the Values property for Plot2 to UnitPrice as shown in the following image.
    
16. Go to ENCODINGS - Category property and click Show Items, and then select Add Item.
    
17. Click the radio button to display the fields and select CategoryID.
    
18. Now, specify the sorting details for the category axis for Plot2. Click the radio button next to Category Sort Expression property and select 'CategoryID' from the list.
    
19. Then, in the Category Sort Expression property, click the drop-down and choose 'Ascending' from the list.
    
20. Set Show Values Names in Legend property to 'True'.
    The encoding settings for Plot2 will now look as shown below.
    
21. Go to Chart tab and from Set Plot Template, choose 'Column' (default template).

Note: The Data Set Name property of the chart is automatically set to Products data set.

Define Axes, Labels and Legends

1. From the Explorer , select Y Axis - [Plot 1].
2. Set the COMMON - Title property to 'Units In Stock'.
   
3. Similarly, select Y Axis - [Plot 2] and set COMMON - Title property to 'Unit Price'.
4. Set the 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 ID'.
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' degrees.
9. From the Report Explorer, select Global Legend and set its Common - Position property 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 the Caption property to 'Products by Category IDs'.
   

Customize the Appearance of the 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 font size for the chart title using the Text - Font Size property, let say, set the font size to 16pt.
2. Select a suitable color palette for the chart using the Set Color Palette tab available on the top of designer. In this example, we have chosen 'Cyborg'.
3. Customize the grid line settings for the chart plots using the MAJOR GRID - Style, MAJOR GRID - Color, and MAJOR GRID - Width properties.
4. Set the line color for the line chart for the Plot - Plot1 using the STYLE - Line Color property (Blue).
5. Change the TEXT - Format property for the UnitPrice field to 'Currency'. This property displays the price values in currency format.

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.