Adding Charts to the Report

This page addresses how charts are added to the report design.

Preparing the Band for the Chart

In this example, we will add the chart to the outer Group Header Band (GroupHeaderBand1) which groups the data according to the ObjectDescription column.

To be able to fit the chart into the band, expand the height of the Group Header Band.

Adding a Chart to the Band

The puzzle-piece icon (called Infographics) in the Elements Section on the left of the Report Designer Workspace, hosts various chart types (in many cases with subtypes) which can be added to the report. The Stimulsoft documentation provides an Overiew of the Supported Chart Types.
For this example we will use the Line > Line option.

To add a trend chart to the report, …​

1 Click the Infographics icon and the select the Line > Line option.

2 With the pencil mouse pointer, click-and-hold at the intended upper-left-hand corner of the chart and drag the mouse pointer to the intended lower-right-hand corner to define the location and size of the chart inside the Group Header Band. The location as well as size can be readjusted later.

As soon as you let go of the left mouse button, the Chart Editor dialog will open.

The Chart Editor

The Chart Editor hosts a lot of configuration options for the chart. A number of these options will be addressed in the following sections. For full information regarding the Chart Editor and its options, see the Chart Editor page in the Stimulsoft documentation.

[1] - Tabs - the top level of the Chart Editor organization
[2] - Element List - here the element for which the properties are configured is specified
[3] - Preview - a simple preview of the chart configuration; latest property changes are not represented
[4] - Property Options; highest level of property organization for the selected chart element
[5] - Properties List, separated into Property Sections (and Sub-Sections)
[6] - Property Settings - sort properties, switch between Properties (table icon) and Events (flash icon)

In general the configuration steps for the example will follow the order of the tabs - as the top level of the Chart Editor organization - but as the Series tab is opened automatically when the Chart Editor dialog is opened, it forms an exception to the rule and will be covered first.

The Series Tab

The Series tab contains all the configuration options which pertain to the variable data which is to be visualized by the chart (e.g. Value and Timestamp).

Axes Configuration

The first thing to configure is which information is shown on the X-axis and which is shown on the Y-axis. This is done in the Common options of the Series tab of the Chart Editor dialog.

1 There, go the Value section and expand the drop-down list for the ValueDataColumn to open the Dictionary tree.

2 Expand the Hist-EX-DD-PD_ht_data table, and double-click on the Value column to select it.

3 In section Argument section, the x-axis position is specified. Click on the drop-down arrow for ArgumentDataColumn, expand the Hist-EX-DD-PD_ht_data table again, and double-click on the Timestamp column.

Selecting the Series Labels

The Chart Editor offers two alternative ways off configuring the information displayed in the labels for the actual data points in the chart. The ShowSeriesLabels property defines which one is applied. - FromChart - the configuration specified in the Labels tab is taken into account. - FromSeries - the configuration as defined in Series tab > Series Labels option will be used.

1 For this example make sure that ShowSeriesLabels is set to FromChart.

Editing the Series Title

1 Expand the Common properties section and click on the …​ icon for the Title property to open the Text Editor for this property.

2 Delete Series 1, and from the Dictionary panel on the right side of the Text Editor dialog, drag and drop Data Sources > ds > Hist-EX-DD-PD_ht_data > Hist-EX-DD-PD_ht_items > ObjectName into the text panel on the left.
The Series Title(s) will be used as the Key(s) for the Legend.

Automatic Chart Generation

The AutoSeriesKeyDataColumn property defines by which criterion data is identified as belonging to the same series.
For this example, the Series' are identified by the ObjectName. Therefore …​

1 Select Hist-EX-DD-PD_ht_data.Hist-EX-DD-PD_ht_items.ObjectName from the datasource tree.

Filtering Series Data

The data used for the Automatic Chart Generation is not restricted by the Bands. So, although the chart is placed on a Group Header Band, data which does not belong to the group defined for the Band will also be displayed in the chart by default. The Filters option in the Series tab can be used to restrict the data which will be used for the Automatic Chart Generation. This requires some preparation outside the Chart Editor dialog. Therefore this topic is addressed in a dedicated section below.

The Chart Tab

In the Chart tab, the appearance of the context elements (i.e. the Legend, Title, data Tables but also Constant Lines and Strips) of the chart is configured.

The Legend

It has already been mentioned that the data for the chart needs to be filtered to prevent trend lines which do not belong to the current instance from being displayed.
To avoid irrelevant entries in the legend, …​

1 open the Legend properties section and check the checkbox for HideSeriesWithEmptyTitle.

The Chart Title

1 To specify a title for the chart, select the Title option in the Chart tab.

2 In the Common property section, enter the title for the Text property and make sure that the checkbox for the Visible property is set.

The chart title is entered as text which will be used for all the instances of the chart which are created for the report, e.g. on repeating Bands.

The Area Tab

The Area tab hosts the configuration options for the appearance of the main area of the chart, i.e. Axes configuration, Grid Lines and Interlacing.

1 To specify the format how X-axis labels are displayed …​

  1. In the X-axis option, go to the Common property section and expand the Labels subsection.

  2. For the Format property, enter hh:mm

2 To adjust the range of the X-axis, …​

  1. expand the Range property section and deselect the checkbox for the Auto property.

  2. Then set Minimum to 1 and Maximum to the number of values which shall be displayed in the chart.
    For this example set it to 4.

3 To set the title for the X-axis …​

  1. Expand the Title property section and set the Text property to Time

The Labels Tab

In the Labels tab, the labels for the actual data points are configured.The ValueType property specifies which information is displayed while most other properties define how this is displayed.

In the example, the Line diagram is meant to provide a quick first visual impression, where the specific values would be distracting.

To hide the values, …​

1 Select None from the Labels Options on the left. If a different Labels Option is selected, unchecking the Visible property in the Common section also hides the labels.

The configuration in the Labels tab is only taken into account, if the Series tab > Common options > Common section > ShowSeriesLabels property is set to FromChart.

The Styles Tab

In the Styles tab, various predefined combinations of color schemes and font designs can be selected which will be applied to all chart elements for which the AllowApplyStyle checkbox in the Appearance section is selected. For all other chart elements individual configurations are applied.

Depending on the chart element, the AllowApplyStyle property may exist on multiple hierarchical levels, providing granular control over where the style will be applied.

Filtering Series Data

The data provided to the chart is NOT restricted by the band in which it is placed. For charts, data filtering needs to be defined separately, otherwise the chart tries to display all data. For detailed information, see page on Filters in the Stimulsoft documentation.

To communicate which data set is currently processed by the report / group, a variable is needed. This variable needs to contain the same value which is used to define the current group. In the example data is grouped according the the ObjectDescriptions column.

Creating a Variable

To create Variable …​

1 In Dictionary tab, right-click Variables and select New Variable…​.

2 In the New Variable dialog, give the new variable a reasonable name. For the example use CurrentObjectDescription
Since we want to store the identifier, which basically is a string, the Type of this variable needs to be string.

Assigning a Value to a Variable

To assign a Value to the Variable - to store the identifier for the current data set in the variable - …​

1 In the Chart Editor, click on the Band containing the chart. For this example, this is GroupHeaderBand2.

2 Then go to the Properties tab and click on Flash icon in the top bar.

3 In the Print Events section, for BeforePrintEvent, enter

<VariableName> = Hist_EX_DD_PD_ht_data.Hist_EX_DD_PD_ht_items.ObjectDescription

Now, whenever an instance of this Group Header Band is to be added to the generated report, the variable is updated with the current value for the specified column.

Filtering Chart Data According to a Value Stored in a Variable

To filter the data for the chart by a variable - so that only data which belongs to the current data set is taken into account by the chart - …​

1 Double-click the on the chart to open the Chart Editor.

2 In the properties panel, got to the Filters section.

3 Click Add Filter.

4 Set Field Is to Expression, Data Type to String, Condition to equal to and Value to <VariableName> == Hist_EX_DD_PD_ht_data.Hist_EX_DD_PD_ht_items.ObjectDescription.
So only the data which matches the current instance of the band is used for this instance of the chart.

The Report with the Chart

Save the report layout before continuing.
It should look similar to the screenshot shown on the right.

Go to the Preview tab to see how your Report layout will look.