Muy buenas,
Hoy vamos a explicar cómo crear gráficas en tiempo real con meteor.
Hay gran variedad de librerías para hacer gráficas en javascript pero la más utilizada con meteor es highcharts. Una vez tenemos nuestra aplicación en meteor corriendo, tendremos que añadir el módulo de la siguiente manera:
[codeblocks name=’highcharts’]
La librería es realmente fácil de usar (todas las librerias js de gráficas son muy parecidas y hay gran cantidad de documentación de ésta en particular).
En primer lugar añadimos en nuestra template un div donde pintaremos la gráfica:
[codeblocks name=’template’]
En nuestro javascript definiremos una función que pintará la gráfica:
[codeblocks name=’grafica’]
El método getData() se encargará de cargar los datos de la gráfica. No vamos a incluir el código, pero debe devolver un simple array de valores.
En el método rendered de la template llamaremos a esa función que se ejecutará cuando se cargue toda la página:
[codeblocks name=’rendered’]
Ahora queremos que la gráfica sea reactiva, es decir, que cuando cambie un dato del getData() la gráfica se actualice sin necesidad de refrescar. Para ello necesitamos un método updateChart() que recalculará el getData() e incluir la llamada a ese método en una función autorun dentro del método rendered de la plantilla.
[codeblocks name=’updateAutorun’]
De esta manera, cuando se cargue la página se ejecutará el buildChart que pintará la gráfica con los datos de ese momento, y si se irá actualizando automáticamente con el updateChart.
Hasta la próxima!
Jose A. Ródenas «rodio»
CTO en Visualtis S.L.
