Introducing Docomotion Charts

A chart is a graphical representation of data, in which the data is represented by symbols, such as bars in a bar chart, lines in a line chart, or slices in a pie chart. A chart can represent numeric data, functions or some kinds of qualitative structure and provides different info.

Charts are placed into Forms using the chart tag.

A chart image can be automatically generated from the variable data, supplied by the XML file, thereby implementing the business logic on the chart values.

Chart tags are independent of Script tags but can use scripts for data manipulation purposes.

To work with charts, you must first install Microsoft Chart Controls for Microsoft.NET Framework 3.5 (MSCHARTS).

You can add column, line, pie or stacked column type charts, 2 or 3 dimensional, define the resolution (in dpi) of the chart and format each chart type.

It is possible, depending on the chart type, to change the font size, color and font type for X and Y axis, titles, values and description. In some cases it is also possible to change the location or directionality of the text.

Column /Line type Chart

When adding a Line or Column chart the following formatting options are available for the X Axis: it is possible to restrict the number of values displayed on the X-Axis to the number of values that can be clearly displayed on the axis. It is also possible to choose between setting the axis as a Data Tag axis type displaying data tag (runtime) values and Numeric axis type displaying numeric values (with a configurable Start Value and Interval).

The Y-axis values can also be restricted to the number of values that can be clearly displayed on the axis. It is also possible to choose whether to display or hide values on the Chart.

When adding Column or Line Charts you can use more than one data series.

Pie Chart

It is possible to add a Pie chart.
When creating a Pie chart you use only one data series.

Stacked Column Charts

You can add Stacked Column charts for one or more data series.

Adding Charts to Forms

 

Configuring the General Properties of the Chart

To define the Chart tag General properties:

1.  In the document, click the location where you want to place the chart(s) and then in the Data Repository panel, double-click the Chart Tag button.

The Chart Properties window appears in the General view.

2.  Enter a Name for the chart and a Description.

3.  Select a Type option and a Dimension (Two dimensional / Three dimensional) option.

4.  From the Resolution drop-down list select the chart resolution (in dpi).

5.  In the Legend area, select the Legend Position and the Legend Alignment.

Legend position is not available in Stacked Column charts.

6.  Click the Appearance tab; the Appearance tab view appears. The view of the Appearance tab depends on the type of chart you selected.

Configuring the Chart Appearance

You can click Example to view an example of the formatting you selected.

In the Appearance tab of a Column / Line chart you can format the chart title and appearance of the X and Y axes.

To define the appearance to a Column/Line Chart:

2.  In Title> Label field, enter the name of the chart to appear in the form and select the font size style and color for the label.

4.  Enter the required Axis X Label Name and select the font size, style and color for the X label.

5.  Select the Fixed Number of Intervals option if you want to ensure that values can be clearly displayed on the X-axis; the number of displayed values will be automatically adjusted.

6.  Select Indexed Values to customize the X-axis values, this affects the design of the chart.

7.  Select a Type option (for the Text on the X axis):
     a.  Number – Design the chart with equidistant elements along the X axis
     b.  Start Value – Define the value at which the chart begins, along the X axis (the default value is 10).
     c.  Interval value – Define the equidistant intervals between the elements, along the X axis (the default value is 10).
    d.  Data Tag – Enables designing the chart according to the input data.

8.  Define the Text format: Font type size, style and color, as well as orientation (rotation angle in degrees)

10.  Enter the Y Axis Label Name and select the label format: font type, size, style and text color.

11.  Select the Fixed Number of Intervalsoption if you want to ensure that values can be clearly displayed on the Y-axis; the number of displayed values will be automatically adjusted.

12.  Select Show Valueto display the Y axis value of each chart segment (column, line).

13.  Define the Text format: Font type size, style and color.

ColumnExplained
# Formatting Example
1   Title
2   Y axis: Text
3   Y axis: Label
4  X axis: Text (orientation 180 in example)
5  X axis: Label
6  Legend Position (Right / Middle in the example)
7  Y axis: Show value if selected

To define the Appearance for a Pie Chart:

In the Appearance tab of a Pie chart you can format the chart title: font type, size, style and color.

To define the Appearance for a Stacked Column chart:

In the Appearance tab of a Stacked Column chart you can format the chart Title, Description and Value.

3.  Enter the required Name for the label and select the font size, style and color for the X label.

4.  Select the font size, style and color for the text.

6.  Enter the value label Name and select the label format: font type, size, style and text color.

7.  Select the Fixed Number of Intervals option if you want to ensure that values can be clearly displayed on the Y-axis; the number of displayed values will be automatically adjusted.

8.  Select Show Value if you want to display the Y axis value of each chart segment.

Note that if the segment is too small the value might appear on an adjacent segment.

9.  You can type a string in Append String; this string will appear in the output for each chart segment (next or instead of the value).

10.  Define the Text format: Font type size, style and color

Stacked Column with numbers
# Formatting Example
1   Title
2   Value: Text
3   Value: Label
4 Description: Text (orientation 180 in example)
5  Description: Label
6  Data Labels: Description, Value (if selected), append string. Formatting the Data Label font is done in the Data tab.

Configuring the Data Series

In the Data tab, define the Data series to use for the chart.

In Stacked Column charts you can also configure the font characteristics for the Data Label (Description, Value (if selected), append string

To define the Data Series for a chart:

2.  Adding Series:

3.  Enter the Series name.

a.  To add one or more Series, right-click Series and in the left pane and select Add Series.

b.  To remove a series, right-click the name of the series you want to delete in the left pane and select Delete.

c.  Enter a Legend text and select the legend color.

Legend color is available only in Column / Line charts.

After the scripts have been defined, the buttons change to GREEN: Edit X Value and Edit Y Value buttons.When selecting “Fixed Interval/Data Tag” in the Appearance tabbed view, both the Set X Value button and the Set Y Value button are active.

When selecting “Fixed Interval/Number” in the Appearance tabbed view, only the Set Y Value button is active.

8.  In the Line-SET CHART DATA pane click Expression, and in the Edit Expression area select the Operand Type, for example Data Tag and the specific Data Tag you want to use for the Chart.
9.  Click Save.

For a detailed description of the Script Editor window see Adding Scripts – Overview.

10.  If active, click the Set Y Value/ Set Value button; the Script Editor: Input Tag “Chart” window appears. Repeat step 7-9.
11. Define the font for the Data Label; Set the Font type, Font Size and Style and Text Color.