Bar Chart

A bar chart is used to compare several variables with a single value. They are helpful to compare categories.

A bar chart can contain the following elements:

<Bar>: Contains all element that belong to the bar chart. Defines how the diagram is displayed.
<BarData>: Defines how the data is displayed. For each category in the bar chart a <BarData>-Element must be defined.
<Axis>: Defines the axis labels.

General Attributes

The following attributes are provided for all elements of a bar chart:

Attribute	Description
`fontFamily`	Defines the font family. This attribute overrides the default font of the Web App for this control. If the attribute is defined on an element, the font family is inherited by the element's child elements, unless the child elements have the `fontFamily` attribute explicitly set. This attribute doesn't work with the `Image`, `Maps` and `HtmlDocument` controls. Possible values: `MainFont`: Stored main font Font code from the font palette, e.g. `Font04`
`fontSize`	Defines the font size. This attribute overrides the default font size of the Web App for this control. This attribute doesn't work with the `Image`, `Maps` and `HtmlDocument` controls. Possible values: Any integer or decimal number with a dot as decimal separator, e.g. `20`; `20.8`; `.9` Font size in pixels, e.g. `20px` Font size in points, e.g. `18pt` Font size compared to the font size of the parent element, e.g. `.8em` or `120` Key words: `xx-Small`, `x-small`, `small`, `medium`, `large`, `x-large`, `xx-large`, `smaller`, `larger`
`fontStretch`	Sets the width of the single characters. This attribute overrides the default width of the characters of the Web App for this control. Possible values: `Condensed` `Expanded` `ExtraCondensed` `ExtraExpanded` `Medium` `Normal` (default) `SemiCondensed` `SemiExpanded` `UltraCondensed` `UltraExpanded` This attribute doesn't work with the `Image`, `Maps` and `HtmlDocument` controls.
`fontStyle`	Defines the font style. This attribute overrides the default style of the characters of the Web App for this control. Possible values: `italic`: italic characters `normal`: normal characters (default) `oblique`: italic characters (calculated) This attribute doesn't work with the `Image`, `Maps` and `HtmlDocument` controls.
`fontWeight`	Defines the font weight. This attribute overrides the default style of the characters of the Web App for this control. Possible values: `Black` `Bold` `DemiBold` `ExtraBlack` `ExtraBold` `ExtraLight` `Heavy` `Light` `Medium` `Normal` (default) `Regular` `SemiBold` `Thin` `UltraBlack` `UltraBold` `UltraLight` This attribute doesn't work with the `Image`, `Maps` and `HtmlDocument` controls.
`foreground`	Defines the font color. This setting overwrites the default color of the color scheme! Possible values: Hexadecimal color value, e.g. `ff5a00` Do not use a hash in front of the color value! do not use a shortened notation of the color value! Color code from the color palette of the Web App (see (7.4.0-en) Theming), e.g. `A200`

Bar

<Bar>: Contains all element that belong to the bar chart. Defines how the diagram is displayed.

In addition to the general attributes, <Bar> can have the following attributes:

Attribute Description

legend

Defines if a legend is to displayed.

Possible values: true (default) / false

stacked

Defines if the bar chart is displayed as stacked diagram.

Possible values: true / false (default)

BarData

<BarData>: Child element of <Bar>. Defines how the data is displayed. For each category in the bar chart a <BarData>-Element must be defined.

In addition to the general attributes, <BarData> can have the following attributes:

Attribute	Description
`category`	Defines which category (`category`) the value is assigned to. Possible values: Data Binding
`color`	Bar color Possible values: Hexadecimal color value or data binding expression (Color) If the attribute `color` is not specified, the colors defined within the Theming Editor will be used.
`data`	Defines which data object of the data source is visualized. Possible values: Data Binding
`name`	Defines the name of the data that is displayed in the legend. Possible values: Any string or Data Binding
`value`	Defines which value of the data object is visualized. Possible values: Data Binding

Axis

<Axis>: Child element of <Bar>. Defines the axis labels.

In addition to the general attributes, <Axis> can have the following attributes:

Attribute	Description
`color`	Defines the axis color Possible values: Hexadecimal color value, e.g. `ff5a00` Do not use a hash in front of the color value! Do not use a shortened notation of the color value! Color code from the color palette of the Web App (see Theming), e.g. `A200`

<Tooltip>: Child element of <Bar>. Defines how the tooltip for the single values within the chart is displayed.

For <Tooltip> the general attributes (see above) can be defined.

Empty data

If you reload additional data using a process, the already loaded chart is not removed. If you want to overwrite the already loaded chart with the new data, the attribute empty="true" must be declared in the data. The attribute empties the existing data.

Input 1

Beispiel 1:

XML

<?xml version="1.0" encoding="UTF-8"?>
<Ok>
	<b2 empty="true"/>
	<b1>
		<a>1</a>
		<b>1</b>
	</b1>
</Ok>

Input 2

Beispiel 1:

XML

<?xml version="1.0" encoding="UTF-8"?>
<Ok>
	<b1 empty="true"/>
	<b2>
		<a>1</a>
		<b>1</b>
	</b2>
</Ok>

Chart in the Component

Beispiel 1:

XML

<Chart>
	<Bar>
		<BarData
			category="#a"
			data="#b1"
			value="#b" />
		<BarData
			category="#a"
			data="#b2"
			value="#b" />
	</Bar>
</Chart>

Examples

Example 1:

XML

<Properties>
	<Property name="DataSource" type="Complex">
		<Property name="CompanyX" type="List">
			<Property name="Category" type="String"/>
			<Property name="Money" type="Integer"/>
		</Property>
		<Property name="CompanyY" type="List">
			<Property name="Category" type="String"/>
			<Property name="Money" type="Integer"/>
		</Property>
	</Property>
</Properties>
<FlowLayout>
	<Chart fontFamily="Font03" title="Profit comparison between two companies">
		<Bar stacked="true">
			<Tooltip fontFamily="Font02" fontSize="10"/>
			<Axis fontFamily="Font03" fontSize="10"/>
			<BarData category="#Category" data="#DataSource.CompanyX" fontFamily="Font03" name="Company X" value="#Money"/>
			<BarData  category="#Category" data="#DataSource.CompanyY" fontFamily="Font03" name="Company Y" value="#Money"/>
		</Bar>
	</Chart>
</FlowLayout>

The above example leads to the following diagram:

Example 2:

XML

<Property name="Datasource" type="Complex">
    <Property name="Bar1" type="List">
        <Property name="category" type="String"></Property>
        <Property name="value" type="Integer"></Property>
    </Property>
    <Property name="Bar2" type="List">
        <Property name="category" type="String"></Property>
        <Property name="value" type="Integer"></Property>
    </Property>
    <Property name="Bar3" type="List">
        <Property name="category" type="String"></Property>
        <Property name="value" type="Integer"></Property>
    </Property>
 
	...
	...
	...
 
<Chart title="Bar">
    <Bar>
        <BarData data="#Datasource.Bar1" category="#category" value="#value"
            name="Data 1" />
        <BarData data="#Datasource.Bar2" category="#category" value="#value"
            name="Data 2" />
        <BarData data="#Datasource.Bar3" category="#category" value="#value"
            name="Data 3" />
    </Bar>
</Chart>
 
<Chart title="Stacked Bar">
    <Bar stacked="true">
        <BarData data="#Datasource.Bar1" category="#category" value="#value"
            name="Data 1" />
        <BarData data="#Datasource.Bar2" category="#category" value="#value"
            name="Data 2" />
        <BarData data="#Datasource.Bar3" category="#category" value="#value"
            name="Data 3" />
    </Bar>
</Chart>

The element BarData is used to display a category in the diagram. The displayed data itself is contained in the property Datasource. The above example leads to the following diagrams: