Saltar al contenido principal
Version: próxima

Gráficas

AWE utiliza la librería Highcharts para el desarrollo de gráficos. Esta biblioteca de javascript permite construir muchos tipos de gráficos dinámicos de forma fácil, rápida y flexible. No tiene dependencias de ninguna otra biblioteca. Es compatible con la mayoría de los navegadores actuales y tiene un alto rendimiento.

Compatibilidad con navegadores

MarcaVersión soportada
Internet Explorer6.0+
Firefox2.0+
Chrome1.0+
Safari4.0+
iOS (Safari)9.0+
Android Browser2.0+

Nota: Highcharts es una biblioteca de código abierto para aplicaciones no comerciales. Para fines comerciales, debes comprar una licencia para usarla.

Conceptos del gráfico

Para conocer cómo funciona Highcharts es importante entender las distintas partes o conceptos de un gráfico. A continuación hay una imagen y una descripción que muestran los conceptos principales en un gráfico.

Sobre Highcharts
  • Título: Es el texto que se presentará en la parte superior de un gráfico. También se pueden añadir subtítulos para describir con más detalle el gráfico.

Más información sobre la estructura XML del elemento gráfico.

  • Series: Conjunto de datos relacionados que se presentan en un gráfico. Un gráfico puede contener una o varias series de datos.

Más información sobre la estructura XML del elemento serie.

  • Tooltip: Al pasar sobre una serie o un punto en el gráfico puede obtener una descripción que describa los valores en esa parte concreta del gráfico.

Más información sobre la estructura XML del elemento tooltip.

  • Leyenda: La leyenda muestra las series de datos en el gráfico y permite activar y desactivar una o más series.

Más información sobre la estructura XML del elemento leyenda.

  • Eje: Los ejes x e y del gráfico, también puede utilizar múltiples ejes para diferentes series de datos. La mayoría de los tipos de gráficos, como los cartesianos típicos de línea y de columna, tienen ejes.

Más información sobre la estructura XML del elemento eje.

Conceptos destacados

Highstock se basa en Highcharts, lo que significa que tiene toda la funcionalidad básica de Highcharts, además de algunas características adicionales. Se recomienda utilizar Highstock cuando se desea mostrar la evolución de una cantidad de datos elevada a lo largo del tiempo. Ejemplo: cuando desea mostrar los cambios del par de divisas spot en un periodo de tiempo.

Sobre Highstock
  • Selector fino: Te permite ajustar el rango del gráfico que se muestra.

  • Selector de rango: Le permite seleccionar rápidamente un rango a mostrar en el gráfico o especificar el intervalo exacto a mostrar.

  • Barra de desplazamiento: Permite desplazarse en el gráfico.

  • Cruceta: Muestra una línea siguiendo la descripción de un gráfico para leer mejor los resultados del eje x. Esta funcionalidad se puede encontrar en la opción tooltip. Las crucetas también se pueden utilizar en Highcharts, pero no están habilitadas por defecto.

Esqueleto de XML

La estructura básica del gráfico es la siguiente:

<chart id="[Chart Id]" label="[Chart title]" subtitle="[Chart subtitle]" type="[Type chart]" initial-load="[Initial load]" target-action="[Action]">
<chart-legend layout="[Layout]" align="[Align]" verticalAlign="[Vertical align]" />
<x-axis label="[Label X-Axis]" type="[Type axis]"/>
<y-axis label="[Label Y-Axis]"/>
<chart-tooltip suffix="[Suffix value]" number-decimals="[Decimal numbers]"/>
<chart-serie id="[Serie ID]" x-value="[X-Values]" y-value="[Y-value]" label="[Serie label]" />
<chart-parameter type="[Type parameter]" name="[Name parameter]">
<chart-parameter type="[Type paramter]" name="[Name parameter]" value="[Parameter value]"/>
</chart-parameter>
</chart>

Estructura general del gráfico

Para facilitar el desarrollo, no todas las etiquetas son necesarias.

ElementoUsoVarias instanciasDescripción
chartObligatorioNoNodo global del gráfico. Describe los atributos generales del gráfico. Título, tipo, qué consulta lo genera, ...
chart legendOpcionalNoDescribe la leyenda del gráfico
chart tooltipOpcionalNoEl tooltip aparece al pasar sobre un punto de una serie. Por defecto, el tooltip muestra los valores del punto y el nombre de la serie
x-axisObligatorioNoDescribe el eje X del gráfico
y-axisObligatorioSiDescribe el eje Y del gráfico. Es posible tener múltiples ejes y enlazarlos con diferentes series de datos
chart serieObligatorioSiUna serie es un conjunto de datos. Se representa como una lista de listas con dos valores, [[x1,y1], [x2,y2]]. Cada array es un punto en la serie representado por el eje
chart parameterOpcionalSiSon parámetros extra para sobrescribir la estructura del gráfico

Elemento gráfico

El elemento gráfico tiene los siguientes atributos:

AtributoUsoTipoDescripciónValores
idObligatorioStringIdentificador del gráfico
labelOpcionalStringEs el título del gráficoNota: Puedes usar literales i18n
subtitleOpcionalStringEs el subtítulo del gráficoNota: Puedes usar literales i18n
typeObligatorioStringTipo de gráficoline, spline, column, column_3d, area, areaspline, arearange, areasplinerange, pie, pie_3d, donut, donut_3d, semicircle, mixed
stock-chartOpcionalBooleanIndicador de tipo de gráfico de stocktrue o false
themeOpcionalStringEs el nombre del tema del gráficoNota: Debe existir el nombre del estilo de gráfico
invertedOpcionalBooleanInvertir los ejes para que el eje x sea vertical y el eje y sea horizontal. Cuando es true, el eje x es revertido por defecto.true o false
stackingOpcionalStringSi se deben apilar los valores de cada serie encima de la otranormal o percent
enable-data-labelsOpcionalBooleanMostrar o no las etiquetas de los datos hasta que la animación inicial de la serie haya terminado.Por defecto es true
format-data-labelsOpcionalStringUsar para formatear el texto de la etiqueta de los datos.Ej. Punto y con 3 decimales format-data-labels="{y:.3f}"
zoom-typeOpcionalStringDecide en qué dimensiones el usuario puede acercar arrastrando el ratónxAxis, yAxis o all
carga-inicialObligatorioStringPara cargar el gráfico cuando se genera la pantallaNota: Solo puede tener el valor 'query'
target-actionObligatorioStringEs el nombre de la consulta que carga el gráfico
maxOpcionalNumberNúmero de puntos a mostrarNota: 0 significa todos los elementos
carga de íconosOpcionalStringDefine el icono de cargaspinner (por defecto), square, circles, carpet, dots, folding, squarebar, circlebar, cubes, icon, custom, none

Eje

El elemento eje tiene los siguientes atributos:

AtributoUsoTipoDescripciónValores
labelOpcionalStringEs el nombre del ejeNota: Puedes usar literales i18n
label-formatOpcionalStringFormato del texto para la etiqueta del ejePor defecto es {value} Ej.: Añadir unidad al eje Etiqueta-formato de etiqueta = "{value} °C"
formatter-functionOpcionalStringFunción Javascript para formatear las etiquetas de los ejes.Nota: Vea esto para más información.
label-rotationOpcionalNumberRotación de las etiquetas en gradosPor defecto a 0
typeOpcionalStringEl tipo de eje.Puede ser uno de "linear", "logarithmic", "datetime" o "category". Por defecto es linear
tick-intervalOpcionalNumberEl intervalo de las marcas de separación en unidades de ejeNota: Tenga en cuenta que los ejes de fecha y hora se basan en milisegundos, así que por ejemplo un intervalo de un día se expresa como 24 3600 1000. Para más información, lea esto
allow-decimalOpcionalBooleanPermitir decimales en las marcas de separación de este eje. Cuando se cuentan números enteros, como personas o coincidencias en una página web, los decimales deben evitarse en las etiquetas de las marcas de separación del ejePor defecto es "true"
oppositeOpcionalBooleanMostrar el eje en el lado opuesto al usual. La normal es en el lado izquierdo para los ejes verticales y el inferior para horizontal, así que los lados opuestos serán de derecha y superior respectivamentePor defecto es "false"

Formateador de funciones del eje

La lista de formateadores de funciones son:

  • formatCurrencyMagnitude: función para formatear un número de moneda con su magnitud.

Ej.:

300 a 300

100000 a 100K

1234 a 1.23K

12000000 a 12M

Elemento leyenda

El elemento leyenda tiene los siguientes atributos:

AtributoUsoTipoDescripciónValores
labelOpcionalStringEs el título de la leyendaNota: Puedes usar literales i18n
enabledOpcionalBooleanPara activar o desactivar la leyenda en el gráficoPor defecto es "true"
border-widthOpcionalNumberEl ancho del borde dibujado alrededor de la leyendaPor defecto a "0"
layoutOpcionalStringEl diseño de los elementos de la leyendaPuede ser uno de "horizontal" o "vertical". Por defecto es "horizontal"
alignOpcionalStringLa alineación horizontal de la caja de la leyenda dentro del área del gráficoPuede ser uno de "izquierda", "centro" o "derecha". Por defecto es "center"
verticalAlignOpcionalStringLa alineación vertical de la caja de leyendaPuede ser uno de "arriba", "mediano" o "fondo". Por defecto es "abajo"
floatingOpcionalBooleanCuando la leyenda está flotando, el área de la parcela ignora y se permite colocarla debajo de ellaPuede ser uno de "verdadero" o "falso". Por defecto es "false"

Elemento tooltip

El elemento tooltip tiene los siguientes atributos:

AtributoUsoTipoDescripciónValores
enabledOpcionalBooleanPara activar o desactivar la descripción en el gráficoPor defecto es "true"
crosshairsOpcionalStringMuestra el cruce de caminos para conectar los puntos con sus correspondientes valores del ejePuede ser uno de "xAxis", yAxis o "all".
number-decimalsOpcionalNumberValor de la descripción de formato ajustando el número de decimales
suffixOpcionalStringFormatear el valor del tooltip añadiendo una cadena de sufijoEj.: suffix = " °C"
prefixOpcionalStringFormatear valor tooltip añadiendo una cadena de prefijoEj.: prefix = "Temp. "
point-formatOpcionalStringEl HTML de la línea del punto en la descripción del punto. Las variables están encerradas por llavesEj.: formato punto = '{series.name}: <b>{point.y}</b><br/>' Más información, leer este
date-formatOpcionalStringPara series en ejes de fechas, el formato de fecha en la cabecera de la descripción se adivinará por defecto basándose en los puntos de datos más cercanos. Este miembro da las representaciones de cadena por defecto utilizadas para cada unidadEj.: formato de fecha = "%Y-%m-%d" Más información, lee esto
sharedOpcionalBooleanDescripción compartida para múltiples series de gráficosPor defecto es "false"

Elemento serie

El elemento serie tiene los siguientes atributos:

AtributoUsoTipoDescripciónValores
idObligatorioStringIdentificador de serie
labelOpcionalStringEs el nombre de la serie. Este valor se muestra en la leyendaNota: Puedes usar literales i18n
typeOpcionalStringTipo de serieline, spline, column, pie, area, areaspline, bar o scatter Nota: Si hay varias series de diferentes tipos, debe establecer el atributo de tipo del elemento gráfico a "mixed"
colorOpcionalStringSe utiliza para establecer un color para la serieNota: Puede usar el nombre de colores o código hexadecimal. Ej.: color = "rojo" o color = "#BF0B23"
x-valueObligatorioStringDefine el valor del punto en el eje x. Corresponde al atributo alias del campo en la consulta
y-valueObligatorioStringDefine el valor del punto en el eje y. Corresponde al atributo alias del campo en la consulta
z-valueOpcionalStringDefine el valor del punto en el eje z. Corresponde al atributo alias del campo en la consulta
x-axisOpcionalNumberAl usar ejes x dobles o múltiples, este número define a qué xAxis está conectada la serie en particular. Se refiere al identificador del ejeEl valor por defecto es 0
y-axisOpcionalNumberAl usar ejes dobles o múltiples, este número define a qué ejes yAxis está conectada la serie en particular. Se refiere al identificador del ejeEl valor por defecto es 0
drilldown-serieOpcionalStringIdentificador de la serie de desgloseNota: Vea este ejemplo
drilldownOpcionalBooleanMarcar para indicar si la serie se utiliza en un subgráfico"true" o "false"

Elemento parámetro de gráfico

Se utiliza para sobrescribir valores en elementos de gráfico. Tiene los siguientes atributos:

AtributoUsoTipoDescripciónValores
typeObligatorioStringTipo de parámetro de gráficoPuede ser uno de "string", "integer", "long", "float", "double", "boolean", "array", "object" o "null".
nameObligatorioStringNombre del parámetro gráfico
valueOpcionalStringValor del parámetro gráfico

Conceptos de series y consultas

En esta sección, explica cómo funciona la integración entre la serie de gráficos y el motor de consultas de Awe. Hay que tener en cuenta el concepto de serie en highcharts. Las series se representan como una lista de arreglos con dos valores, [[x1,y1], [x2,y2]]. Cada array es un punto en la serie representada por el eje.

Por lo tanto, debe establecer los valores de x e y para el punto de una serie. Para esto, existen los atributos de serie x-value y y-value.

Estos atributos corresponden al atributo alias del campo en la consulta. Veamos el siguiente ejemplo:

  • Código XML del elemento gráfico
<chart id="ChrBarTst" label="CHART_2" type="column_3d" initial-load="query" target-action="TstChrThrDatSrc">
<x-axis label="SCREEN_TEXT_CHART_AXIS_DATES" type="datetime"/>
<y-axis label="Temperaturas (ºC)"/>
<chart-serie id="serie2-1" x-value="dates" y-value="serie1" type="column" label="SCREEN_TEXT_CHART_SERIE_1" />
<chart-serie id="serie2-2" x-value="dates" y-value="serie2" type="column" label="SCREEN_TEXT_CHART_SERIE_2" />
<chart-serie id="serie2-3" x-value="dates" y-value="serie3" type="column" label="SCREEN_TEXT_CHART_SERIE_3" />
</chart>
  • Consulta para cargar los datos del gráfico
  <!-- GET THREE DATA SERIES WITH DATES -->
<query id="TstChrThrDatSrc" distinct="true">
<table id="HISAweDbs"/>
<field id="HISdat" transform="DATE_MS" function="TRUNCDATE" alias="dates"/>
<computed format="(1/(parseInt(Math.random()*10,10)+1))*10" eval="true" `alias="serie1"` transform="NUMBER"/>
<computed format="(parseInt(Math.random()*10,10)+1)+2" eval="true" alias="serie2" transform="NUMBER"/>
<computed format="((parseInt(Math.random()*10,10)+1)*2)-4" eval="true" alias="serie3" transform="NUMBER"/>
<order-by field="dates" type="ASC"/>
</query>

En este ejemplo, puedes ver el atributo x-value = "fecha" de serie de cartas es igual al atributo alias en el elemento de campo y el atributo y-value = "serie1" es igual al alias en la consulta.

Nota: Si el tipo de eje es datetime, Highcharts espera que haga una transformación a la fecha de formato como valor long. Un timestamp de fecha JavaScript (milisegundos desde el 1 de enero de 1970). Awe proporciona transform = "DATE_MS".

Ejemplos

Puedes ver muchos ejemplos de gráficos en la página de demostración de highcharts

A continuación, muestra ejemplos construidos con el motor de gráficos AWE:

Gráfico de líneas

Gráfico de línea
  • XML del gráfico de líneas
<window label="SCREEN_TEXT_LINE_CHART" maximize="true" icon="line-chart" style="expand">
<chart id="ChrLinTst" label="SCREEN_TEXT_LINE_CHART" type="line" theme="dark-unica" initial-load="query" target-action="TstChrTwoSrc" zoom-type="xAxis" max="30" >
<chart-legend label="Leyenda" verticalAlign="middle" align="right" border-width="1"/>
<x-axis label="Fechas" type="datetime"/>
<y-axis label="Temperaturas (ºC)"/>
<chart-tooltip crosshairs="xAxis" suffix=" ºC" number-decimals="1"/>
<chart-serie id="serie-1" x-value="dates" y-value="serie1" label="Serie 1" color="#0080FF"/>
<chart-serie id="serie-2" x-value="dates" y-value="serie2" label="Serie 2" color="#81DAF5"/>
<context-button id="CtxLinTstRef" label="BUTTON_RELOAD" icon="refresh">
<button-action type="server" server-action="data" target-action="TstChrTwoSrc" target="ChrLinTst"/>
</context-button>
</chart>
</window>
  • XML de la consulta
  <!-- GET TWO DATA SERIES -->
<query id="TstChrTwoSrc" distinct="true">
<table id="HISAweDbs"/>
<field id="HISdat" function="TRUNCDATE" alias="dates" transform="DATE_MS"/>
<computed format="(1/(parseInt(Math.random()*10,10)+1))*10" eval="true" alias="serie1" transform="NUMBER"/>
<computed format="parseInt(Math.random()*10,10)+2" eval="true" alias="serie2" transform="NUMBER"/>
<order-by field="dates" type="ASC"/>
</query>

Gráfico de área

Grafico de área
  • XML del gráfico de área
<window label="SCREEN_TEXT_AREA_CHART" maximize="true" icon="area-chart" style="expand">        
<chart id="ChrAreTst" label="Grafico 5" type="areasplin" initial-load="query" target-action="TstChrTwoSrcLab" max="16">
<chart-legend align="right" verticalAlign="top" floating="true"/>
<x-axis label="Fechas" type="datetime">
<chart-parameter type="object" name="dateTimeLabelFormats">
<chart-parameter type="string" name="day" value="%Y-%m-%d"/>
</chart-parameter>
<y-axis label="Temperaturas (ºC)"/>
<chart-tooltip suffix=" ºC" number-decimals="3"/>
<chart-serie id="serie1" x-value="dates" y-value="serie1" label="Serie 1" />
<chart-serie id="serie2" x-value="dates" y-value="serie2" label="Serie 2" />
</chart>
</window>
  • XML de la consulta
  <!-- GET TWO DATA SERIES WITH A LABEL -->
<query id="TstChrTwoSrcLab" distinct="true">
<table id="HISAweDbs"/>
<field id="HISdat" function="TRUNCDATE" alias="dates" transform="DATE_MS"/>
<computed format="parseInt(Math.random()*10,10)+2" eval="true" alias="serie1" transform="NUMBER"/>
<computed format="(1/(parseInt(Math.random()*10,10)+1))*10" eval="true" alias="serie2" transform="NUMBER"/>
<order-by field="dates" type="ASC"/>
<where>
<and>
<filter field="HISdat" condition=">=" variable="MinDat"/>
</and>
</where>
<variable id="MinDat" type="DATE" value="14/05/2013" />
</query>

Gráfico de barras

Gráfico de barras
  • XML del gráfico de barras
<window label="SCREEN_TEXT_BAR_CHART_HORIZONTAL" maximize="true" icon="bar-chart" style="expand">       
<chart id="ChrBarHorTst" label="Grafico 3" type="column" enable-data-labels="true" format-data-labels="{y:.3f}" inverted="true" initial-load="query" target-action="TstChrThrDatSrcHor" max="3">
<chart-legend layout="vertical" align="right" verticalAlign="middle" border-width="1"/>
<x-axis label="SCREEN_TEXT_CHART_AXIS_DATES" type="datetime" tick-interval="259200"/>
<y-axis label="Temperaturas (ºC)" tick-interval="1" label-format="{value} ºC"/>
<chart-tooltip suffix=" ºC" number-decimals="3" date-format="%Y-%m-%d"/>
<chart-serie id="serie1" x-value="dates" y-value="serie1" label="Serie 1" />
<chart-serie id="serie2" x-value="dates" y-value="serie2" label="Serie 2" />
</chart>
  • XML de la consulta
  <!-- GET THREE DATA SERIES WITH DATES (horizontal) -->
<query id="TstChrThrDatSrcHor" distinct="true">
<table id="HISAweDbs"/>
<field id="HISdat" transform="DATE_MS" function="TRUNCDATE" alias="dates"/>
<computed format="(1/(parseInt(Math.random()*10,10)+1))*10" eval="true" alias="serie1" transform="NUMBER"/>
<computed format="(parseInt(Math.random()*10,10)+1)+2" eval="true" alias="serie2" transform="NUMBER"/>
<order-by field="dates" type="ASC"/>
</query>

Donut en 3D

Gráfico de donut
  • XML del Donut 3D
<window label="SCREEN_TEXT_DONUT_CHART" icon="pie-chart" maximize="true" style="expand">
<chart id="ChrDonutTst" label="Grafico 7" type="donut_3d" initial-load="query" target-action="TstChrPieSrc" max="5">
<chart-legend enabled="true"/>
<x-axis label="Themes"/>
<y-axis label="Percent (%)"/>
<chart-tooltip suffix=" %" number-decimals="2"/>
<chart-serie id="serie1" x-value="names" y-value="serie1" label="Themes" />
</chart>
</window>
  • XML de la consulta
 <query id="TstChrPieSrc" distinct="true">
<table id="AweThm"/>
<field id="Nam" alias="names"/>
<computed format="parseInt(Math.random()*100,10)" eval="true" alias="serie1" transform="NUMBER"/>
</query>

Gráfico 3D de columnas

Gráfico de columna en 3D
  • XML del gráfico 3D de columnas
 <window label="SCREEN_TEXT_BAR_CHART" maximize="true" icon="bar-chart" style="expand">      
<chart id="ChrBarTst" label="Grafico 2" subtitle="Subtitulo grafico 2" type="column_3d" stacking="normal" initial-load="query" target-action="TstChrThrDatSrc" max="21">
<chart-legend layout="vertical" align="right" verticalAlign="middle" />
<x-axis label="SCREEN_TEXT_CHART_AXIS_DATES" type="datetime"/>
<y-axis label="Temperaturas (ºC)"/>
<chart-tooltip crosshairs="xAxis" suffix=" ºC" number-decimals="3"/>
<chart-serie id="serie2-1" x-value="dates" y-value="serie1" type="column" label="SCREEN_TEXT_CHART_SERIE_1" />
<chart-serie id="serie2-2" x-value="dates" y-value="serie2" type="column" label="SCREEN_TEXT_CHART_SERIE_2" />
<chart-serie id="serie2-3" x-value="dates" y-value="serie3" type="column" label="SCREEN_TEXT_CHART_SERIE_3" />
</chart>
</window>

  • XML de la consulta
  <!-- GET THREE DATA SERIES WITH DATES -->
<query id="TstChrThrDatSrc" distinct="true">
<table id="HISAweDbs"/>
<field id="HISdat" transform="DATE_MS" function="TRUNCDATE" alias="dates"/>
<computed format="(1/(parseInt(Math.random()*10,10)+1))*10" eval="true" alias="serie1" transform="NUMBER"/>
<computed format="(parseInt(Math.random()*10,10)+1)+2" eval="true" alias="serie2" transform="NUMBER"/>
<computed format="((parseInt(Math.random()*10,10)+1)*2)-4" eval="true" alias="serie3" transform="NUMBER"/>
<order-by field="dates" type="ASC"/>
</query>

Gráfico de stock

Gráfico de stock
  • XML del gráfico
<window label="SCREEN_TEXT_STOCK_CHART" maximize="true" icon="line-chart" style="expand">        
<chart id="ChrStockTst" label="Grafico 4" stock-chart="true" zoom-type="xAxis" type="line" initial-load="query" target-action="TstChrThrDatSrcHor">
<x-axis label="Fechas" type="datetime"/>
<y-axis label="Temperaturas (ºC)" label-format="{value} ºC"/>
<chart-tooltip suffix=" ºC" number-decimals="2"/>
<chart-serie id="serie1" x-value="dates" y-value="serie1" label="Serie 1" />
</chart>
</window>

  • XML de la consulta
  <!-- GET THREE DATA SERIES WITH DATES (horizontal) -->
<query id="TstChrThrDatSrcHor" distinct="true">
<table id="HISAweDbs"/>
<field id="HISdat" transform="DATE_MS" function="TRUNCDATE" alias="dates"/>
<computed format="(1/(parseInt(Math.random()*10,10)+1))*10" eval="true" alias="serie1" transform="NUMBER"/>
<computed format="(parseInt(Math.random()*10,10)+1)+2" eval="true" alias="serie2" transform="NUMBER"/>
<order-by field="dates" type="ASC"/>
</query>

Gráfico con desglose

Gráfico con desglose
  • XML del gráfico con desglose
<window label="SCREEN_TEXT_PIE_CHART" maximize="true" icon="pie-chart" style="expand">        
<chart id="ChrPieTst" label="Grafico 6" type="pie" initial-load="query" enable-data-labels="true" format-data-labels="&lt;b&gt;{point.name}&lt;/b&gt;: {point.percentage:.1f} %" target-action="TstChrPieDrillSrc" max="5">
<chart-legend enabled="true"/>
<x-axis label="Themes"/>
<y-axis label="Percent (%)"/>
<chart-tooltip suffix=" %" number-decimals="2"/>
<chart-serie id="serie1" x-value="names" y-value="serie1" label="Themes" drilldown-serie="serie1_1"/>
<chart-serie id="serie1_1" drilldown="true" x-value="names" y-value="subserie1" label="SubThemes"/>
</chart>
</window>

  • XML de la consulta
  <!-- GET PIE DATA -->
<query id="TstChrPieDrillSrc" distinct="true">
<table id="AweThm"/>
<field id="Nam" alias="names"/>
<computed format="parseInt(Math.random()*100,10)" eval="true" alias="serie1" transform="NUMBER"/>
<computed format="(parseInt(Math.random()*100,10))+2" eval="true" alias="subserie1" transform="NUMBER"/>
</query>

Gráfico de semicírculo

Gráfico semicircular
  • XML del gráfico de semicírculo
<window label="SCREEN_TEXT_SEMICIRCLE_CHART" icon="pie-chart" maximize="true" style="expand">
<chart id="ChrSemiCircleTst" label="Grafico 8" type="semicircle" theme="gray" enable-data-labels="true" initial-load="query" target-action="TstChrPieSrc" max="5">
<chart-legend enabled="true"/>
<x-axis label="Themes"/>
<y-axis label="Percent (%)"/>
<chart-tooltip suffix=" %" number-decimals="2"/>
<chart-serie id="serie1" x-value="names" y-value="serie1" label="Themes" />
<chart-parameter type="object" name="title">
<chart-parameter type="string" name="align" value="center"/>
<chart-parameter type="string" name="verticalAlign" value="middle"/>
<chart-parameter type="integer" name="y" value="50"/>
</chart-parameter>
<chart-parameter type="object" name="plotOptions">
<chart-parameter type="object" name="pie">
<chart-parameter type="object" name="dataLabels">
<chart-parameter type="boolean" name="enabled" value="true"/>
<chart-parameter type="integer" name="distance" value="-50"/>
<chart-parameter type="object" name="style">
<chart-parameter type="string" name="fontWeight" value="bold"/>
<chart-parameter type="string" name="color" value="white"/>
<chart-parameter type="string" name="textShadow" value="0px 1px 2px black"/>
</chart-parameter>
</chart-parameter>
</chart-parameter>
</chart-parameter>
</chart>
</window>
  • XML de la consulta
  <query id="TstChrPieSrc" distinct="true">
<table id="AweThm"/>
<field id="Nam" alias="names"/>
<computed format="parseInt(Math.random()*100,10)" eval="true" alias="serie1" transform="NUMBER"/>
</query>

Temas del gráfico

El motor de gráficos AWE y la biblioteca Highcharts permiten cambiar de estilo fácilmente.

Hay algunos temas por defecto. Sólo hay que establecer el atributo theme en el elemento gráfico con el nombre del tema.

La lista de temas disponible es:

  • dark-unica
  • dark-green
  • dark-blue
  • gray
  • grid

Creando tu propio tema

Aquí hay un ejemplo simple para mostrar el proceso:

/**
* Dark theme for Highcharts JS
*/

Highcharts.theme["your-theme"] = {
colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572',
'#FF9655', '#FFF263', '#6AF9C4'],
chart: {
backgroundColor: {
linearGradient: [0, 0, 500, 500],
stops: [
[0, 'rgb(255, 255, 255)'],
[1, 'rgb(240, 240, 255)']
]
},
},
title: {
style: {
color: '#000',
font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
}
},
subtitle: {
style: {
color: '#666666',
font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
}
},

legend: {
itemStyle: {
font: '9pt Trebuchet MS, Verdana, sans-serif',
color: 'black'
},
itemHoverStyle:{
color: 'gray'
}
}
};

Nota: Debe añadir el nuevo nombre de archivo en scripts.xml en su proyecto.

Conceptos avanzados del gráfico

En esta sección explica conceptos avanzados sobre el motor de gráficos AWE:

Sobrescribir atributos de carta alta

El widget de gráficas de Highcharts se basa en lenguaje JSON Con el elemento <chart-parameter>, puede añadir y sobrescribir atributos de la API para cambiar el comportamiento del gráfico.

Nota: La API de Highcharts está disponible aquí

  • Ejemplo: Cambiar el formato de las etiquetas en el eje X:
  <x-axis label="Fechas" type="datetime">
<chart-parameter type="object" name="dateTimeLabelFormats">
<chart-parameter type="string" name="day" value="%Y-%m-%d"/>
</chart-parameter>
</x-axis>
  • Ejemplo: Cambiar la posición del título en un gráfico:
   <chart-parameter type="object" name="title">
<chart-parameter type="string" name="align" value="center"/>
<chart-parameter type="string" name="verticalAlign" value="middle"/>
<chart-parameter type="integer" name="y" value="50"/>
</chart-parameter>
  • Ejemplo: Cambiar opciones de gráficos para modificar el estilo del gráfico:
<chart-parameter type="object" name="plotOptions">
<chart-parameter type="object" name="pie">
<chart-parameter type="object" name="dataLabels">
<chart-parameter type="boolean" name="enabled" value="true"/>
<chart-parameter type="integer" name="distance" value="-50"/>
<chart-parameter type="object" name="style">
<chart-parameter type="string" name="fontWeight" value="bold"/>
<chart-parameter type="string" name="color" value="white"/>
<chart-parameter type="string" name="textShadow" value="0px 1px 2px black"/>
</chart-parameter>
</chart-parameter>
</chart-parameter>
</chart-parameter>

Servicio de exportación de gráficas

Highcharts tiene un servidor de exportación que le permite generar gráficas de alta calidad en el servidor:

https://www.highcharts.com/docs/export-module/setting-up-the-server

Hemos desarrollado un nuevo servicio de renderizado que le permite generar cartas en formato SVG usando este servidor de exportación y cartas AWE.

Definiendo gráficos

Definir un gráfico que se generará en el servidor es similar a definir un gráfico que se mostrará en un navegador.

Usted define una pantalla y dentro del gráfico, como se muestra antes. Esta pantalla puede estar o no en la aplicación, no importa.

Los gráficos definidos para ser generados en el servidor no necesitan atributos server-action y target-action, ya que los datos se van a pasar como parámetros.

Uso

Hay un nuevo servicio diseñado para generar gráficas en el lado del servidor, llamado ChartService. Este servicio tiene dos métodos que permiten al desarrollador generar cartas usando una sola fuente de datos o múltiples fuentes de datos:

Renderiza un gráfico con un solo Lista de datos

El método de render chart (con una sola lista de datos) genera una gráfica usando solo una lista de datos como fuente de datos.

public String renderChart(String screenName, String chartName, DataList data) throws AWException
  • screenName es el nombre del archivo de pantalla donde está el gráfico
  • chartName es el id `` del gráfico que se generará
  • data es la lista de datos origen

Este método devolverá un gráfico en formato SVG+XML (o AWException si hay un error).

Procesar un gráfico con múltiples listas de datos

El método de procesamiento de cartas (con un mapa de listas de datos) genera un gráfico usando múltiples listas de datos.

public String renderChart(String screenName, String chartName, Map<String, DataList> datasources) throws AWException
  • screenName es el nombre del archivo de pantalla donde está el gráfico
  • chartName es el id `` del gráfico que se generará
  • datasources es un mapa de String y DataList que contendrá todas las fuentes de datos.

Este método devolverá un gráfico en formato SVG+XML (o AWException si hay un error).

Uno de los datos debe llamarse principal, y será el predeterminado. el resto coincidirá con un parámetro de datos definido en la serie que debería seleccionar los datos. For example, this serie would pick the DataList inside the detail map key:

<chart-serie id="data" x-value="name" y-value="value"/>
<chart-serie id="detail" x-value="name" y-value="value">
<chart-parameter type="string" name="datasource" value="detail"/>
</chart-serie>

el mapa correspondiente para esta serie debe ser:

Map<String, DataList> datasources = new HashMap<>();
datasources.put("main", mainDataList);
datasources.put("detail", detailDataList);

La primera serie (data) elegirá los datos definidos en clave principal y la segunda serie (detalle) elegirá los datos definidos en la tecla detalle

Procesar servidor

Puede configurar el servidor de renderizado en el archivo application.properties actualizando la propiedad highcharts.server.url:

################################################
# Chart properties
################################################
highcharts.server.url=http://export.highcharts.com

El servidor de exportación predeterminado apunta al servidor de exportación de Highchart: http://export.highcharts.com