Usar gráficos en comunicaciones interactivas

Un gráfico es una representación visual de los datos. Condensa grandes cantidades de información en un formato visual fácil de entender, lo que permite a los destinatarios de la comunicación interactiva visualizar, interpretar y analizar mejor los datos complejos.

Mientras crea una comunicación interactiva, puede agregar gráficos para representar visualmente los datos bidimensionales del modelo de datos de formulario de la comunicación interactiva. El componente Gráfico permite agregar y configurar los siguientes tipos de gráficos: Circular, Columna, Anillo, Barra, Línea, Línea y Punto, Punto, Área y Cuadrante.

Agregar y configurar un gráfico en una comunicación interactiva

Realice los siguientes pasos para agregar y configurar un gráfico en una comunicación interactiva:

1. Pulse Componentes desde la barra de tareas de la comunicación interactiva.

2. Arrastre y suelte el componente Gráfico a uno de los siguientes componentes:

   • Canal de impresión: área de destino o campo de imagen
   • Canal web: panel o área de destino

3. Pulse el componente Gráfico en el editor de la comunicación interactiva y seleccione Configurar ( ) de la barra de herramientas Componente.

   Las propiedades del gráfico se mostrarán en el panel izquierdo.

   

   Propiedades básicas de un gráfico de tipo línea en el canal Imprimir

   

   Propiedades básicas de un gráfico de tipo línea en el canal Web

4. Configure las propiedades del gráfico en función del tipo de canal.

5. (Solo canal Imprimir) En la Configuración de Agente, especifique si es obligatorio que el agente use este gráfico. Si la opción Es obligatorio que el agente utilice este gráfico no está seleccionada, el agente puede pulsar el icono de ojo del gráfico en la pestaña Contenido de la interfaz de usuario de Agente para mostrar u ocultar el gráfico.

   

6. Pulse para guardar las propiedades del gráfico.

   Pulse Vista previa para ver el aspecto y los datos asociados al gráfico. Pulse Editar para volver a configurar las propiedades del gráfico.

Configurar las propiedades del gráfico

Configurar las siguientes propiedades al crear gráficos para imprimir o para canales web:

Usar funciones en el gráfico

Puede configurar un gráfico para que utilice funciones estadísticas a fin de calcular los valores a partir de los datos de origen para trazar en el gráfico. Al aplicar funciones en un gráfico, se pueden representar datos que el modelo de datos de formulario no proporciona directamente.

Aunque el componente Gráfico incluye algunas funciones integradas, puede escribir funciones personalizadas y hacer que estén disponibles para su uso en la configuración de gráficos del canal Web.

Las siguientes funciones están disponibles de forma predeterminada con el componente Gráfico:

Media (media) Devuelve la media de los valores del eje X o Y para un valor determinado del otro eje.

Suma Devuelve la suma de todos los valores del eje X o Y para un valor determinado del otro eje.

Máximo Devuelve el máximo de los valores del eje X o Y para un valor determinado del otro eje.

Frecuencia Devuelve el número de valores en el eje X o Y para un valor determinado del otro eje.

Rango Devuelve la diferencia entre el máximo y el mínimo de los valores del eje X o Y para un valor determinado del otro eje.

Mediana Devuelve el valor que separa los valores más altos e inferiores a la mitad en los ejes X o Y para un valor determinado en el otro eje.

Mínimo Devuelve el mínimo de los valores del eje X o Y para un valor determinado del otro eje.

Modo Devuelve el valor con la mayoría de las incidencias en el eje X o Y para un valor determinado en el otro eje.

Para obtener más información, consulte Ejemplo 2: Aplicar las funciones Suma y Frecuencia en un gráfico de líneas.

Funciones personalizadas en el canal Web

Además de utilizar las funciones predeterminadas en los gráficos, puede escribir funciones personalizadas en JavaScript™ y ponerlas a disposición en la lista de funciones del componente Gráfico para el canal Web.

Una función toma una matriz o valores y un nombre de categoría como entradas y devuelve un valor. Por ejemplo:

Multiply(valueArray, category) {
 var val = 1;
 _.each(valueArray, function(value) {
 val = val * value;
 });
 return val;
}

Una vez que haya escrito una función personalizada, haga lo siguiente para que esté disponible para usarla en la configuración del gráfico:

1. Agregue la función personalizada en la biblioteca de cliente asociada a la comunicación interactiva correspondiente. Para obtener más información, consulte Configurar la acción Enviar y Usar bibliotecas del lado del cliente.

2. Para mostrar la función personalizada en la lista desplegable Función, en CRXDe Lite, cree un nodo nt:unstructured en la carpeta apps con las siguientes propiedades:

   • Agregar propiedad guideComponentType con valor como fd/af/reducer. (obligatorio)

   • Agregue la propiedad value a un nombre completo de la función personalizada JavaScript™. (obligatorio) y establezca su valor en el nombre de la función personalizada, como Multiplicar.

   • Agregue la propiedad jcr:description con el valor que desea mostrar como nombre de la función personalizada que aparece en la lista desplegable Función. Por ejemplo, Multiplicar.

   • Agregue la propiedad qtip con valor que será una breve descripción de la función personalizada. Aparece como información del objeto al pasar el puntero sobre el nombre de la función en la lista desplegable Función.

3. Haga clic en Guardar todo para guardar la configuración.

La función ahora está disponible para usarla en el gráfico.

Ejemplo 1: Salida de gráfico en imprimir y web

En la pestaña Básico, se define el tipo de gráfico, las propiedades del modelo de datos del formulario de origen que contienen datos, las etiquetas que se van a trazar en el eje X y el eje Y del gráfico y, opcionalmente, la función estadística para calcular los valores para trazar en el gráfico.

Comprendamos en detalle la información mínima requerida en las propiedades básicas, con la ayuda de una instrucción de tarjeta generada mediante una comunicación interactiva. Imagine que quiere generar un gráfico para mostrar la cantidad de gastos diferentes en la instrucción. Quiere utilizar diferentes tipos de gráficos para la impresión y la salida web de la comunicación interactiva.

Gráfico de columnas para Imprimir

Para ello, especifique las siguientes propiedades:

• Nombre: especifique el nombre del gráfico.
• Tipo de gráfico: seleccione Columna de la lista desplegable.
• Título: especifique el tipo de gasto para el eje X y el importe de la transacción para el eje Y.
• Objetos del modelo de datos: seleccione las propiedades del objeto del modelo de datos para crear enlaces de datos para los ejes X (Tipo de gasto) e Y (Importe de transacción).

Gráfico de columnas en el canal Imprimir de una comunicación interactiva

Gráfico de anillo para la web

Para ello, especifique las siguientes propiedades:

• Nombre: especifique el nombre del gráfico.
• Tipo de gráfico: seleccione Anillo de la lista desplegable.
• Objetos del modelo de datos: seleccione las propiedades del objeto del modelo de datos para crear enlaces de datos para los ejes X (Tipo de gasto) e Y (Importe de transacción).
• Radio interior: especifique el valor del Radio interior como 150 para especificar el radio (en píxeles) del círculo interior del gráfico.
• Información de objeto: utilice el formato predeterminado ${x}(${y}) para mostrar la información del objeto. La información del objeto se muestra de la siguiente manera: Tipo de gasto (Importe de transacción). Ejemplo: Débito de bitcoin (10 000).

Gráfico de anillo en el canal Web de una comunicación interactiva

Ejemplo 2: Aplicar las funciones Suma y Frecuencia en un gráfico de líneas

Al aplicar funciones en un gráfico, se pueden representar datos que el modelo de datos de formulario no proporciona directamente. En este ejemplo, utilizamos un ejemplo de instrucción de un extracto de tarjetas de crédito para comprender cómo se pueden aplicar las funciones Suma y Frecuencia al gráfico.

Gráfico de líneas sin una función con dos transacciones “Débito para AirBnB”

Función Suma

Puede aplicar la función Suma para agregar valores de varias instancias de la misma propiedad de datos y mostrarlos solo una vez. Por ejemplo, en el siguiente gráfico, la función Suma se aplica en el eje Y para sumar la cantidad de ambas transacciones “Débito para AirBnB” (2050 y 1050) y mostrar solo una transacción (3100).

La función Suma puede hacer que el gráfico sea más útil cuando desea recopilar y mostrar la suma para muchas instancias de la misma propiedad de datos.

Función Frecuencia

La función Frecuencia devuelve el número de valores del eje Y para un valor determinado del otro eje. Con la aplicación de la función Frecuencia en el eje Y (Importe de transacción), el gráfico muestra que ha habido dos incidencias de transacciones “Débito para AirBnB” y una incidencia del resto de tipos de transacciones.

Ejemplo 3: Gráfico de cuadrantes de varias series en la web

El gráfico representa la cantidad de transacciones realizadas en un intervalo de fechas determinado. El gráfico de cuadrantes permite dividir el área del gráfico en cuatro secciones etiquetadas. El gráfico utiliza un punto de referencia estático para el eje X y el eje Y. Utilice la función de varias series para separar los datos en función del nombre del banco.

Para ello, especifique las siguientes propiedades:

• Nombre: especifique el nombre del gráfico.

• Tipo de gráfico: seleccione Cuadrante de la lista desplegable.

• Seleccione la casilla de verificación Varias series.

• Objeto del modelo de datos: especifique la propiedad del objeto del modelo de datos para la serie. La propiedad del objeto del modelo de datos para el nombre del banco es una propiedad principal de las propiedades del objeto del modelo de datos trazadas en los ejes X e Y.

• Objetos del modelo de datos: seleccione las propiedades del objeto del modelo de datos para crear enlaces de datos para los ejes X (Fecha de transacción) e Y (Importe de transacción).

• En el Punto de referencia, seleccione Estático como tipo de enlace.

• Especifique los valores para los puntos de referencia del eje X y del eje Y.

• Especifique las etiquetas de cuadrante para los cuadrantes Superior izquierdo, Superior derecho, Inferior derecho e Inferior izquierdo.

• Seleccione la casilla de verificación Mostrar leyendas para mostrar los códigos de color de los nombres de banco.

Recursos de Business.Adobe.com

Auto Text Summarization Mobile Forms Responsive Forms Document Generation Dynamic Forms Digital Asset Management