X4 Produktdokumentation
X4 Produktdokumentation
Breadcrumbs

Bar Chart

A bar chart can be used to compare multiple variables to a single value. Bar charts are useful for comparing categories.

Instructions for use

A bar chart is created using the <Bar> element within the <Chart> element. The element can only be used in the layout of a Detail Component.

<Chart>
    <Bar/>
</Chart>

The <Bar> element can contain the following elements:

  • <Axis>: Defines the axis labels.

  • <BarData> : Defines how the data are displayed. A <BarData> element must be defined for each category in the bar chart.

  • <Tooltip>: Defines how the tooltip for each value should be displayed in the chart.

General attributes

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

Attribute

Description

fontFamily

Specifies the font family.

  • This attribute overwrites the default Web App font for this layout.

  • If the attribute is defined on an element, the font family is inherited by any child elements unless the fontFamily attribute is explicitly defined for the child elements.

Possible values:

  • MainFont: stored main font

  • Fontcode from the font palette, e.g. Font04

fontSize

Sets the font size.

This attribute overrides the default Web App font size for this layout.

Possible values:

Possible values:

  • Any integer or decimal number with a period as a 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%

  • Keywords, e.g. small or larger

fontWeight

Defines the font weight.

This attribute overrides the default font weight for this layout.

Possible values:

  • Black

  • Bold

  • DemiBold

  • ExtraBlack

  • ExtraBold

  • ExtraLight

  • Heavy

  • Light

  • Medium

  • Normal (default)

  • Regular

  • SemiBold

  • Thin

  • UltraBlack

  • UltraBold

  • UltraLight

foreground

Defines a color for the foreground (text, etc.) of the control.

Note:

  • This setting overrides the default color of the color scheme.

Possible values:

  • Hexadecimal color value, e.g. ff5a00

Note:

  • Do not use a hash before the color value.

  • Do not use an abbreviated notation of the color value.

  • Color code from the color palette of the Web App, e.g. A200
    For more information, see Theming.

<Bar> element

Contains all the elements that belong to the bar chart. Specifies how the chart should be displayed.

In addition to the general attributes, you can define the following attributes for the <Bar> element:

Attribute

Description

legend

Specifies whether to display a legend.

Possible values:

  • true (default)

  • false

showLabelInStacked

Specifies whether the value in stacked charts should be displayed within the bar.

Possible values:

  • true (default)

  • false

stacked

Specifies whether the bar chart should be displayed as a stacked chart.

  • Data binding (Boolean) is possible

Possible values:

  • true

  • false (default)

zoomXFilterMode

Specifies how data points outside the current zoom range are handled in the bar chart. Affects axis scaling, display of empty bars, and removal of points.

Possible values:

  • empty: Sets out-of-range values to NaN. Gaps are displayed, the axis remains unchanged.

  • filter (default): Removes all data outside the zoom range. The axes adapt.

  • none: There is no filtering, all data points remain visible.

  • weakfilter: Removes only data whose all relevant dimensions are out of range. Partial overlaps continue to be displayed.

zoomXType

Specifies how users can zoom in the X-axis of the bar chart.

Possible values:

  • inside (default): Users can zoom using the mouse wheel.

  • none: Users cannot zoom.

  • slider: Users can zoom using a slider that appears below the bar chart.

zoomYFilterMode

Specifies how data points outside the current zoom range are handled in the bar chart. Affects axis scaling, display of empty bars, and removal of points.

Possible values:

  • empty: Sets out-of-range values to NaN. Gaps are displayed, the axis remains unchanged.

  • filter (default): Removes all data outside the zoom range. The axes adapt.

  • none: There is no filtering, all data points remain visible.

  • weakfilter: Removes only data whose all relevant dimensions are out of range. Partial overlaps continue to be displayed.

zoomYType

Specifies how users can zoom in the Y-axis of the bar chart.

Possible values:

  • inside (default): Users can zoom using the mouse wheel.

  • none: Users cannot zoom.

  • slider: Users can zoom using a slider that appears below the bar chart.

<Axis> element

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

In addition to the general attributes, you can define the following attributes for the <Axis> element:

Attribute

Description

color

Defines the color of the axes.

Possible values:

  • Hexadecimal color value, e.g. ff5a00

Note:

  • Do not use a hash before the color value.

  • Do not use an abbreviated notation of the color value.

  • Color code from the color palette of the Web App, e.g. A200
    For more information, see Theming.

<BarData> element

Child element of <Bar> . Defines how the data are displayed. A <BarData> element must be defined for each category in the bar chart.

In addition to the general attributes, you can define the following attributes for the <BarData> element:

Attribute

Description

category

Required

Specifies which category the value is assigned to.

Possible values:

Data binding possible

color

Color of the bar

Possible values:

Hexadecimal color value or expression for data binding (Color)

If the color attribute is not defined, the colors defined in theTheming Editor are used.

data

Required

Specifies which data object of the data source is visualized.

Possible values:

Data binding possible

name

Specifies the name of the data displayed in the legend.

Possible values:

Any string or data binding

value

Required

Specifies which value of the data object is visualized.

Possible values:

Data binding possible

<Tooltip> element

Child element of <Bar> . Defines how the tooltip for each value should be displayed in the chart.

For the <Tooltip> element, you can define the general attributes (see above).

Emptying data

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

Input 1

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

Input 2

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

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>


Output

The data supplied by the Technical Process are in the followoing format:

XML
<Ok>
	<DataSource>
		<CompanyX>
			<Category>1995</Category>
			<Money>200000</Money>
		</CompanyX>
		<CompanyX>
			<Category>2000</Category>
			<Money>250000</Money>
		</CompanyX>
		<CompanyX>
			<Category>2005</Category>
			<Money>400000</Money>
		</CompanyX>
		<CompanyX>
			<Category>2010</Category>
			<Money>350000</Money>
		</CompanyX>
		<CompanyX>
			<Category>2015</Category>
			<Money>-100000</Money>
		</CompanyX>
		<CompanyY>
			<Category>1995</Category>
			<Money>450000</Money>
		</CompanyY>
		<CompanyY>
			<Category>2000</Category>
			<Money>500000</Money>
		</CompanyY>
		<CompanyY>
			<Category>2005</Category>
			<Money>350000</Money>
		</CompanyY>
		<CompanyY>
			<Category>2010</Category>
			<Money>400000</Money>
		</CompanyY>
		<CompanyY>
			<Category>2015</Category>
			<Money>550000</Money>
		</CompanyY>
	</DataSource>
</Ok>



Bar-Sample.png


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="Test 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 <BarData> element is used to represent a category in the chart. The displayed data itself is contained in the Datasource property.

Output

The data supplied by the Technical Process are in the followoing format:

XML
<Ok>
	<Datasource>
		<Bar1>
			<category>Some category</category>
			<value>21</value>
		</Bar1>
		<Bar2>
			<category>Some category</category>
			<value>22</value>
		</Bar2>
		<Bar2>
			<category>New</category>
			<value>22</value>
		</Bar2>
		<Bar2>
			<category>Blue</category>
			<value>22</value>
		</Bar2>
		<Bar3>
			<category>Blue</category>
			<value>-22</value>
		</Bar3>
	</Datasource>
</Ok>



BarChart.png




BarChart_Stacked.png