Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Nuevos gráficos de biblioteca D3 "Tree Map" y "Sunburst":

D3 - Tree MapEjemplosD3 - Tree Map

Un gráfico treemap proporciona una vista jerárquica de sus datos y hace que sea fácil de detectar los patrones, utilizando rectángulos anidados.

Las ramas de los árboles están representadas por rectángulos y cada sub-rama se muestra como un rectángulo más pequeño.

Ejemplo 1: Caso donde seleccionamos Sub Tipo "Herencia" en el editor:

Image Added

Image Added

Sobre dicho caso, cuando realizamos click en uno de los rectángulos, estaremos realizando un drill down.

Vemos que arriba el dashlet nos muestra un camino de migas para conocer las consultas realizadas, y este nos permite volver a la consulta anterior.

:

Image Added

Se selecciona la vista que deseamos visualizar, con sub tipo "Herencia".

Image Removed 

Si seleccionamos con un click el rectangulo marron correspondiente a "Mercado Europe" por ejemplo,

estaremos realizando un drill que permite ver el primer nivel de hijos de este.

Podríamos continuar navegando por los dinstintos valores, el dashlet mostrará los niveles que estamos consultando.

Si queremos volver, alcanza con hacer click en dicho camino de migas:

Image Removed 

 

 


D3 - Sunburst

Ejemplo 

Esta representación es similar a la anterior, salvo que utiliza un diseño radial.

El nodo raíz del árbol se encuentra en el centro y las hojas en las circunferencias, siendo el área o ángulo de cada arco el valor correspondiente.

 
Observaciones

Ambos gráficos agregan la funcionalidad de ser usados cómo control.

Es posible que al seleccionar una elemento de estos gráficos sirva como filtro en los otros dashlet definidos.

A su vez, como el resto de los dashlet es posible aplicarle filtros.

Estas dos funcionalidades no pueden usarse de forma simultanea.

 
¿Como obtengo las representaciones?









Ambas se obtienen agregando en nuestras comunidades un nuevo dashlet "O3 BI Advanced View Dashlet".

Luego el editor del mismo permite seleccionar ambas representaciones,

 

 

 

...