English Version
Pentaho tiene una magnífica librería gráfica CCC pero, cómo cualquier herramienta, siempre hay alguna funcionalidad que te gustaría añadir. Y ese es el caso: hacer zoom en los gráficos. En ocasiones tienes un gráfico con muchos valores y te gustaría poder hacer zoom en gráfico en diferentes puntos más allá de cambiar la selección que genera el gráfico.
No existe una función que te permita hacer zoom en un gráfico CCC (al menos yo no la conozco). Pero SI existe una función que te permite seleccionar un rango de valores en tu gráfico. Por lo que, con un poco de magia, podemos implementar esta función nosotros mismos.
Cómo funciona:
Punto de partida: Un cuadro de mandos muy sencillo con sólo un gráfico que muestra una linea temporal.
Y con una estructura muy sencilla:
Quieres verlo en funcionamiento? Puedes descargarte el ejemplo para importarlo en tu directorio public :
zoomSample.zip
Pentaho tiene una magnífica librería gráfica CCC pero, cómo cualquier herramienta, siempre hay alguna funcionalidad que te gustaría añadir. Y ese es el caso: hacer zoom en los gráficos. En ocasiones tienes un gráfico con muchos valores y te gustaría poder hacer zoom en gráfico en diferentes puntos más allá de cambiar la selección que genera el gráfico.
No existe una función que te permita hacer zoom en un gráfico CCC (al menos yo no la conozco). Pero SI existe una función que te permite seleccionar un rango de valores en tu gráfico. Por lo que, con un poco de magia, podemos implementar esta función nosotros mismos.
Cómo funciona:
- Yo puedo seleccionar una parte del gráfico y obtener los puntos seleccionados
- Yo puedo almacenar esos puntos en una variable
- Yo puedo manipular el dataset del gráfico en el evento postFetch para filtrar los valores que me llegan según los que tengo seleccionados.
Punto de partida: Un cuadro de mandos muy sencillo con sólo un gráfico que muestra una linea temporal.
Y con una estructura muy sencilla:
- Crearemos un parámetro para almacenar los puntos seleccionados: param_selected
- Establecemos la propiedad selectable de nuestro line-chart a true y en el evento selectionChangeAction es donde empezamos a hacer parte de nuestra magia, recogiendo los valores escogidos.
- Ya sólo hace falta hacer que el gráfico escuche al parámetro y en el evento post fetch filtrar el dataset que nos llega:
- Con esto ya tenemos nuestra selección hecha. Ahora sólo nos falta poder borrar la selección para volver al estado inicial. Para ello pondremos un simple link que borre la variable param_selected mediante una función javascript que definiremos para ello.
Quieres verlo en funcionamiento? Puedes descargarte el ejemplo para importarlo en tu directorio public :
zoomSample.zip
