Web 2.0: WebChart, la guinda de la tarta

Entre las múltiples novedades incorporadas con el Framework Web 2.0, una de mis favoritas es la nueva clase WebChart. Basada en Chart.js, esta clase ofrece un total de ocho tipos de gráficas distintas que puedes crear y utilizar de una forma realmente fácil en tus proyectos; incluyendo, entre otras, Línea, Barra, Tarta o de Donut.

Lo mejor de todo es que la implementación de esta característica en tus proyectos web con Xojo es algo realmente sencillo, además de notablemente flexible en su configuración. Sólo has de arrastrar y soltar el control WebChart desde la librería hacia el diseño de la página web (o de un WebContainer), definir el Modo (o tipo de gráfica) que quieres utilizar, así como el resto de propiedades en el Panel Inspector… ¡y ya casi estará todo hecho!

Luego, puedes añadir desde código a tu gráfica tantas instancias de conjuntos de datos (DataSet) como quieras mostrar. Cada uno de estos conjuntos de datos sólo requieren de una Etiqueta (Label) asociada, los datos propiamente dichos a mostrar, y los colores asociados con cada valor o datapoint. Por ejemplo, el siguiente fragmento de código crea una nueva instancia de WebChartCircularDataSet (otras clases disponibles de conjuntos de datos son WebChartLinearDataset y WebChartScatterDataset; cada una de las cuales utilizando su propio conjunto de parámetros en el Constructor):

Var sales() As Double = Array(12500.0, 30200, 25600, 15800)
Var colors() As Color = Array(Color.Orange, Color.Brown, Color.Purple, Color.DarkGray)
Var ds As New WebChartCircularDataset("Test", sales, Colors)

Puedes configurar cada uno de estos DataSet para que rellenen el objeto gráfico que representa el valor en la gráfica, así como asociar cualquier otro valor al DataSet utilizando la habitual propiedad “Tag“.

Una vez que ya tenemos creado un DataSet, podemos añadirlo a la gráfica simplemente llamando al método AddDataSet sobre la instancia que representa nuestra WebChart (opcionalmente podemos añadirlo en una posición de índice concreta o incluso eliminar cualquiera de los DataSet asociados a la instancia WebChart). En este caso, la variable “T” apunta a una instancia de WebChart:

T.AddDataset(ds)

Por supuesto también es posible añadir algunas etiquetas a la instancia WebChart propiamente dicha. De modo que si, por ejemplo, nuestro DataSet contiene un total de cuatro valores, entonces probablemente queramos añadir a la instancia de gráfica la misma cantidad de etiquetas (con un texto significativo)

T.AddLabels("Q1", "Q2", "Q3", "Q4")

Además, una capacidad realmente atractiva visualmente es que la instancia WebChart animará la presentación de los valores del DataSet; algo que hará cada vez que añadamos un nuevo DataSet a la gráfica. Opcionalmente, puedes desactivar este comportamiento de las instancias WebChart mediante código o bien a través del Panel Inspector.

Por supuesto, en el caso de que lo necesites, puedes añadir nuevos DataSet a la gráfica una vez que esta ya está presentada en la página web; pero lo que no podrás hacer en tiempo de ejecución será cambiar el Modo (o tipo) de la gráfica propiamente dicha. Es decir, si has configurado una instancia WebChart con su propiedad Mode configurada a Line, entonces no podrás cambiarla luego a “Bar” desde código.

En definitiva, creo que esta característica es una de las múltiples y excelentes capacidades incluidas con el Framework Web 2.0; y que sin duda contribuirá a que tus aplicaciones Web creadas con Xojo brillen aun más… ¡sin esfuerzo! Decididamente, la guinda de la tarta.