Version: Next (5.0)

Gráfico

Un gráfico dibuja las filas de una consulta: líneas, columnas, áreas, sectores... Lo describes en el XML de la pantalla con un chart, sus ejes y un chart-serie por cada serie, y AWE lo dibuja con Apache ECharts con los colores de su tema. Debajo está el gráfico real del cliente React de AWE. Elige otro tipo, apila las series, pasa el ratón por un punto y cambia los atributos: el XML de debajo se actualiza.

Vista previa en vivo

ClaroOscuro

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>

Atributos
Eventos y acciones
Referencia completa

Los controles de arriba escriben estos atributos. La referencia lista todos los atributos, con su tipo y valor por defecto. Atributos en la referencia XSD

Atributo	Control	Valores
`type`	Tipo de gráfico	`linesplineareaareasplinecolumnbarpiedonutsemicirclescatterbubblearearangeareasplinerangeradarheatmapgaugefunnel`
`stacking`	Apilado	`normalpercent`
`label`	Título	text
`subtitle`	Subtítulo	text
`enable-data-labels`	Etiquetas de datos	true / false
`chart-legend`	Leyenda	true / false
`chart-tooltip`	Tooltip compartido	true / false

Evento	Descripción
`click`	Se pulsa un punto: sus valores x, y y su serie se escriben en el gráfico y se ejecutan sus dependencias.
`double-click`	Se pulsa dos veces un punto.
`context-menu`	Se pulsa con el botón derecho un punto: se abre el menú contextual del gráfico.
`zoom`	Se hace zoom en el gráfico (zoom-type): los nuevos límites se escriben en los atributos del gráfico.

Acción (type)	Qué hace
`filter`	Recarga el gráfico desde su consulta, con los criterios de la pantalla.
`add-points`	Añade puntos a las series del gráfico sin recargarlo.
`add-chart-series`	Añade una serie; remove-chart-series y replace-chart-series cambian las que tiene.

Los datos son de ejemplo

En una pantalla, las filas vienen de una consulta (initial-load="query") y el servidor convierte los elementos chart en el modelo que dibuja el cliente. Aquí las filas son los ingresos de ejemplo de una empresa inventada, en miles de euros, y el modelo es el que producirían esos elementos. No se envía nada a ningún servidor.

Recetas

Comparar líneas en el tiempo

Las líneas con una legend y un tooltip compartido muestran todas las series del mes bajo el ratón. Pulsa un nombre de la leyenda para ocultar su serie.

<chart id="monthly" type="spline" label="Ingresos mensuales" subtitle="Miles de euros"
       initial-load="query" target-action="Revenue">
  <x-axis label="Mes" type="category" />
  <y-axis label="Ingresos (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>

Cada chart-serie lee dos campos de las filas: x-value da nombre al punto e y-value es su altura.

Un donut (o pie, o semicircle) dibuja una sola serie: un sector por cada fila. La leyenda se muestra por defecto en estos tipos.

<chart id="share" type="donut" label="Ingresos del año" subtitle="Por línea de producto"
       enable-data-labels="true" initial-load="query" target-action="YearByLine">
  <chart-serie id="share" label="Revenue" x-value="line" y-value="revenue" />
</chart>

Porcentaje del total

stacking="percent" apila las series y escala cada punto a 100 %, de modo que las barras muestran la mezcla y no la cantidad. bar las dibuja en horizontal.

<chart id="mix" type="bar" stacking="percent" label="Mezcla de ingresos" initial-load="query" target-action="Revenue">
  <x-axis label="Mes" type="category" />
  <y-axis label="Ingresos (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>

Dos medidas de cada operación

scatter dibuja un punto por cada fila, con los valores x e y sobre dos ejes numéricos. Sirve para ver si dos medidas evolucionan juntas.

<chart id="deals" type="scatter" label="Operaciones: tamaño y margen" initial-load="query" target-action="Deals">
  <x-axis label="Tamaño de la operación (kEUR)" />
  <y-axis label="Margen (%)" />
  <chart-serie id="deals" label="Operaciones" x-value="size" y-value="margin" />
</chart>

Una tercera medida como tamaño

bubble es un gráfico de dispersión cuyo z-value fija el tamaño de cada punto, aquí los puestos de la licencia.

<chart id="dealsSeats" type="bubble" label="Operaciones: tamaño y margen" initial-load="query" target-action="Deals">
  <x-axis label="Tamaño de la operación (kEUR)" />
  <y-axis label="Margen (%)" />
  <chart-serie id="deals" label="Operaciones" x-value="size" y-value="margin" z-value="seats" />
</chart>

Un rango entre un mínimo y un máximo

arearange (o areasplinerange) dibuja una banda: el y-value es el extremo inferior y el z-value el superior. El tooltip muestra ambos.

<chart id="forecast" type="arearange" label="Previsión de software" initial-load="query" target-action="Forecast">
  <x-axis label="Mes" type="category" />
  <y-axis label="Ingresos (kEUR)" />
  <chart-serie id="forecast" label="Previsión de software" x-value="month" y-value="low" z-value="high" />
</chart>

Comparar varias medidas a la vez

Un radar tiene un radio por cada x-value distinto, y cada chart-serie es un polígono. Añade un chart-legend para distinguir los polígonos.

<chart id="profile" type="radar" label="Puntuación por línea de producto" initial-load="query" target-action="Profile">
  <chart-serie id="software" label="Software" x-value="measure" y-value="software" />
  <chart-serie id="services" label="Servicios" x-value="measure" y-value="services" />
  <chart-serie id="support" label="Soporte" x-value="measure" y-value="support" />
  <chart-legend enabled="true" />
</chart>

Intensidad según dos categorías

Un heatmap coloca el x-value y el y-value en dos ejes de categoría y colorea cada celda con el z-value. La escala de color aparece bajo el gráfico.

<chart id="activity" type="heatmap" label="Pedidos por día y franja horaria" initial-load="query" target-action="Activity">
  <chart-serie id="orders" label="Pedidos" x-value="slot" y-value="day" z-value="orders" />
</chart>

Un valor frente a un objetivo

Un gauge dibuja el y-value en una esfera; el z-value es el máximo de la esfera.

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

Etapas que se estrechan

Un funnel dibuja una etapa por cada fila, con el x-value como nombre y el y-value como tamaño.

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

Solo motor React

El radar, el mapa de calor, el indicador y el embudo los dibuja el cliente React (AWE 5). El motor AngularJS no se amplía con tipos nuevos. La banda de rango también la dibuja el cliente React; el AngularJS la aproxima con una línea rellena.

Eventos y acciones

Pulsar, pulsar dos veces o pulsar con el botón derecho un punto escribe sus coordenadas y su serie en los atributos del gráfico y lanza el evento (click, double-click, context-menu), de modo que una dependencia puede filtrar otro componente con él. Hacer zoom (zoom-type) lanza zoom. Estos ejemplos dibujan y reaccionan al ratón de verdad; las dependencias y las acciones de abajo necesitan una pantalla, así que aquí no se ejecutan.

filter: recarga el gráfico desde su consulta.
add-points: añade puntos a una serie sin recargarla, para datos en vivo.
add-chart-series, remove-chart-series, replace-chart-series: cambian las series del gráfico.

Más

Documentación completa de los gráficos: cada elemento, los tipos de serie, los formatos y la parte de servidor.
Parámetros de gráfico: las opciones de Highcharts que AWE traduce.
Referencia XSD del elemento chart.

Recetas​

Comparar líneas en el tiempo​

Reparto del año​

Porcentaje del total​

Dos medidas de cada operación​

Una tercera medida como tamaño​

Un rango entre un mínimo y un máximo​

Comparar varias medidas a la vez​

Intensidad según dos categorías​

Un valor frente a un objetivo​

Etapas que se estrechan​

Eventos y acciones​

Más​