Home > WebEOC > Admin Guide > HTML Conventions > Chart Tags

Chart Tags

For those with WebEOC 7.3+, the <chart> board tag provides the ability to create dynamic line, bar, and pie charts with aggregate data. This tag is supported in any display view and will appear in PDFs generated using the <pdflink> tag.

Note: The <chart> tag is not supported in remote boards or on the PDA interface.

Download the example board to see how this tag is used outside the <eocrepeatallrecords> tag to produce results. Additionally, review the guidelines listed below so you can start adding dynamic data presentations of your own.

For allowed values and requirements, refer to Attribute Definitions.

Tags

<chart>

The <chart> tag displays numerical data in chart/graph form; rendered as <img>.

Attribute

Allowed Values

Requirements

Description

backgroundcolor

(COLOR)#ffffff

Implied

Background color of the chart. Any HTML color can be used; the default is white.

font

 

 

The font of the text in the legend or labels.

filter

CDATA

Optional

SQL conditional statement; only applied when outside of <eocrepeatallrecords>. The expression is a stored procedure.

groupby

SQL

Optional(type=bar|pie)

Collates by the indicated field; only applied when outside of <eocrepeatallrecords>. The values of the field become the x-axis labels on the chart.

groupby

SQL

Required(type=line)

All the comments for the optional implementation apply; additionally, this represents the x-axis for type=line.

height

NUMBER

Optional

Height of the chart in pixels in points.

hidelabels

(false|true)false

Implied

Whether to hide the value labels when legend is false.

is3d

(true|false)false

Implied

Specifies if the chart image should be in 3D or 2D format.

labels

 

 

Specifies whether values are labeled when not using a legend. The default is true.

legend

(false|true)false

Implied

Specifies whether a legend will be displayed. The default is false (not displayed).

legendcolor

COLOR

Optional

Color of the text in the legend.

legendfontfamily

FONTFAMILY

Optional

Font family of the text in the legend.

legendfontsize

NUMBER

Optional

Font size of the text in the legend.

legendplacement

(bottom|middle|top)middle

Implied

Specifies where the legend will be displayed. The default is to show legends on the right side of the chart.

title

CDATA

Optional

Title to be displayed at the top of the chart.

titlefontfamily

FONTFAMILY

Optional

Font family of the text in the title.

titlefontsize

NUMBER

Optional

Font size, in points, of the text in the title.

type

(bar|line|pie)

Required

Controls the type of chart displayed. Supported types include pie, line, and bar.

width

NUMBER

Optional

Width of the chart in pixels.

Bar Chart Example

The following code uses the <groupby> attribute to produce a bar chart that shows the number of tasks within a Mission/Task board for each status.

<chart type="bar" groupby="status" legend="true"labels="false">
<dataexpression>count(*)</dataexpression>
</chart>

Bar_Chart.png

Line Chart Example

The following example code displays a line graph to show the number of position log entries over a period of time.

<chart type="line" groupby="convert(varchar,orginating_datetime,101)">
<dataexpression label="Entry Times">count(*)</dataexpression>
</chart>

Line_Chart.png

Pie Chart Example

The following code example results in a pie chart showing overall shelter availability. Keep in mind that the chart is displayed outside of the <eocrepeatallrecords> tag.

<chart type="pie" filter="status!='Closed'">
<dataexpression label="Occupied" color="red">sum(occupancy)</dataexpression>
<dataexpression label="Available" color="green">sum(capacity-occupancy)</dataexpression>
</chart>

Pie_Chart.png

<dataexpression>

Specifies fields or values that populate a chart (similar to <expression>). When used outside of <eocrepeatallrecords>, this must be an aggregate function. The parent must be <chart>; meaning, it must be inside the <chart> tag.

Attribute

Allowed Values

Requirements

Description

color

COLOR

Optional

Color of the value in the chart.

label

CDATA

Required

Text of the label or legend for this value.

You must to post a comment.
Last modified

Tags

Classifications

This page has no classifications.