Bar Chart Widget

A Bar chart widget based on the g2plot library.

Usage

Allows displaying of category data with one or more series (bars) on the y axis. The value in XAxisField must be a unique string or number. The XAxisFormat can be used to format the way the category is displayed on the chart.

Properties

Property	Type	Binding	Default	Description
Template	STRING	<	Template1	Template used for the widget styling.
Orientation1	STRING		Vertical	Sets the orientation of the Bar Chart.
DataGrouping2	STRING	<	none	Sets the way same category values will be grouped.
ReflectXAxis	BOOLEAN		false	Invert Bars along X Axis.
ReflectYAxis	BOOLEAN		false	Invert Bars along Y Axis.
Data	INFOTABLE	<		Chart data source.
ExpandedData3	BOOLEAN	none	false	Set to true Data comes in expanded form (each field on it's own row). Set to false if data comes in normal form (data aggregated by category)
XAxisField	FIELDNAME			Name of the column in the Data infotable containing the values of the X axis.
YAxisFields	STRING	<		A comma separated string representing the name of the data fields corresponding to the graph in the y direction, usually the fields corresponding to the vertical coordinate axis.
XAxisFormat	STRING(localized)			Localizable token in order to format the values of the X axis. See Format Complex .
YAxisFormat	STRING(localized)			Localizable token in order to format the values of the Y axis label. (It will not format the values displayed in the tooltip, see YAxisFormats for that)
StackedGroupedType	FIELDNAME			The name of the data field corresponding to the type used to join values into stack when using stackedGrouped DataGrouping. Property hidden - Shown only when DataGrouping is set to true
TooltipFormats	STRING(localized)	<		Localizable tokens specified in a CSV format in order to format the values of the Y axis that are displayed on the chart's tooltip.
CategoryLabels	STRING(localized)	<		A comma separated string representing the user facing names of the fields in YAxisFields. The items should be in the same order.
XAxisTitle	STRING(localized)	<		Localizable token for X Axis Title.
YAxisTitle	STRING(localized)	<		Localizable token for y Axis Title.
SelectionMode4	STRING	none		Allows specifying is selection is enabled within the chart.
SelectedData	INFOTABLE	>		An infotable describing the currently selected "Cells" in the bar chart. Infotable with fields x, y, dataField. Enables use-cases where the user can select a specific cell, in order to drill down into data
Annotations	INFOTABLE	<		Annotations data source.
AnnotationTimestampField	FIELDNAME			Name of the column in the Annotations infotable containing the annotation's timestamp value, used for determining where to place the annotation on the X axis.
AnnotationYField	FIELDNAME			Name of the column in the Annotations infotable containing the annotation's Y value, used for determining where to place the annotation on the Y axis.
AnnotationIconField	FIELDNAME			Name of the column in the Annotations infotable containing the IQNOX icon URI, used for determining how the annotation is rendered.
AnnotationDescriptionField	FIELDNAME			Name of the column in the Annotations infotable containing annotation's description, used for displaying additional information when hovering on the icon. If it is not provided, the annotation will not show any description on hover.
AnnotationColorField	FIELDNAME			Name of the column in the Annotations infotable containing annotation's color, used for controlling which color the icon font is rendered with. If it is not provided for an annotation, the chart will fall back to displaying it in the color selected in the template configuration.

Events

Property	Type	Binding	Description
SelectionChanged	EVENT	>	Triggers with the selection inside the widget has changed, after the selection has propagated to other widget and the SelectedData property has been updated
DoubleClicked	EVENT	>	Triggered when the user double-clicks on a cell

Additional explanations

YAxisFields and TooltipFormats
As described above, the YAxisFields is a comma separated string representing the name of the y axis data fields and the TooltipFormats is a comma separated string representing the localization tokens to format the YAxisFields in the order they were introduced (if we have YAxisFields: a, b, c and TooltipFormats: [[f1]], [[f2]], [[f3]], [[f1]] will format field a, [[f2]] will format field b, and [[f3]] will format field c.

Expanded Data structure

Fieldname (can be customized and set in Composer)	Value	Description
xAxisFieldname	string / number	X Axis Field name and value
yAxisFieldname	string	Y Axis Field name and value (only 1 Fieldname. New row must be added for each fieldname)
type	string	Type or category used to stack fields in the same group

This approach requires all yAxis fields to be added as an individual row for every grouping (even though fieldNames are different).

Thresholds

A threshold in the context of bar chart is a predefined reference value used to highlight specific data points that meet certain conditions. These thresholds help emphasize important values and provide a visual distinction between data points above and below a defined threshold.

The threshold can be set from the widget state formatter on the Threshold context by adding a rule with a limit value. A horizontal line can be drawn across the bar chart to visually indicate the threshold value. The line can be set by clicking the Add style button amd selecting the Line option, also you can change the color of the threshold text which will be the name set for the rule.

Example:

• Settings:
• Result

Footnotes

1. Orientation can have the following values: Horizontal, Vertical ↩

2. DataGrouping can have the following values: None, Grouped, Stacked, Stacked Grouped ↩

3. When ExpandedData is set to true, it requires the Data infotable to follow a different structure to be able to parse it: ↩

4. SelectionMode can have the following values: None, Single, Multiple ↩