Hola, soy Fernando, especialista en Mat | r, y vengo a compartir con ustedes una biblioteca para generar gráficos de manera sencilla en sus aplicaciones matr: QuickChart. Y qué mejor manera de mostrar su funcionamiento que crea una aplicación de 0 para mostrar un poco de las posibilidades que brinda esta nueva librería. (Recuerden que para más detalles pueden visitar la documentación de la biblioteca en el HUB de Mat | r: https://platform.matrproject.com/hub/view/5dfcdc929cb0800015f8e7c7 )

Comenzando

Para empezar importamos la librería usando la sentencia de la siguiente imagen. 

Ya con la librería importada podemos comenzar a trabajar con el método que trae la misma para generar los gráficos. 

Para este ejemplo, vamos a incluir en nuestra aplicación un selector que elegirá elegir entre diferentes tipos de gráficos. Además vamos a agregar un botón y un componente de imagen que usaremos para mostrar nuestro gráfico.

Con esto nuestros componentes de UI para este ejemplo ya están listos. Pasamos a preparar los datos que usamos para generar el gráfico. 

Estructura de datos de la librería

La librería maneja una estructura de datos bastante simple. Basta con generar arrays con los datos con los que queremos que se genere el gráfico, y luego generar modelos de tipo DataSet (modelo propio de la librería). Lo haremos como en la siguiente imagen.

Para este ejemplo, utilizaremos dos conjuntos de datos que van a generar un gráfico de barras y otro tipo de radar. Estos dos tipos de gráficos incluyen la misma estructura de datos. También se puede observar que dichos conjuntos de datos tienen un atributo llamado etiqueta el cual define el nombre que le vamos a atribuir a cada conjunto de datos. Todos estos datos pueden generar los datos de la manera que quieran en sus aplicaciones, así como también asignar las etiquetas que quieran a cada uno, y hasta generar más conjuntos de datos. Podrán encontrar más detalles en la documentación de la librería.

Continuamos. Una vez tenemos esto, lo siguiente es generar un arreglo de DataSet que contendrá todos los conjuntos de datos que hayamos generado. También deberemos generar un arreglo de cuerdas que correspondan a las etiquetas del eje x para el gráfico de barras y las puntas del gráfico de tipo radar. 

Y por último, generamos el modelo Data que va a contener tanto las etiquetas como el arreglo de DataSet. 

Eso ya bastaría para generar los dos tipos de gráficos, pero hemos agregado uno más a la lista: un medidor radial. Este tipo de gráfico no comparte la misma estructura que los otros dos. Su estructura es la siguiente.

Como se puede observar, se agrega un atributo nuevo al modelo DataSet que va a corresponder al color que tendrá el gráfico. En este caso asignamos el color verde, pero es posible asignar el color que gustes.

Luego generamos el arreglo de DataSet y el modelo Data. Como se puede observar este tipo de gráfico no lleva etiquetas de ningún tipo.

Esos son los tipos de datos que tendremos que generar para este ejemplo. Como los dos primeros tipos de estructura incluida vamos a utilizar un if / else para organizar. La regla primero La regla debería quedar de la siguiente manera.

Para finalizar, vamos a llamar al método getChart de la librería y le pasaremos el tipo de gráfico seleccionado, el modelo Data que generamos, y una instancia del modelo Opciones que también pertenece a la librería. De este método obtendremos un String que contendrá la URL a la imagen del gráfico generador, el cual vamos a asignar finalmente al componente de UI que creamos para dicha imagen. 

Con esto ya tenemos nuestra aplicación de ejemplo lista. La podemos ejecutar y generar los diferentes tipos de gráficos que hemos agregado.