Responsive Chart Controls

#### Search Results

Search

# Responsive Chart Controls

- RCHART and RCHARTDATA

- RPIECHART

- Customizing Charts

- Migration to chartjs 4.4.3

The controls can be integrated into mobile pages and into other pages. The charts are built using the tool chart.js, see http://www.chartjs.org/

## RCHART and RCHARTDATA

The RCHART control supports rendering the following charts:

- line charts

- bar charts

- horizontal bar charts

An RCHART control can have several RCHARTDATA controls as sub controls. Each RCHARTDATA control describes rendering and data for the datasets shown in the chart.

#### Example

Several examples and corresponding description are provided in the Natural for Ajax demos.

#### Properties for RCHART

Basic
rcharttype | Type of the chart. Examples: bar,horizontalBar,line. | Optional | bar horizontalBar line
rcharttypeprop | Name of the adapter parameter that provides as value the type of the chart. Valid values are line, bar, horizontalBar | Optional |
labels | 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. | Optional |
labelstextid | 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". | Optional |
labelsprop | Name of the adapter parameter, which contains the label values. The field is generated as child of the valueprop field. | Optional | label1;label2;label3
valueprop | Name of the adapter parameter that provides the content of the control. | Obligatory |
style | 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. | Optional |
styleclasses | CSS style classes separated by a blank. | Optional |
stackedxaxis | If set to true the bars or lines of the chart are stacked on the x-axis. | Optional | true false
stackedyaxis | If set to true the bars or lines of the chart are stacked on the y-axis. | Optional | true false
selectedlabelprop | Name of the adapter parameter to which the value of the selected label is set on click. | Optional |
changeindexprop | 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. | Optional |
showvalueinchart | Show the values in the chart. Per default the values are shown as tooltip. | Optional | true false
showvaluepos | 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. | Optional | inside outside
showtooltip | If set to false tooltips are disabled. Default is true. | Optional | true false
showvaluefontfamily | The font family which is used to show the value. | Optional |
showvaluefontstyle | The font style which is used to show the value. | Optional |
showvaluefontsize | The font size which is used to show the value. | Optional | 1 2 3 int-value
showvaluefontcolor | Color of the control. Value must follow format "#rrggbb", e.g. #000000 for black. | Optional | #FF0000 #00FF00 #0000FF #FFFFFF #808080 #000000
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |
BarOptions
xaxisscalelabel | The text for the label of the scale for this axis. | Optional |
xaxisscaletextid | 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". | Optional |
yaxisscalelabel | The text for the label of the scale for this axis. | Optional |
yaxisscaletextid | 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". | Optional |
xaxisbarthickness | Width of the bars in pixels. If not set, the bars are sized automatically. | Optional | 20 30 40 50 60
xaxisbarpercentage | 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. | Optional | 0.4 0.5 0.7 0.8 0.9 1.0
xaxiscategorypercentage | Percent (0-1) of the available width (the space between the gridlines for small datasets) for each data-point to use for the bars. | Optional | 0.5 0.6 0.7 0.8 0.9 1.0
yaxisbarthickness | Height of the bar in pixels. If not set, the bars are sized automatically. | Optional | 20 30 40 50 60
LineOptions
showlines | If set to false the line is not drawn for this dataset. | Optional | true false
Miscellaneous
testtoolid | 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 | Optional |
width | 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 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 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. | Optional | 100 120 140 160 180 200 50% 100%
height | 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. | Optional | 100 150 200 250 300 250 400 50% 100%

#### Properties for RCHARTDATA

Basic
valueprop | Name of the adapter parameter that provides the content of the control. | Obligatory |
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |
label | The text for the label of this dataset. | Optional |
labeltextid | 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". | Optional |
datatype | 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. | Optional | 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
backgroundcolor | 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. | Optional | #ffff00 rgb(255, 255, 0) hsl(60, 100%, 50%)
borderwidth | Border width in pixels. | Optional | 2 4 6
bordercolor | Border color. | Optional | #ffff00 rgb(255, 255, 0) hsl(60, 100%, 50%)
onclickmethod | The event which is triggered in the Natural program when for instance a bar of a bar chart is clicked. | Optional |
legendclickmethod | Name of the event which is triggered when clicking on a legend. | Optional |
Bar
hoverbackgroundcolor | Background color when hovered. | Optional | #ffff00 rgb(255, 255, 0) hsl(60, 100%, 50%)
hoverborderwidth | Border width in pixel when hovered. | Optional | 2 4 6
hoverbordercolor | Border color when hovered. | Optional | #ffff00 rgb(255, 255, 0) hsl(60, 100%, 50%)
Line
borderdash | Length and spacing of dashes separated by semicolon. Example: 102 | Optional | 10;2
pointbordercolor | The border color for points. | Optional | #ffff00 rgb(255, 255, 0) hsl(60, 100%, 50%)
pointbackgroundcolor | The fill color for points | Optional | #ffff00 rgb(255, 255, 0) hsl(60, 100%, 50%)
pointborderwidth | The width of the point border in pixels | Optional | 2 4 6
pointradius | The radius of the point shape. If set to 0, nothing is rendered. | Optional | 7 15
pointhoverradius | The radius of the point when hovered. | Optional | 7 15
pointhitradius | The pixel size of the non-displayed point that reacts to mouse events. | Optional | 7 15
pointhoverbackgroundcolor | Point background color when hovered. | Optional | #ffff00 rgb(255, 255, 0) hsl(60, 100%, 50%)
pointhoverbordercolor | Point border color when hovered. | Optional | #ffff00 rgb(255, 255, 0) hsl(60, 100%, 50%)
pointhoverborderwidth | Border width of point when hovered | Optional | 2 4 6
pointstyle | The style of point. Options are : circle, triangle, rect, rectRounded, rectRot, cross, crossRot, star, line, and dash. | Optional | circle triangle rect rectRounded rectRot cross crossRot star line dash
steppedline | If true, the line is shown as a stepped line. | Optional | true false
Binding Bar
labelprop | Name of the adapter parameter, which contains the label value. The field is generated as child of the valueprop field of the RCHART control. | Optional |
backgroundcolorprop | The name of the adapter parameter which provides the backgroundcolor value. | Optional |
borderwidthprop | The name of the adapter parameter which provides the borderwidth value | Optional |
bordercolorprop | The name of the adapter parameter which provides the bordercolor value | Optional |
hoverbackgroundcolorprop | The name of the adapter parameter which provides the hoverbackgroundcolor value. | Optional |
hoverborderwidthprop | The name of the adapter parameter which provides the hoverborderwidth value. | Optional |
hoverbordercolorprop | The name of the adapter parameter which provides the hoverbordercolor value. | Optional |
Binding Line
labelprop | (already explained above) |  |
backgroundcolorprop | (already explained above) |  |
borderwidthprop | (already explained above) |  |
bordercolorprop | (already explained above) |  |
borderdashprop | The name of the adapter parameter which provides the borderdash value | Optional |
pointbordercolorprop | The name of the adapter parameter which provides the pointbordercolor value | Optional |
pointbackgroundcolorprop | The name of the adapter parameter which provides the pointbackgroundcolor value | Optional |
pointborderwidthprop | The name of the adapter parameter which provides the pointborderwidth value | Optional |
pointradiusprop | The name of the adapter parameter which provides the pointradius value | Optional |
pointhoverradiusprop | The name of the adapter parameter which provides the pointhoverradius value. | Optional |
pointhitradiusprop | The name of the adapter parameter which provides the pointhitradius value | Optional |
pointhoverbackgroundcolorprop | The name of the adapter parameter which provides the pointhoverbackgroundcolor value | Optional |
pointhoverbordercolorprop | The name of the adapter parameter which provides the pointhoverbordercolor value | Optional |
pointhoverborderwidthprop | The name of the adapter parameter which provides the pointhoverborderwidth value | Optional |
pointstyleprop | The name of the adapter parameter which provides the pointstyle value | Optional |
steppedlineprop | The name of the adapter parameter which provides the steppedline value | Optional |

## RPIECHART

The RPIECHART control supports rendering the following charts:

- pie charts

- doughnut charts

#### Example

Several examples and corresponding description are provided in the Natural for Ajax demos.

#### Properties

Basic
rcharttype | Type of the chart. Valid values: pie, doughnut. | Optional | pie doughnut
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |
data | A semicolon separated list with the data for the arcs. Example: 10;30;100 | Optional |
labels | 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. | Optional | label1;label2;label3
labelstextid | 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". | Optional |
showvalueinchart | Show the values in the chart. Per default the values are shown as tooltip. | Optional | true false
showvaluefontfamily | The font family which is used to show the value. | Optional |
showvaluefontstyle | The font style which is used to show the value. | Optional |
showvaluefontsize | The font size which is used to show the value. | Optional | 1 2 3 int-value
showvaluefontcolor | Color of the control. Value must follow format "#rrggbb", e.g. #000000 for black. | Optional | #FF0000 #00FF00 #0000FF #FFFFFF #808080 #000000
showtooltip | If set to false tooltips are disabled. Default is true. | Optional | true false
showpercentage | If set to true the value is shown in percentage. Default is false. | Optional | true false
backgroundcolor | 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. | Optional | #ffff00 rgb(255, 255, 0) hsl(60, 100%, 50%)
borderwidth | Border width in pixels. | Optional | 2 4 6
bordercolor | Border color. | Optional | #ffff00 rgb(255, 255, 0) hsl(60, 100%, 50%)
hoverbackgroundcolor | Background color when hovered. | Optional | #ffff00 rgb(255, 255, 0) hsl(60, 100%, 50%)
hoverborderwidth | Border width in pixel when hovered. | Optional | 2 4 6
hoverbordercolor | Border color when hovered. | Optional | #ffff00 rgb(255, 255, 0) hsl(60, 100%, 50%)
rotation | Starting angle to draw arcs from. Default is -0.5 * Math.PI. | Optional | -0.5 -2
circumference | Sweep to allow arcs to cover. Default is 2 * Math.PI. | Optional | 2 6
animaterotate | If true, will animate the rotation of the chart. | Optional | true false
animatescale | If true, will animate scaling the Doughnut from the center. | Optional | true false
animateselection | 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. | Optional | 5 10
style | 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. | Optional |
styleclasses | CSS style classes separated by a blank. | Optional |
onclickmethod | The event which is triggered in the Natural program when for instance a bar of a bar chart is clicked. | Optional |
legendclickmethod | Name of the event which is triggered when clicking on a legend. | Optional |
Binding
rcharttypeprop | Name of the adapter parameter that provides as value the type of the chart. Valid values are pie and doughnut. | Optional |
dataprop | 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 | Optional |
labelsprop | Name of the adapter parameter, which contains the label values as semicolon separated list. Example: 2015;2016;2017. | Optional |
backgroundcolorprop | The name of the adapter parameter which provides the backgroundcolor value. | Optional |
borderwidthprop | The name of the adapter parameter which provides the borderwidth value | Optional |
bordercolorprop | The name of the adapter parameter which provides the bordercolor value | Optional |
hoverbackgroundcolorprop | The name of the adapter parameter which provides the hoverbackgroundcolor value. | Optional |
hoverborderwidthprop | The name of the adapter parameter which provides the hoverborderwidth value. | Optional |
hoverbordercolorprop | The name of the adapter parameter which provides the hoverbordercolor value. | Optional |
rotationprop | The name of the adapter parameter which provides the rotation value | Optional |
circumferenceprop | The name of the adapter parameter which provides the circumference value | Optional |
animaterotateprop | The name of the adapter parameter which provides the animaterotate value | Optional |
animatescaleprop | The name of the adapter parameter which provides the animatescale value | Optional |
selectedlabelprop | Name of the adapter parameter to which the value of the selected label is set on click. | Optional |
changeindexprop | 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. | Optional |
Miscellaneous
testtoolid | 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 | Optional |
width | 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 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 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. | Optional | 100 120 140 160 180 200 50% 100%
height | 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. | Optional | 100 150 200 250 300 250 400 50% 100%

## Customizing Charts

It's possible to customize the rendering of the charts in a separate options file. This enables the use of a similar rendering for many charts in an application. Apply this options file to your page by setting the property `chartconfigfile` in the `NATPAGE` tag. For an example see the NaturalAjaxDemos.

## Migration to chartjs 4.4.3

RCHART and RPIECHART are based on chartjs (see https://www.chartjs.org/). From Natural for Ajax 9.3.2, chartjs 2 changes to chartjs 4.4.3. When using a custom options file – property `chartconfigfile` in the `NATPAGE` tag – then you must migrate this custom options file to the chartjs 4.4.3 (see https://www.chartjs.org/docs). In case of migration questions, please contact support.

Without custom options files, there may be only small rendering changes. Chartjs 4.4.3 improves the responsive rendering of charts. It now also considers the height of the container during the resizing. The size of your chart could look different with chartjs 4.4.3 compared to chartjs 2. You may need to adjust the size/width settings of the container accordingly. Check the samples in the NaturalAjaxDemos. They make use of the new enhanced responsiveness. In case of questions, please contact support.

### On this page

- RCHART and RCHARTDATA
- RPIECHART
- Customizing Charts
- Migration to chartjs 4.4.3