Skip to content

Line Chart

The Line Chart widget displays data in a line chart format. The widget can be used to visualize trends in data.

Line Definitions

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

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

XML Fields

  • XPath establishes the form-data context. Width, Height, and Title/Content control the chart frame and title.
  • XAxisValueFormat and YAxisValueFormat select Numeric or Date formatting for their respective axes. XAxisLabel/Content and YAxisLabel/Content supply their captions.
  • Each Lines/Line defines a series. XPath selects the source collection and DataXPath selects rows within it (* selects direct children).
  • XValueXPath and YValueXPath select each point's coordinates; LabelXPath supplies the series label. A quoted label path is a static label.

LineChart only visualizes the selected values. It never writes points, labels, or format settings to the form data.

Example

Consider a data model representing incident 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
<Trend>
    <Incidents>
        <Row>
            <Date>2015-02-02</Date>
            <Count>1</Count>
        </Row>
        <Row>
            <Date>2016-02-01</Date>
            <Count>5</Count>
        </Row>
        <Row>
            <Date>2017-03-08</Date>
            <Count>7</Count>
        </Row>
    </Incidents>
    <Problems>
        <Row>
            <Date>2015-02-02</Date>
            <Count>1</Count>
        </Row>
        <Row>
            <Date>2016-02-01</Date>
            <Count>3</Count>
        </Row>
        <Row>
            <Date>2017-03-08</Date>
            <Count>2</Count>
        </Row>
    </Problems>
</Trend>

The following LineChart 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
22
23
24
25
26
27
28
29
<LineChart Width="" Height="200" XPath="">
    <Title>
        <Content><![CDATA[Incidents vs Problems]]></Content>
    </Title>
    <XAxisValueFormat>Date</XAxisValueFormat>
    <XAxisLabel>
        <Content><![CDATA[Time]]></Content>
    </XAxisLabel>
    <YAxisValueFormat>Numeric</YAxisValueFormat>
    <YAxisLabel>
        <Content><![CDATA[Count]]></Content>
    </YAxisLabel>
    <Lines>
        <Line>
            <XPath><![CDATA[Trend/Incidents]]></XPath>
            <DataXPath><![CDATA[*]]></DataXPath>
            <XValueXPath><![CDATA[Date]]></XValueXPath>
            <YValueXPath><![CDATA[Count]]></YValueXPath>
            <LabelXPath><![CDATA['Incident']]></LabelXPath>
        </Line>
        <Line>
            <XPath><![CDATA[Trend/Problems]]></XPath>
            <DataXPath><![CDATA[*]]></DataXPath>
            <XValueXPath><![CDATA[Date]]></XValueXPath>
            <YValueXPath><![CDATA[Count]]></YValueXPath>
            <LabelXPath><![CDATA['Problem']]></LabelXPath>
        </Line>
    </Lines>
</LineChart>

This configuration would render a line chart with two lines, one for incidents and one for problems. The chart would display the number of incidents and problems over time, with the X-axis representing the date and the Y-axis representing the count.

chart