Skip to content

Column Chart

Vertical column chart for data visualization. Data is sourced from the data model, with column definitions specifying how data is mapped to chart elements.

Column Definitions

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

To display a static label for a column, 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 XAxisValueFormat property defines the formatting of X-axis values as either 'Numeric' or 'Date'.

XML Fields

  • XPath establishes the form-data context. Width, Height, and Title/Content control the chart frame and title.
  • XAxisValueFormat selects Numeric or Date formatting for the value axis. XAxisLabel/Content and YAxisLabel/Content supply the axis captions.
  • Each Columns/Column defines one series. XPath selects the source collection and DataXPath selects rows within it (* selects its direct children).
  • ValueXPath, LabelXPath, and CategoryXPath select the value, display label, and grouping value. A quoted LabelXPath is a static label.

ColumnChart is display-only and reads these paths without changing the source data.

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
<ColumnChart Width="" Height="" XPath="">
    <Title>
        <Content><![CDATA[Sales]]></Content>
    </Title>
    <XAxisValueFormat>Numeric</XAxisValueFormat>
    <XAxisLabel>
        <Content><![CDATA[Count]]></Content>
    </XAxisLabel>
    <YAxisLabel>
        <Content><![CDATA[Sales]]></Content>
    </YAxisLabel>
    <Columns>
        <Column>
            <XPath><![CDATA[Lines]]></XPath>
            <DataXPath><![CDATA[*]]></DataXPath>
            <ValueXPath><![CDATA[Count]]></ValueXPath>
            <LabelXPath><![CDATA[Name]]></LabelXPath>
            <CategoryXPath><![CDATA[Category]]></CategoryXPath>
        </Column>
    </Columns>
</ColumnChart>

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

chart