Gráficos

Para consultarlos y generarlos se debe ingresar a Control y Gestión > Gráficos.

Generación de un nuevo gráfico

Seleccionar el gráfico deseado y su respectivo estilo. Una vez seleccionados, hacer clic en Aceptar. 



Pantalla de creación del gráfico

*1 Desplegable con los DataSources disponibles 

 

*2 Botón tipo de gráfico. Al hacer clic en este es posible seleccionar el tipo de gráfico y su posterior configuración. 

 

*3 Botón Datos 
Dentro de la pantalla de datos seleccionar la columna que corresponda según el datatable. Los datos que se listan provienen de los datos que devuelve el store. 

 
 

*4 Botón Tendencias 

En un gráfico las tendencias pueden presentarse por dos motivos:

  1. Son los objetivos que el usuario configura en el gráfico.
  2. Es el resultado que arroja el gráfico en relación a los valores configurados por el usuario.

Para ambos casos la configuración se realiza desde el botón Tendencias y luego Agregar. 

 

Para configurar los objetivos del usuario, mencionado en el primer motivo antes descrito, desde el campo Setear valor. 

Allí seleccionar la opción Manual y luego completar con los valores deseados los campos valor desde y hasta. 

En caso de que dese que la tendencia sea el resultado que arroja el gráfico, tal como se mencionó en el segundo motivo antes expuesto, se debe configurar desde el campo Setear valor. Allí seleccionar la opción Base de Datos y luego completar con los campos tabla, valor desde y hasta.


*5 Botón Opciones *** 

6 y *7 Formato de Título y Subtítulo 

 

*8 Tooltips: Al situar el cursor sobre algún elemento gráfico, esta herramienta describe su función. 
*9 Intervalo: es el tiempo de refresco del gráfico, es decir, cada cuantos segundos se ejecuta el store para renovar los datos del gráficos.



Gráficos Disponibles

La plataforma cuenta con tres series de gráficos disponibles, los cuales poseen diversos tipos y seis temas:

Gráficos SingleSeries

Esta serie de gráficos posee 13 tipos de gráficos:

  1. Column 2D
  2. Column 3D
  3. Line 2D
  4. Area 2D
  5. Bar 2D
  6. Bar 3D
  7. Pie 2D
  8. Pie 3D
  9. Doughnut 2D
  10. Doughnut 3D
  11. Pareto
  12. Funnel
  13. Pyramid

En cuanto a los temas, es posible seleccionar entre las siguientes opciones:

  1. Basic
  2. Carbon
  3. Fint
  4. Ocean
  5. Crazy

Ejemplo de configuración gráfico SingleSeries Bar 2D

 

  1. Seleccionar el gráfico serie SingleSeries, tipo Bar 2D y el tema que desee.
  2. Dentro de la pantalla de configuración del gráfico, seleccionar el Datasource.

    Importante: Previamente se debe testear el datasource seleccionado para encontrar el XSD del mismo. En caso de que esto no haya sucedido, la plataforma lo advierte con la siguiente imagen: 
  3. Para este gráfico, por ejemplo, el datasource seleccionado debe devolver datatable de este tipo:
  4. Dentro de la pantalla de datos (Imagen I) seleccionar la columna que corresponda según el datatable. Los datos que se listan provienen de los datos que devuelve el store. En este caso, el campo/valor (Eje Y) será "etiqueta" (Imagen II), mientras que en el Campo/valor (Eje X) será "valor". Hacer clic en Agregar dentro de la pantalla de series de datos para configurar el color de los campos (Imagen III y IV).



Ejemplo de configuración gráfico SingleSeries Pie 2D

 

  1. Seleccionar el gráfico serie SingleSeries, tipo Pie 2D y el tema que desee.
  2. Dentro de la pantalla de configuración del gráfico, seleccionar el Datasource. Recordar previamente testear el datasource seleccionado.
  3. Para este gráfico, por ejemplo, el datasource seleccionado debe devolver datatable de este tipo:
  4. Al igual que en el gráfico anterior, dentro de la pantalla de datos seleccionar la columna que corresponda según el datatable. Los datos que se listan provienen de los datos que devuelve el store. En este caso, el campo/valor (Eje X) es "tipo", "time" es la serie (valor) y en este caso además se envía el color que tendrá esa serie. En este gráfico hay una configuración nueva que es "Valor a mostrar". Aquí seleccionar "tipo" nuevamente (puede ser cualquier otro campo) esto es para evitar que la serie muestre 79.76 / 0.006, etc., sino AVAILABLE / PREVIEW / etc.

Gráficos MultiSeries

Esta categoría de gráficos está compuesta por los siguientes gráficos: 

 
Los temas, al igual que en la categoría SingleSeries son:

  1. Basic
  2. Carbon
  3. Fint
  4. Ocean
  5. Crazy

Ejemplo de configuración gráfico Scroll Bar 2D

  1. Seleccionar el gráfico serie MultiSeries, Scroll Bar 2D y el tema que desee. 
  2. Dentro de la pantalla de configuración del gráfico, seleccionar el Datasource. Recordar previamente testear el datasource seleccionado.
  3. Para este gráfico, el datasource seleccionado devuelve un datatable dónde para cada campo del Eje X existe más de un valor, el cual será representado en las series. Los campos "tasa de utilización" y "tasa de ocupación" son las series.
     
  4. Para este gráfico los campos "ObjetivoOcupación" y "ObjetivoUtilizaicón" están configurados como líneas de tendencia, es decir "Trendlines". Para su configuración se debe ingresar en Tendencias.
  5. Una vez abierta la ventana de Tendencias, hacer clic en Agregar.
     
  6. Completar los campos y hacer clic en Aceptar. 
  7. Finalmente, obtendrá la tendencia configurada de la siguiente manera. 
     

Gráficos Other

Esta serie de gráficos posee 6 tipos de gráficos:

  1. Multi-Leves Pie
  2. Grid
  3. Classic Grid
  4. Value
  5. Data
  6. TTS

En cuanto a los temas, es posible seleccionar entre las siguientes opciones:

  1. Basic
  2. Carbon
  3. Fint
  4. Ocean
  5. Crazy

Ejemplo de configuración gráfico Other Data

  1. Seleccionar el gráfico serie Other y tipo Data. En este tipo de gráfico los temas son irrelevantes. 
  2. Dentro de la pantalla de configuración del gráfico, seleccionar el Datasource. Recordar previamente testear el datasource seleccionado.
  3. Hacer clic en Datos y completar los campos para configurar la estética del gráfico. Luego hacer clic en Aceptar.
  4. Para este gráfico, el datasource seleccionado debe devolver datatable de este tipo:
     

Ejemplo de configuración gráfico Other Multilevel

Este gráfico es una torta (pie) con varios niveles formados por categorías padres y categorías hijas. 

  1. Seleccionar el gráfico serie Other y tipo Data. En este tipo de gráfico los temas son irrelevantes.
  2. Dentro de la pantalla de configuración del gráfico, seleccionar el Datasource. Recordar previamente testear el datasource seleccionado.
  3. Para el gráfico multilevel, el datasource seleccionado debe devolver datatable con una sola fila con tantas columnas como categorías/dependencias tenga el gráfico:
  4. Configurar la categoría padre de la cual dependen el resto. Para ello hacer clic en Datos (Imagen I) y luego completar los campos (Imagen 2).
  5. Configurar las categorías que dependen de la categoría padre desde el botón Datos (previamente habiendo completado los campos). Una vez hecho esto, hacer clic en Agregar (Imagen I) y luego configurar las categorías hijas (Imagen II).

  6. De la misma manera que en el punto anterior, es posible configurar categorías que dependen de otra categoría hija.

Ejemplo 

Configurando las categorías de la siguiente manera: 

Se obtiene el siguiente resultado: 

Ejemplo de configuración gráfico Other Classic Grid

Este gráfico es una representación en pantalla del select del stored procedure, con una presentación de tabla (grilla) con encabezados, filas y celdas, siendo configurable los colores de fondo, de fuente y tamaño. 

Tiene la opción de configurar referencias y rangos de colores según valores predefinidos. 

También puede configurarse los colores de las celdas y su fuente mediante la consulta en base de datos. 

  1. Seleccionar el gráfico serie Other y tipo Classic Grid. En este tipo de gráfico los temas son irrelevantes. 
  2. Para este gráfico, por ejemplo, el datasource seleccionado debe devolver datatable de este tipo: 
  3. Dentro de la pantalla de configuración del gráfico, seleccionar el Datasource. Recordar previamente testear el datasource seleccionado.
  4. Las columnas __BACK_COLOR_X y __FORE_COLOR_X, son las responsables de dar color a la fuente y fondo de las celdas en la columna que indica la "X". Para configurar el gráfico, se agregan las columnas y opcionalmente se asigna una descripción (Nombre columna) que será el que se muestre en el encabezado. Para ello hacer clic en Datos (Imagen I) y luego en Agregar. Debe estar posicionado sobre la solapa Columnas (Imagen II). 
  5. Una vez allí completar los campos.
     
  6. Cargadas las columnas, la grilla quedará de esta forma: 
  7. Para crear referencias y rango de colores, los cuales pintaran las filas completas con el color elegido siempre que cumpla la condición establecida, se debe seleccionar un campo para el "Campo valor de celda (Rango de colores)". Este debe retornar un valor numérico entero, mientras que en la solapa ColorRange, se agregan los mismo y se configura la condición y el color (Imagen II). Hacer clic en Agregar para agregar un formato desde esta solapa (Imagen I).Importante: los valores que retorna son número enteros, es decir, no es posible configurar valores infinitos. 

Ejemplo 

Configurando el gráfico con los pasos anteriores, mostrará la siguiente información: 

El gráfico permite asignar los nombres a las columnas, dinámicamente desde la consulta de base de datos. Por ejemplo, el primer datatable (Imagen I), devuelve nombres genéricos "Descanso_1, Descanso_2,etc. y el segundo datatable (Imagen II) devuelve como columna. Esta última es la que se desea cambiar y que su nuevo nombre sea "valor". 

Finalmente, configurar que el gráfico traiga los nombres desde la consulta desde la pantalla de configuración del gráfico. 


Como resultado se obtiene el siguiente gráfico: 

Ejemplo de configuración gráfico Other Grid

En este tipo de grilla, pueden mostrarse hasta 5 datos por cada celda y cada una se configura por separado. Cada row del stored procedure representa una fila en la grilla. Solo se muestran los datos en la ubicación configurada. 

 

  1. Seleccionar el gráfico serie Other y tipo Grid. En este tipo de gráfico los temas son irrelevantes. 
  2. Para este gráfico, por ejemplo, el datasource seleccionado debe devolver datatable de este tipo:
  3. Para este gráfico, por ejemplo, el datasource seleccionado debe devolver datatable de este tipo:
     
  4. Configurar la grilla desde el botón Datos (Imagen I). Allí completar los campos y luego hacer clic en Agregar (Imagen II). Finalmente, completar los campos de la ventana Opciones de columna y Configuración de celdas (Imagen III).

     
  5. Mediante la anterior configuración se genera el siguiente gráfico: 
     

Real Time

Esta categoría se encuentra compuesta por los siguientes gráficos:

  • Column 2D
  • Area 2D
  • Line 2D
  • Stacked Area
  • Stacked Column
  • Line (Dual Y)
  • Angular Gauge
  • Value
  • Horizontal LED
  • Linear Gauge
  • Vertical LED

Tener en cuenta:

  • El Datasource deberá poseer tantos registros como ejes "Y" existan en el gráfico.
    Usar solo un registro para los gráficos:
    • Column 2D
    • Area 2D
    • Line 2D
    • Angular Gauge
    • Value
    • Horizontal LED
    • Linear Gauge
    • Vertical LED
DescripcionValorValor a mostrar en serie
Llamadas510%
  1. Usar tantos registros como lineas o barras/áreas apiladas se deseen ver.
    • Stacked Area
    • Stacked Column
    • Line (Dual Y)
DescripcionValorValor a mostrar en serie
LlamadasIn510%
LlamadasOut2040%


  • La configuración será exactamente igual que la descrita en títulos anteriores dentro de esta misma página.