Version: 5.0.0

Chart

A chart draws the rows of a query: lines, columns, areas, pies... You describe it in the XML of the screen with a chart, its axes and one chart-serie for each series, and AWE draws it with Apache ECharts in the colours of its theme. Below is the real chart of the AWE React client. Pick another type, stack the series, hover a point and change the attributes: the XML below follows.

Live preview

LightDark

XML

<chart id="demo"
       type="column"
       stacking="normal"
       label="Revenue by product line"
       subtitle="Thousands of euros, 2025"
       initial-load="query"
       target-action="Revenue">
  <x-axis label="Month" type="category" />
  <y-axis label="Revenue (kEUR)" />
  <chart-serie id="software"
               label="Software"
               x-value="month"
               y-value="software" />
  <chart-serie id="services"
               label="Services"
               x-value="month"
               y-value="services" />
  <chart-serie id="support" label="Support" x-value="month" y-value="support" />
  <chart-legend enabled="true" />
</chart>

Attributes
Events and actions
Full reference

The controls above write these attributes. The reference lists every attribute, its type and default. Attributes in the XSD reference

Attribute	Control	Values
`type`	Chart type	`linesplineareaareasplinecolumnbarpiedonutsemicirclescatterbubblearearangeareasplinerangeradarheatmapgaugefunnel`
`stacking`	Stacking	`normalpercent`
`label`	Title	text
`subtitle`	Subtitle	text
`enable-data-labels`	Data labels	true / false
`chart-legend`	Legend	true / false
`chart-tooltip`	Shared tooltip	true / false

Event	Description
`click`	A point is clicked: its x, y and series are written to the chart and its dependencies run.
`double-click`	A point is double clicked.
`context-menu`	A point is right clicked: the context menu of the chart opens.
`zoom`	The chart is zoomed (zoom-type): the new limits are written to the chart attributes.

Action (type)	What it does
`filter`	Reloads the chart from its query, with the criteria of the screen.
`add-points`	Adds points to the series of the chart without reloading it.
`add-chart-series`	Adds a series; remove-chart-series and replace-chart-series change the ones it has.

The data is a fixture

In a screen the rows come from a query (initial-load="query") and the server turns the chart elements into the model the client draws. Here the rows are the sample revenue of an invented company, in thousands of euros, and the model is the one those elements produce. Nothing is sent to a server.

Recipes

Compare lines over time

Lines with a legend and a shared tooltip show every series for the month under the mouse. Click a name in the legend to hide its series.

<chart id="monthly" type="spline" label="Monthly revenue" subtitle="Thousands of euros"
       initial-load="query" target-action="Revenue">
  <x-axis label="Month" type="category" />
  <y-axis label="Revenue (kEUR)" />
  <chart-serie id="software" label="Software" x-value="month" y-value="software" />
  <chart-serie id="services" label="Services" x-value="month" y-value="services" />
  <chart-serie id="support" label="Support" x-value="month" y-value="support" />
  <chart-legend enabled="true" />
  <chart-tooltip shared="true" suffix=" kEUR" />
</chart>

Each chart-serie reads two fields of the rows: x-value names the point and y-value is its height.

A donut (or pie, or semicircle) draws one series: one slice for each row. The legend is shown by default on these types.

<chart id="share" type="donut" label="Revenue of the year" subtitle="By product line"
       enable-data-labels="true" initial-load="query" target-action="YearByLine">
  <chart-serie id="share" label="Revenue" x-value="line" y-value="revenue" />
</chart>

Percent of the total

stacking="percent" stacks the series and scales each point to 100%, so the bars show the mix, not the amount. bar draws them horizontally.

<chart id="mix" type="bar" stacking="percent" label="Revenue mix" initial-load="query" target-action="Revenue">
  <x-axis label="Month" type="category" />
  <y-axis label="Revenue (kEUR)" />
  <chart-serie id="software" label="Software" x-value="month" y-value="software" />
  <chart-serie id="services" label="Services" x-value="month" y-value="services" />
  <chart-serie id="support" label="Support" x-value="month" y-value="support" />
  <chart-legend enabled="true" />
</chart>

Two measures of every deal

scatter draws one point for each row, with the x and y values on two numeric axes. Use it to see whether two measures move together.

<chart id="deals" type="scatter" label="Deals: size and margin" initial-load="query" target-action="Deals">
  <x-axis label="Deal size (kEUR)" />
  <y-axis label="Margin (%)" />
  <chart-serie id="deals" label="Deals" x-value="size" y-value="margin" />
</chart>

A third measure as the size

bubble is a scatter whose z-value sets the size of each point, here the seats of the licence.

<chart id="dealsSeats" type="bubble" label="Deals: size and margin" initial-load="query" target-action="Deals">
  <x-axis label="Deal size (kEUR)" />
  <y-axis label="Margin (%)" />
  <chart-serie id="deals" label="Deals" x-value="size" y-value="margin" z-value="seats" />
</chart>

A range between a low and a high

arearange (or areasplinerange) draws a band: the y-value is the low end and the z-value the high end. The tooltip shows both.

<chart id="forecast" type="arearange" label="Software forecast" initial-load="query" target-action="Forecast">
  <x-axis label="Month" type="category" />
  <y-axis label="Revenue (kEUR)" />
  <chart-serie id="forecast" label="Software forecast" x-value="month" y-value="low" z-value="high" />
</chart>

Compare several measures at once

A radar has one spoke for each distinct x-value, and every chart-serie is one polygon. Add a chart-legend to tell the polygons apart.

<chart id="profile" type="radar" label="Score by product line" initial-load="query" target-action="Profile">
  <chart-serie id="software" label="Software" x-value="measure" y-value="software" />
  <chart-serie id="services" label="Services" x-value="measure" y-value="services" />
  <chart-serie id="support" label="Support" x-value="measure" y-value="support" />
  <chart-legend enabled="true" />
</chart>

Intensity by two categories

A heatmap puts the x-value and the y-value on two category axes and colours each cell with the z-value. The colour scale appears under the chart.

<chart id="activity" type="heatmap" label="Orders by weekday and time" initial-load="query" target-action="Activity">
  <chart-serie id="orders" label="Orders" x-value="slot" y-value="day" z-value="orders" />
</chart>

One value against a target

A gauge draws the y-value on a dial; the z-value is the maximum of the dial.

<chart id="target" type="gauge" label="Sales target" initial-load="query" target-action="Target">
  <chart-serie id="target" label="Target reached (%)" y-value="reached" z-value="target" />
</chart>

Steps that narrow

A funnel draws one stage for each row, with the x-value as its name and the y-value as its size.

<chart id="pipeline" type="funnel" label="Sales pipeline" enable-data-labels="true"
       initial-load="query" target-action="Pipeline">
  <chart-serie id="pipeline" label="Deals" x-value="step" y-value="deals" />
</chart>

React engine only

Radar, heatmap, gauge and funnel are drawn by the React client (AWE 5). The AngularJS engine is not extended with new types. The range band is drawn by the React client too; the AngularJS one approximates it with a filled line.

Events and actions

Clicking, double clicking or right clicking a point writes its coordinates and series to the attributes of the chart and raises the event (click, double-click, context-menu), so a dependency can filter another component with it. Zooming (zoom-type) raises zoom. These examples draw and react to the mouse for real; the dependencies and the actions below need a screen, so they are not run here.

filter: reloads the chart from its query.
add-points: adds points to a series without reloading it, for live data.
add-chart-series, remove-chart-series, replace-chart-series: change the series of the chart.

Full documentation of charts: every element, the series types, the formats and the server side.
Chart parameters: the Highcharts options AWE translates.
XSD reference of the chart element.

Recipes​

Compare lines over time​

Share of the year​

Percent of the total​

Two measures of every deal​

A third measure as the size​

A range between a low and a high​

Compare several measures at once​

Intensity by two categories​

One value against a target​

Steps that narrow​

Events and actions​

More​