Skip to content

Bar Chart

The BarChart widget displays data visually as a bar chart. Data is sourced from the data model, with bar definitions specifying how data is mapped to chart elements.

Bar Definitions

A bar definition specifies a single bar within the chart. For each data element matching the XPath property, a new bar is created. The bar's value is determined by ValueXPath, and its label by LabelXPath.

To display a static label for a bar, enclose the desired label text in single quotes within the LabelXPath property. For example, to label a bar with "Sales", set LabelXPath to 'Sales'.

The YAxisValueFormat property defines the formatting of Y-axis values as either 'Numeric' or 'Date'.

XML Fields

  • XPath establishes the form-data context for the chart. Width and Height control its rendered dimensions, and Title/Content supplies the chart title.
  • YAxisValueFormat selects Numeric or Date formatting for the value axis. YAxisLabel/Content and XAxisLabel/Content supply the axis captions.
  • Each Bars/Bar describes one bar series. XPath selects its source collection and DataXPath selects rows within it (* selects the direct children).
  • Within a bar, ValueXPath supplies the numeric value, LabelXPath supplies the display label, and CategoryXPath supplies the group/category. A quoted value in LabelXPath, such as 'Sales', is a static label.

BarChart reads the configured paths to render data; it does not write chart values back to the form model.

Example

Consider a data model representing sales data:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<Lines>
    <Line>
        <Count>5</Count>
        <Name>Apple</Name>
        <Category>Store</Category>
    </Line>
    <Line>
        <Count>5</Count>
        <Name>Apple</Name>
        <Category>WebSite</Category>
    </Line>
    <Line>
        <Count>2</Count>
        <Name>T-Shirt</Name>
        <Category>WebSite</Category>
    </Line>
    <Line>
        <Count>2</Count>
        <Name>T-Shirt</Name>
        <Category>Store</Category>
    </Line>
    <Line>
        <Count>1</Count>
        <Name>Pants</Name>
        <Category>Store</Category>
    </Line>
    <Line>
        <Count>1</Count>
        <Name>Pants</Name>
        <Category>WebSite</Category>
    </Line>
</Lines>

The following BarChart configuration would render this data:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<BarChart Width="" Height="" XPath="">
    <Title>
        <Content><![CDATA[]]></Content>
    </Title>
    <YAxisValueFormat>Numeric</YAxisValueFormat>
    <YAxisLabel>
        <Content><![CDATA[Sales]]></Content>
    </YAxisLabel>
    <XAxisLabel>
        <Content><![CDATA[Count]]></Content>
    </XAxisLabel>
    <Bars>
        <Bar>
            <XPath><![CDATA[Lines]]></XPath>
            <DataXPath><![CDATA[*]]></DataXPath>
            <ValueXPath><![CDATA[Count]]></ValueXPath>
            <LabelXPath><![CDATA[Name]]></LabelXPath>
            <CategoryXPath><![CDATA[Category]]></CategoryXPath>
        </Bar>
    </Bars>
</BarChart>

This configuration would produce a bar chart where each bar represents a product, its height determined by the Count value, and labeled with the product Name, grouped by Category.

chart