Responsive Chart Controls

Type of the chart. Examples: bar,horizontalBar,line.

bar

horizontalBar

line

Name of the adapter parameter that provides as value the type of the chart. Valid values are line, bar, horizontalBar

Semicolon separated list. Example: 2015;2016;2017. In a bar chart these are the labels shown for the x-axis. In a horizontal bar chart these are the labels shown for the y-axis.

Multi language dependent text that is displayed inside the control. The "textid" is translated into a corresponding string at runtime.

Do not specify a "name" inside the control if specifying a "textid".

Name of the adapter parameter, which contains the label values. The field is generated as child of the valueprop field.

label1;label2;label3

Name of the adapter parameter that provides the content of the control.

CSS style definition that is directly passed into this control.

With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are:

border: 1px solid #FF0000

background-color: #808080

You can combine expressions by appending and separating them with a semicolon.

Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function.

CSS style classes separated by a blank.

If set to true the bars or lines of the chart are stacked on the x-axis.

true

false

If set to true the bars or lines of the chart are stacked on the y-axis.

true

false

Name of the adapter parameter to which the value of the selected label is set on click.

Name of the adapter parameter providing a value which indicates whether the control should be refreshed with new data on the client or not. A different value than the previous triggers the refresh. It does not need to be a higher value.

Show the values in the chart. Per default the values are shown as tooltip.

true

false

If set to inside the values are shown inside the chart. If set to outside the values are set outside the chart. Default is inside.

inside

outside

If set to false tooltips are disabled. Default is true.

true

false

The font family which is used to show the value.

The font style which is used to show the value.

The font size which is used to show the value.

1

2

3

int-value

Color of the control. Value must follow format "#rrggbb", e.g. #000000 for black.

#FF0000

#00FF00

#0000FF

#FFFFFF

#808080

#000000

Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view.

The text for the label of the scale for this axis.

Multi language dependent text that is displayed inside the control. The "textid" is translated into a corresponding string at runtime.

Do not specify a "name" inside the control if specifying a "textid".

The text for the label of the scale for this axis.

Multi language dependent text that is displayed inside the control. The "textid" is translated into a corresponding string at runtime.

Do not specify a "name" inside the control if specifying a "textid".

Width of the bars in pixels. If not set, the bars are sized automatically.

20

30

40

50

60

Percent (0-1) of the available width each bar should be within the category percentage. 1.0 will take the whole category width and put the bars right next to each other.

0.4

0.5

0.7

0.8

0.9

1.0

Percent (0-1) of the available width (the space between the gridlines for small datasets) for each data-point to use for the bars.

0.5

0.6

0.7

0.8

0.9

1.0

Height of the bar in pixels. If not set, the bars are sized automatically.

20

30

40

50

60

If set to false the line is not drawn for this dataset.

true

false

Use this attribute to assign a fixed control identifier that can be later on used within your test tool in order to do the object identification

Width of the control.

There are three possibilities to define the width:

(A) You do not define a width at all. In this case the width of the control will either be a default width or - in case of container controls - it will follow the width that is occupied by its content.

(B) Pixel sizing: just input a number value (e.g. "100").

(C) Percentage sizing: input a percantage value (e.g. "50%"). Pay attention: percentage sizing will only bring up correct results if the parent element of the control properly defines a width this control can reference. If you specify this control to have a width of 50% then the parent element (e.g. an ITR-row) may itself define a width of "100%". If the parent element does not specify a width then the rendering result may not represent what you expect.

100

120

140

160

180

200

50%

100%

Height of the control.

There are three possibilities to define the height:

(A) You do not define a height at all. As consequence the control will be rendered with its default height. If the control is a container control (containing) other controls then the height of the control will follow the height of its content.

(B) Pixel sizing: just input a number value (e.g. "20").

(C) Percentage sizing: input a percentage value (e.g. "50%"). Pay attention: percentage sizing will only bring up correct results if the parent element of the control properly defines a height this control can reference. If you specify this control to have a height of 50% then the parent element (e.g. an ITR-row) may itself define a height of "100%". If the parent element does not specify a width then the rendering result may not represent what you expect.

100

150

200

250

300

250

400

50%

100%

Name of the adapter parameter that provides the content of the control.

Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view.

The text for the label of this dataset.

Multi language dependent text that is displayed inside the control. The "textid" is translated into a corresponding string at runtime.

Do not specify a "name" inside the control if specifying a "textid".

By default, the control is managing its content as string. By explicitly setting a datatype you can define that the control will format the data coming from the server: if the field has datatype "date" and the user inputs "010304" then the input will be translated into "01.03.2004" (or other representation, dependent on date format settings).

Please note: the datatype "float" is named a bit misleading - it represents any decimal format number. The server side representation may be a float value, but also can be a double or a BigDecimal property.

date

float

int

long

time

timestamp

color

xs:decimal

xs:double

xs:date

xs:dateTime

xs:time

------------------------

N n.n

P n.n

string n

L

xs:boolean

xs:byte

xs:short

The fill color of the bars or the fill color under the lines or the fill color of the arcs depending on the chart type.

#ffff00

rgb(255, 255, 0)

hsl(60, 100%, 50%)

Border width in pixels.

2

4

6

Border color.

#ffff00

rgb(255, 255, 0)

hsl(60, 100%, 50%)

The event which is triggered in the Natural program when for instance a bar of a bar chart is clicked.

Name of the event which is triggered when clicking on a legend.

Background color when hovered.

#ffff00

rgb(255, 255, 0)

hsl(60, 100%, 50%)

Border width in pixel when hovered.

2

4

6

Border color when hovered.

#ffff00

rgb(255, 255, 0)

hsl(60, 100%, 50%)

Length and spacing of dashes separated by semicolon. Example: 10

10;2

The border color for points.

#ffff00

rgb(255, 255, 0)

hsl(60, 100%, 50%)

The fill color for points

#ffff00

rgb(255, 255, 0)

hsl(60, 100%, 50%)

The width of the point border in pixels

2

4

6

The radius of the point shape. If set to 0, nothing is rendered.

7

15

The radius of the point when hovered.

7

15

The pixel size of the non-displayed point that reacts to mouse events.

7

15

Point background color when hovered.

#ffff00

rgb(255, 255, 0)

hsl(60, 100%, 50%)

Point border color when hovered.

#ffff00

rgb(255, 255, 0)

hsl(60, 100%, 50%)

Border width of point when hovered

2

4

6

The style of point. Options are : circle, triangle, rect, rectRounded, rectRot, cross, crossRot, star, line, and dash.

circle

triangle

rect

rectRounded

rectRot

cross

crossRot

star

line

dash

If true, the line is shown as a stepped line.

true

false

Name of the adapter parameter, which contains the label value. The field is generated as child of the valueprop field of the RCHART control.

The name of the adapter parameter which provides the backgroundcolor value.

The name of the adapter parameter which provides the borderwidth value

The name of the adapter parameter which provides the bordercolor value

The name of the adapter parameter which provides the hoverbackgroundcolor value.

The name of the adapter parameter which provides the hoverborderwidth value.

The name of the adapter parameter which provides the hoverbordercolor value.

The name of the adapter parameter which provides the borderdash value

The name of the adapter parameter which provides the pointbordercolor value

The name of the adapter parameter which provides the pointbackgroundcolor value

The name of the adapter parameter which provides the pointborderwidth value

The name of the adapter parameter which provides the pointradius value

The name of the adapter parameter which provides the pointhoverradius value.

The name of the adapter parameter which provides the pointhitradius value

The name of the adapter parameter which provides the pointhoverbackgroundcolor value

The name of the adapter parameter which provides the pointhoverbordercolor value

The name of the adapter parameter which provides the pointhoverborderwidth value

The name of the adapter parameter which provides the pointstyle value

The name of the adapter parameter which provides the steppedline value

Type of the chart. Valid values: pie, doughnut.

pie

doughnut

Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view.

A semicolon separated list with the data for the arcs. Example: 10;30;100

Semicolon separated list. Example: 2015;2016;2017. In a bar chart these are the labels shown for the x-axis. In a horizontal bar chart these are the labels shown for the y-axis.

label1;label2;label3

Multi language dependent text that is displayed inside the control. The "textid" is translated into a corresponding string at runtime.

Do not specify a "name" inside the control if specifying a "textid".

Show the values in the chart. Per default the values are shown as tooltip.

true

false

The font family which is used to show the value.

The font style which is used to show the value.

The font size which is used to show the value.

1

2

3

int-value

Color of the control. Value must follow format "#rrggbb", e.g. #000000 for black.

#FF0000

#00FF00

#0000FF

#FFFFFF

#808080

#000000

If set to false tooltips are disabled. Default is true.

true

false

If set to true the value is shown in percentage. Default is false.

true

false

The fill color of the bars or the fill color under the lines or the fill color of the arcs depending on the chart type.

#ffff00

rgb(255, 255, 0)

hsl(60, 100%, 50%)

Border width in pixels.

2

4

6

Border color.

#ffff00

rgb(255, 255, 0)

hsl(60, 100%, 50%)

Background color when hovered.

#ffff00

rgb(255, 255, 0)

hsl(60, 100%, 50%)

Border width in pixel when hovered.

2

4

6

Border color when hovered.

#ffff00

rgb(255, 255, 0)

hsl(60, 100%, 50%)

Starting angle to draw arcs from. Default is -0.5 * Math.PI.

-0.5

-2

Sweep to allow arcs to cover. Default is 2 * Math.PI.

2

6

If true, will animate the rotation of the chart.

true

false

If true, will animate scaling the Doughnut from the centre.

true

false

Set this to an integer value > 0 if you want the selected slice to have a different radius. Example: A value of 10 means that the selected slice has a 10% bigger radius than the unselected slices.

5

10

CSS style definition that is directly passed into this control.

With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are:

border: 1px solid #FF0000

background-color: #808080

You can combine expressions by appending and separating them with a semicolon.

Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function.

CSS style classes separated by a blank.

The event which is triggered in the Natural program when for instance a bar of a bar chart is clicked.

Name of the event which is triggered when clicking on a legend.

Name of the adapter parameter that provides as value the type of the chart. Valid values are pie and doughnut.

The name of the adapter parameter which provides the data for the arcs at runtime. The value must be a semicolon separated list. Example: 10;20;30

Name of the adapter parameter, which contains the label values as semicolon separated list. Example: 2015;2016;2017.

The name of the adapter parameter which provides the backgroundcolor value.

The name of the adapter parameter which provides the borderwidth value

The name of the adapter parameter which provides the bordercolor value

The name of the adapter parameter which provides the hoverbackgroundcolor value.

The name of the adapter parameter which provides the hoverborderwidth value.

The name of the adapter parameter which provides the hoverbordercolor value.

The name of the adapter parameter which provides the rotation value

The name of the adapter parameter which provides the circumference value

The name of the adapter parameter which provides the animaterotate value

The name of the adapter parameter which provides the animatescale value

Name of the adapter parameter to which the value of the selected label is set on click.

Name of the adapter parameter providing a value which indicates whether the control should be refreshed with new data on the client or not. A different value than the previous triggers the refresh. It does not need to be a higher value.

Use this attribute to assign a fixed control identifier that can be later on used within your test tool in order to do the object identification

Width of the control.

There are three possibilities to define the width:

(A) You do not define a width at all. In this case the width of the control will either be a default width or - in case of container controls - it will follow the width that is occupied by its content.

(B) Pixel sizing: just input a number value (e.g. "100").

(C) Percentage sizing: input a percantage value (e.g. "50%"). Pay attention: percentage sizing will only bring up correct results if the parent element of the control properly defines a width this control can reference. If you specify this control to have a width of 50% then the parent element (e.g. an ITR-row) may itself define a width of "100%". If the parent element does not specify a width then the rendering result may not represent what you expect.

100

120

140

160

180

200

50%

100%

Height of the control.

There are three possibilities to define the height:

(A) You do not define a height at all. As consequence the control will be rendered with its default height. If the control is a container control (containing) other controls then the height of the control will follow the height of its content.

(B) Pixel sizing: just input a number value (e.g. "20").

(C) Percentage sizing: input a percentage value (e.g. "50%"). Pay attention: percentage sizing will only bring up correct results if the parent element of the control properly defines a height this control can reference. If you specify this control to have a height of 50% then the parent element (e.g. an ITR-row) may itself define a height of "100%". If the parent element does not specify a width then the rendering result may not represent what you expect.

100

150

200

250

300

250

400

50%

100%