Widget de gráfico de programación (con temas)
Introducción
El widget de gráfico de programación permite mostrar un gráfico de programación en el mashup.
 | El widget de gráfico de programación está disponible como widget estándar en la plataforma y como componente Web que se puede importar desde un SDK. |
Formato de los datos
Los datos del gráfico de programación deben constar de una infotable con dos definiciones de campo:
• Recursos: permite definir los recursos que se deben mostrar en el eje de recursos.
• Datos: permite definir las infotables anidadas con los datos que se deben mostrar para cada recurso.
Recurso | Infotable de datos | |
|---|---|---|
Definición de campo | Resource:{name:'Resource',baseType:'STRING'} | Data:{name:'Data',baseType:'INFOTABLE'} |
Uso | Permite definir los valores del eje X para la barra o columna del gráfico. Los datos deben ser una cadena. Cada fila se muestra como una categoría en el eje X. El nombre definido para esta columna es la opción que se debe seleccionar para la propiedad de widget ResouceField. | Permite definir la infotable con los datos del recurso. |
Tipo base | STRING | INFOTABLE |
Ejemplo de fila | Resource:'Apple': donde Apple es el nombre del recurso. | Data:'Infotable1': la entidad de infotable con los datos del recurso. |
Para cada recurso que se defina en la primera infotable, se debe crear una infotable con definiciones de campo que representen la estructura de datos del recurso en el gráfico. En la siguiente tabla se muestra la estructura de datos requerida y las definiciones de campo que se deben utilizar para la infotable de datos:
reason | info | start | end | color | |
|---|---|---|---|---|---|
Definición de campo | reason:{name:'reason',baseType:'STRING'} | info:{name:'info',baseType:'STRING'} | start:{name:'start',baseType:'DATETIME'} | end:{name:'end',baseType:'DATETIME'} | color:{name:'color',baseType:'STRING'} |
Uso | Campo obligatorio que permite definir el nombre de la tarea o el motivo para registrar el evento de recurso. Los datos de esta columna aparecen como leyendas de gráfico. | Campo opcional que permite definir la descripción del evento de recurso. | Campo obligatorio que permite definir la fecha de inicio del evento de recurso. | Campo obligatorio que permite definir la fecha de fin del evento de recurso. | Campo opcional que permite definir un color específico para la representación del evento en el gráfico. |
Tipo base | STRING | STRING | DATETIME | DATETIME | STRING |
Ejemplo de fila | reason:'Maintenance': donde Maintenance es el nombre del evento que el usuario desea mostrar en el gráfico. | info:'Maintenance event description': donde Maintenance event description es la descripción del evento que se debe mostrar en el gráfico. | start:'2020-01-07 03:57:43.322': la fecha de inicio del evento de mantenimiento. | end:'2020-01-26 07:38:12.102': la fecha de fin del evento de mantenimiento. | color:'red': el evento se muestra con un color rojo. |
| | Las definiciones de campo de infotable deben coincidir con los nombres especificados en la tabla anterior. |
Cada fila representa el tiempo o la duración de un evento o una tarea dentro del recurso. En la siguiente imagen se muestra el formato de datos devuelto de un servicio de datos para el gráfico de programación:
Para las opciones de control de zoom de intervalo, se debe crear una infotable que se componga de dos campos: rótulo y duración. El tipo base de los datos de los dos campos debe ser STRING. En la siguiente imagen se muestra el formato de los datos devueltos de un servicio de datos:
Los valores que se pueden utilizar en el campo duration y el rango que representan son los siguientes:
• Y: año
• M: mes
• W: semana
• d: día
• h: hora
• m: minuto
• s: segundo
• ms: milisegundo
| | Se aplica a los caracteres la distinción entre mayúsculas y minúsculas. Por ejemplo, "M" representa el mes y "m" representa el minuto. |
Enlace de un origen de datos
Para mostrar datos en el gráfico:
1. En el panel Datos, añada un servicio de datos que devuelva una infotable con el formato de datos correcto para el widget.
2. Enlace la propiedad All Data del servicio de datos a la propiedad Data del gráfico.
3. Seleccione el gráfico y, a continuación, en el panel Propiedades, defina las siguientes propiedades:
◦ ResourceField: permite seleccionar la columna de infotable que se debe utilizar para el eje de recursos.
◦ DataField: permite seleccionar la columna de infotable con los datos de cada recurso. Cada campo es una infotable contenida.
4. Pulse en Guardar y, a continuación, en Ver mashup.
Los datos de infotable se muestran en el gráfico.
Adición de un eje secundario
Se puede añadir un eje secundario al gráfico de programación. El eje secundario se utiliza para mostrar la fecha con otro formato o configuración regional. Para añadir un eje de tiempo secundario al gráfico, realice lo siguiente:
1. Seleccione el gráfico y, a continuación, abra el panel Propiedades.
2. Seleccione la casilla que se encuentra junto a la propiedad SecondTimeAxis. Se muestran propiedades adicionales.
3. Para especificar un formato de fecha diferente para el eje secundario, escriba un patrón de fechas para la propiedad SecondTimeAxisDateFormatToken o seleccione un token de localización.
4. Pulse en Guardar y, a continuación, en Ver mashup.
El eje de tiempo secundario se muestra según el formato de fecha especificado.
En la siguiente figura se muestra el widget de gráfico de programación con un eje secundario:
En el gráfico se muestran eventos para varios recursos. Los ejes secundario y de tiempo principal se utilizan para mostrar la fecha empleando dos formatos diferentes. En el eje principal se muestra la fecha y el mes, y en el eje secundario se muestra el número de la semana. Para mostrar el formato de fecha utilizando el número de semana, defina la propiedad SecondTimeAxisDateFormatToken en w. Para obtener más información sobre los formatos disponibles, consulte Formato de fecha y hora para widgets.
| | Las propiedades del eje de tiempo secundario solo están disponibles en ThingWorx 9.1 y versiones posteriores. |
En la siguiente tabla se enumeran las propiedades que se pueden utilizar para activar y configurar el eje de tiempo secundario:
Propiedad | Descripción | Tipo base | Valor por defecto | ¿Es enlazable? (Sí/No) | Soporte de localización |
|---|---|---|---|---|---|
SecondTimeAxis | Permite añadir un eje de tiempo secundario al gráfico. | BOOLEAN | Falso | S | N |
SecondTimeAxisLabel | Permite especificar el rótulo de texto del eje de tiempo secundario. | STRING | Segundo eje de tiempo | S | S |
SecondTimeAxisLabelAlignment | Permite alinear el rótulo para el eje de tiempo secundario. Por defecto, el rótulo se alinea a la izquierda. | STRING | Izquierda | N | No |
SecondTimeAxisDateFormatToken | Permite localizar el formato de fecha mediante para el eje de tiempo secundario mediante un patrón "dd-mm-aa". Por defecto, se utiliza el formato de fecha del sistema operativo. | STRING | N/D | S | S |
Propiedades de los widgets
En la siguiente tabla se enumeran las propiedades que están disponibles en ThingWorx 9.4 y versiones posteriores:
Nombre de la propiedad | Descripción | Tipo base | Valor por defecto | Enlazable | Localizable |
|---|---|---|---|---|---|
EmptyChartIcon | Permite especificar el icono que se debe mostrar cuando el gráfico está vacío. | Entidad multimedia | not visible | N | No |
EmptyChartLabel | Permite especificar el texto que se debe mostrar cuando el gráfico está vacío. | STRING | [[ChartStateLabelEmpty]] | N | S |
ErrorStateIcon | Permite especificar el icono que se debe mostrar cuando el gráfico está vacío. | Entidad multimedia | error | N | No |
ErrorStateLabel | Permite especificar el texto que se debe mostrar cuando el gráfico está vacío. | STRING | N | S | |
LoadingIcon | Permite especificar el icono que se debe mostrar cuando se estén cargando los datos del gráfico. | Entidad multimedia | chart loading icon | N | No |
NoDataSourceIcon | Permite especificar el icono que se debe mostrar cuando el gráfico no está enlazado a ningún origen de datos. | Entidad multimedia | bind | N | No |
NoDataSourceLabel | Permite especificar el texto que se debe mostrar cuando el gráfico no está enlazado a ningún origen de datos. | STRING | [[ChartStateLabelNoData]] | N | S |
En la siguiente tabla se enumeran las propiedades que están disponibles en ThingWorx 9.3.5 y versiones posteriores:
Nombre de la propiedad | Descripción | Tipo base | Valor por defecto | Enlazable | Localizable |
|---|---|---|---|---|---|
ShowZoomButtons | Se muestran los botones de ampliar y alejar en la barra de herramientas del gráfico cuando el zoom está activado. | BOOLEAN | Falso | N | No |
En la siguiente tabla se enumeran las propiedades que están disponibles en ThingWorx 9.3.2 y versiones posteriores:
Nombre de la propiedad | Descripción | Tipo base | Enlazable | Localizable | ||
|---|---|---|---|---|---|---|
NumberOfTimeLabels | Permite definir el número de rótulos que se deben mostrar en el eje de tiempo.
| NUMBER | N | S |
En la siguiente tabla se muestran las propiedades del gráfico que están disponibles en ThingWorx 9.2 y versiones posteriores:
Nombre de la propiedad | Descripción | Tipo base | Enlazable | Localizable |
|---|---|---|---|---|
NumberOfReferenceLines | Permite especificar el número de líneas de referencia que se deben mostrar en el gráfico. Se pueden añadir hasta 24 líneas de referencia. Se añaden propiedades adicionales para cada línea de referencia. | NUMBER | S | N |
ReferecneLineNLabel | Permite definir el rótulo de texto de la línea de referencia. | STRING | S | S |
ReferecneLineNValue | Permite definir el valor de la línea de referencia. Se puede seleccionar una fecha para definir la línea de referencia. | DATETIME | S | N |
Las propiedades del widget de gráfico de programación se muestran a continuación.
Nombre de la propiedad | Descripción | Tipo base | Valor por defecto | ¿Es enlazable? (Sí/No) | ¿Es localizable? (Sí/No) | ||
|---|---|---|---|---|---|---|---|
AxisZoom | Permite ampliar el eje de tiempo. Al seleccionar esta propiedad, las propiedades DirectSelectionZoom, DragSelectionZoom, TimeAxisIntervalControl y TimeAxisRangeZoom aparecen en la lista de propiedades. | BOOLEAN | Falso | S | N | ||
CustomClass | Clase CSS definida por el usuario que se aplicará al elemento div superior del widget. Pueden introducirse varias clases, separadas por un espacio. | STRING | n/d | S | N | ||
DirectSelectionZoom | Permite ampliar mediante la selección de dos elementos de datos del gráfico. Las opciones disponibles son Ninguno, Eje de recursos, Eje de tiempo y Ambos. | STRING | Ninguno | S | N | ||
DragSelectionZoom | Permite ampliar una parte específica del gráfico dibujando un cuadro de selección alrededor del rango de datos que desea ver. Las opciones disponibles son Ninguno, Eje de recursos, Eje de tiempo y Ambos. | STRING | Ninguno | S | N | ||
Data | El origen de datos de infotable para el gráfico. | INFOTABLE | n/d | S | N | ||
DataField | Permite seleccionar el campo de infotable en el que se incluyen los datos de tiempo de los recursos del gráfico. | INFOTABLE | n/d | S | N | ||
Disabled | Permite desactivar el widget en el mashup. El widget se muestra en el mashup, pero no se puede pulsar en él ni seleccionarse. | BOOLEAN | Falso | S | N | ||
EndTime | Permite definir la fecha y hora para el fin del rango de zoom. | DATETIME | n/d | S | N | ||
ExternalPadding | Permite definir el relleno a partir de los ejes. El relleno es un porcentaje del ancho de la barra. | NUMBER | 25 | S | N | ||
HideLegend | Permite ocultar el área de la leyenda. Cuando se selecciona esta propiedad, las propiedades LegendAlignment, LegendFilter, LegendMarkerShapes, LegendMaxWidth y LegendPosition no aparecen en la lista de propiedades. | BOOLEAN | Falso | S | N | ||
HideNotes | Permite ocultar el área notas. Cuando se selecciona esta propiedad, las propiedades Notes, NotesAlignment y NotesPosition no aparecen en la lista de propiedades. | BOOLEAN | Falso | S | N | ||
HideResourcesAxis | Permite ocultar el eje de recursos. | BOOLEAN | Falso | S | N | ||
HideTimeAxis | Permite ocultar el eje de tiempo. | BOOLEAN | Falso | S | N | ||
HorizontalAxisMaxHeight | Permite definir una altura máxima para el eje horizontal. | NUMBER | 85 | S | N | ||
HorizontalAxisLabelsRotation | Permite definir el ángulo de rotación de los rótulos en el eje horizontal. Se puede introducir un valor de -180 a 180. | NUMBER | Tamaño automático | N | No | ||
InternalPadding | Permite definir el relleno entre las series. El relleno es un porcentaje del ancho de la barra. | NUMBER | 25 | S | N | ||
Label | Permite mostrar el texto del rótulo del gráfico de programación. | STRING | Gráfico de programación | S | S | ||
LabelType | Permite seleccionar el tipo de rótulo del gráfico de programación como Cabecera, Subcabecera, Rótulo o Cuerpo. | STRING | Subcabecera | S | N | ||
LabelAlignment | Permite alinear el rótulo del widget de gráfico de programación a la Izquierda, Centro o Derecha. Las opciones disponibles para esta propiedad dependen de la definición de la propiedad LabelPosition. | STRING | Izquierda | N | No | ||
LabelPosition | Permite definir la posición del rótulo Arriba o Abajo. | STRING | Arriba | N | No | ||
LabelReset | Permite definir el rótulo que se muestra en el botón de redefinición para el control de zoom. | STRING | Redefinir | S | S | ||
LegendAlignment | Permite alinear el texto de la leyenda Arriba, En medio o Abajo. Las opciones disponibles para esta propiedad dependen de la configuración de la propiedad LegendPosition. | STRING | Arriba | N | No | ||
LegendFilter | Permite añadir un filtro de leyenda de modo que el usuario pueda filtrar el gráfico en tiempo de ejecución. | BOOLEAN | Falso | N | No | ||
LegendMarkerShapes | Permite definir la forma del marcador de las leyendas de series de datos en Cuadrado, Círculo o Ninguno. | STRING | Cuadrado | N | No | ||
LegendMaxWidth | Permite definir el ancho máximo para el área de la leyenda. | NUMBER | 736 | S | N | ||
LegendPosition | Permite definir la posición de la leyenda Arriba, Abajo, Izquierda o Derecha. | STRING | Derecha | N | No | ||
MultipleDataSources | Permite visualizar datos de varios orígenes en el gráfico. Cuando se selecciona esta propiedad, la propiedad NumberOfDataSources aparece en la lista de propiedades. | BOOLEAN | Falso | N | No | ||
Notes | Permite especificar el texto que se debe mostrar en el área notas del gráfico. Se puede introducir una cadena o seleccionar un token de localización. | STRING | n/d | S | S | ||
NotesAlignment | Permite alinear el texto de la nota a la Izquierda, Derecha o Centro. Las opciones disponibles para esta propiedad dependen de la definición de la propiedad NotesPosition. | STRING | Izquierda | N | No | ||
NotesPosition | Permite definir la posición del área de notas Arriba o Abajo. | STRING | Abajo | N | No | ||
NumberOfDataSources | Permite definir el número de orígenes de datos que se pueden enlazar al gráfico. | NUMBER | 2 | No | No | ||
ResetToDefaultValue | Permite restaurar los valores por defecto de la entrada de este widget. | n/d | n/d | S | N | ||
ResourceField | Campo de infotable en el que se incluyen los recursos que se muestran en el gráfico. | INFOTABLE | n/d | n/d | n/d | ||
ResourcesAxisLabel | Permite mostrar el rótulo del texto del eje de recursos. | STRING | Eje de recursos | S | S | ||
ResourcesAxisLabelAlignment | Permite alinear el rótulo del eje de recursos Arriba, En medio o Abajo. | STRING | En medio | N | No | ||
ReverseResourcesAxis | Permite mostrar los valores del eje de recursos en orden inverso. | BOOLEAN | Falso | N | No | ||
ReverseTimeAxis | Permite mostrar los valores del eje de tiempo en el orden inverso. | BOOLEAN | Falso | N | No | ||
RulersInFront | Permite mostrar las reglas delante de los valores de datos. Por defecto, las reglas se muestran detrás de los datos. | BOOLEAN | Falso | S | N | ||
SeriesClicked | Permite activar un evento cuando se pulsa en un punto de datos. | n/d | n/d | S | N | ||
ShowHideLegend | Permite añadir un botón Mostrar/Ocultar para mostrar u ocultar la leyenda del gráfico en tiempo de ejecución.
| BOOLEAN | Falso | N | No | ||
ShowResourcesAxisRuler | Permite mostrar la regla del eje de recursos. | BOOLEAN | Falso | S | N | ||
ShowTimeAxisRuler | Permite mostrar la regla del eje de tiempo. | BOOLEAN | Falso | S | N | ||
SparkView | Permite mostrar una vista simplificada de la visualización del gráfico. Active esta propiedad para ocultar los rótulos, las leyendas y las reglas. | BOOLEAN | Falso | S | N | ||
StartTime | Permite definir la fecha y hora para el inicio del rango de zoom. | DATETIME | n/d | S | N | ||
TabSequence | El número de secuencia del widget de gráfico de programación al pulsar el tabulador. | NUMBER | n/d | N | No | ||
TimeAxisIntervalControl | Permite añadir controles para ampliar el eje de tiempo en función de intervalos específicos. La selección de esta propiedad es Ninguno por defecto. Al seleccionar Lista desplegable, las propiedades TimeAxisIntervalControlLabel, TimeAxisIntervalData, TimeAxisIntervalAnchorPoint y TimeAxisIntervalAnchorPointLabel aparecen en la lista de propiedades. | STRING | Ninguno | S | N | ||
TimeAxisIntervalControlLabel | Permite especificar el rótulo de los controles de zoom de intervalo para el eje de tiempo. | STRING | n/d | S | S | ||
TimeAxisIntervalData | El origen de datos de las opciones de control de zoom de intervalo. Al seleccionar una entrada de la lista desplegable de intervalos, el gráfico se amplía según el valor de duración seleccionado y el punto de anclaje inicial o final. | INFOTABLE | n/d | S | N | ||
TimeAxisIntervalAnchorPoint | Permite seleccionar la posición de anclaje del rango de intervalos en el conjunto de datos. Seleccione Inicio para colocar el intervalo al principio del conjunto de datos o Fin para colocar el intervalo al final. Por ejemplo, si se especifica un intervalo de 3 meses en un conjunto de datos de 12 meses, se puede seleccionar Inicio para mostrar los 3 primeros meses o Fin para mostrar los últimos 3 meses del conjunto de datos. | STRING | Inicio | S | N | ||
TimeAxisIntervalAnchorPointLabel | Permite especificar el rótulo del punto de anclaje de intervalos para el eje de tiempo. | STRING | n/d | S | S | ||
TimeAxisLabelAlignment | Permite alinear el rótulo del eje de tiempo según los valores de Izquierda, Derecha o Centro. | STRING | Izquierda | N | No | ||
TimeAxisLabel | Permite mostrar el rótulo del texto del eje de tiempo. | STRING | Eje de tiempo | S | S | ||
TimeAxisDateFormatToken | Permite localizar el formato de fecha mediante el patrón DD-MM-AA para el eje de tiempo. | STRING | n/d | S | S | ||
TimeAxisRangeZoom | Permite añadir controles para especificar un rango de fechas y horas para el zoom en el eje de tiempo. El rango se puede definir mediante las propiedades StartTime y EndTime. Cuando se selecciona esta propiedad, las propiedades TimeAxisStartZoomLabel y TimeAxisEndZoomLabel aparecen en la lista de propiedades. | BOOLEAN | Falso | S | N | ||
TimeAxisStartZoomLabel | Permite especificar el rótulo para el inicio de la selección de rango. | STRING | n/d | S | S | ||
TimeAxisEndZoomLabel | Permite especificar el rótulo para el final de la selección de rango. | STRING | n/d | S | S | ||
VerticalAxisMaxWidth | Permite definir el ancho máximo para el eje vertical. | NUMBER | 85 | S | N |