Charts Llega a Xojo Desktop y Mobile

A partir de Xojo 2023r1 ya está disponible el control de gráficas en Desktop y iOS. Lo hemos creado de forma que ofrezca el mismo aspecto y comportamiento que ya conocías a la hora de usar el control WebChart en tus proyectos Web 2.0. De modo que comencemos a revisar todas las cosas que puedes hacer con DesktopChart en tus proyectos de escritorio y con MobileChart en tus proyectos de iOS.

Como probablemente ya sepas, WebChart ofrece los siguientes tipos de gráficas desde que hizo su aparición en Web 2.0 allá por 2020:

• Line
• Bar
• Pie
• Doughnut
• PolarArea
• Scatter
• Bubble
• Radar

Y de hecho podrás definir los mismos tipos de gráficas tanto en DesktopChart como en MobileChart usando el Panel Inspector o bien mediante código a través de la propiedad Mode. Y lo que es mejor, incluso podrás cambiar el Modo (o tipo de gráfica) en tiempo de ejecución tanto en tus proyectos de escritorio como en iOS.

Podríamos decir que los modos Line y Bar son bastante parecidos. Ambos permiten mostrar conjuntos de valores que se hayan definido en los modos “Line” o “Bar”; de hecho puedes mostrar tanto conjuntos de valores definidos como “Line” o “Bar” en una instancia de Desktop o MobileChart cuyo modo se haya configurado a “Line” o “Bar”. La única diferencia es cómo se dibujarán a lo largo del eje X.

Para comprenderlo mejor, escribamos el siguiente código en el manejador de evento Opening de un control DesktopChart añadido a un proyecto de escritorio:

Var labels() As String
Var firstSetOfData() As Double
Var secondSetOfData() As Double
Var thirdSetOfData() As Double

For n As Integer = 0 To 9
  labels.add "LB"+n.ToString
  firstSetOfData.add System.Random.InRange(0,1000)
  secondSetOfData.add System.Random.InRange(0,1000)
  thirdSetOfData.add System.Random.InRange(0,1000)
Next

Me.mode = DesktopChart.Modes.Line
Me.Title = "Chart Example With Two Datasets"
Me.AddLabels labels

Var DS1 As New ChartLinearDataset("DS1", Color.Blue, True, firstSetOfData)
DS1.ChartType = ChartLinearDataset.ChartTypes.Line

Var DS2 As New ChartLinearDataset("DS2", Color.Red, True, secondSetOfData)
DS2.ChartType = ChartLinearDataset.ChartTypes.Bar

Var DS3 As New ChartLinearDataset("DS3", Color.Green, True, thirdSetOfData)
DS3.ChartType = ChartLinearDataset.ChartTypes.Bar

Me.AddDatasets DS1, DS2, DS3

Así es como se verá cuando el modo del control se haya configurado a “Line”, mostrando los tres conjuntos de valores: uno de ellos definido como “Line” y los otros dos a “Bar”:

Como puedes ver, cuando el control se configura en modo “Line” los conjuntos de valores definidos como “Line” comienzan a dibujarse sobre el mismo origen del eje X, donde también se dibujan las etiquetas para cada columna de datos. Y eso también es lo que ocurre en el caso de los conjuntos de datos cuyo tipo de gráfica (propiedad ChartType) se ha configurado a “Bar”; por tanto, la primera barra de la primera columna sólo mostrará la mitad de su ancho.

Y este es el aspecto que tendrá el dibujado de los mismos conjuntos de datos cuando el control de gráfica se ha configurado a modo “Bar”. Como puedes ver, en este caso los conjuntos de datos cuyo ChartType se ha configurado a “Bar” son los que establecen las reglas sobre la posición de las etiquetas en cada columna (centradas sobre el eje X), además de que también se dibuja el ancho completo incluso para el primer grupo de datos. Sin embargo, y debido a ello, el conjunto de datos cuyo ChartType se ha configurado a “Line” comienza a dibujarse desde la mitad del ancho de la primera de las columnas.

Puedes añadir tantos conjuntos de datos como quieras, tanto si su propiedad ChartType está configurada a “Line” o “Bar”, eliminar alguno de los conjuntos de datos asignados al control, actualizar sus valores, color, etc. El control de gráfica se actualizará para reflejar cada uno de los cambios realizados, incluyendo los valores mínimo y máximo mostrados en el eje Y.

Lo único que has de recordar en este sentido en que un control de gráfica cuyo modo se haya configurado a “Line” o “Bar” sólo podrá mostrar los conjuntos de datos creados a partir de la clase ChartLinearDataset (por defecto, estas se configuran con el ChartType definido a “Line”). Incluso cuando se trata de una instancia WebChart esta ofrecerá el mismo comportamiento a partir de 2023r1.

De igual modo, una diferencia entre DesktopChart/MobileChart y WebChart en lo que respecta a ChartLinearDataset es que podrás ajustar la propiedad Transparency con valores comprendidos entre 0 (totalmente opaco) y 100 (totalmente transparente), así como la propiedad CornerSize y que se aplicará a aquellas instancias de ChartLinearDataset cuyo ChartType se haya configurado como “Bar”.

ChartDataset y Modos de Gráfica

Ya hemos visto como una gráfica configurada a “Line” o “Bar” sólo puede mostrar conjuntos de datos creados a partir de la clase ChartLinearDataset. Esto es lo que se aplica cuando el control de gráficas se configura con el resto de los modos:

• Pie, Doughnut, PolarArea y Radar: Sólo mostrará los conjuntos de datos creados a partir de la clase ChartCircularDataset.

• Scatter, Bubble: Sólo mostrará los conjuntos de datos creados a partir de la clase ChartScatteredDataset.

DesktopChart y MobileChart, Propiedades adicionales

Además de lo que ya conoces de WebChart, tanto DesktopChart como MobileChart ofrecen una serie de propiedades de personalización adicionales. Por ejemplo, es posible definir el nombre de fuente, tamaño y color de fuente a utilizar para el Título, Leyendas, Etiquetas y Valores de las gráficas.

En cuanto al tamaño de fuente, lo que se establece es el máximo tamaño de fuente que se utilizará para el dibujado de los valores a lo largo del eje Y en el control de gráfica, basándose para ello en la propia altura del control. Si la altura del control no es suficiente como para dibujar los valores al tamaño de fuente indicado, entonces este se ajustará de forma dinámica para que se muestre la información correctamente.

Otras propiedades que se pueden ajustar para personalizar aun más el control de gráfica son el color de fondo (propiedad BackgroundColor) y el color de la rejilla (GridColor). (Consejo: puede que quieras definirlos con la constante Color.Clear en el caso de que no quieras que se dibujen el color de fondo o el de la rejilla.)

Además, también es posible indicar al control de gráficas si quieres o no mostrar la ventana emergente encargar de mostrar el valor subyacente cuando el usuario mueve el cursor (o bien al arrastrar el dedo en iOS). Esto se lleva a cabo mediante la propiedad AllowPopover (por defecto definida a True).

Aun más, también puedes definir tanto el color de fondo como el color de texto utilizados por la ventana emergente, utilizando para ello las propiedades PopoverBackgroundColor y PopoverTextColor (ambas propiedades esperan una instancia ColorGroup, de modo que puedan ajustar su color cuando el control se emplea en modo Claro o en modo Oscuro).

Recibir Información

Tal y como podrías esperar, tanto DesktopChart como MobileChart también ofrecen el manejo de evento Pressed que puedes implementar para recibir el índice y la instancia del conjunto de datos sobre el cual el usuario ha hecho click o tap.

Debido a que el control de gráficas puede mostrar diferentes tipos de ChartDataset, probablemente querrás hacer un Cast sobre la instancia ChartDataset recibida en el evento Pressed antes de proceder con cualquiera de las acciones que no son comunes a todos los ChartDataset.

¡Dibújalo!

Tal y como podrías esperar y tal y como ocurre con cualquier otro DesktopUIControl (en Desktop, por ejemplo), también puedes llamar al método DrawInto en una instancia de DesktopChart proporcionando como parámetros un contexto gráfico (instancia de la clase Graphics), así como los valores Izquierdo y Superior para proceder con el dibujado. Por ejemplo, así es como se verá una instancia DesktopChart cuando se dibuja en una instancia Picture creada con el mismo tamaño que tenga el control de gráficas en ese momento:

Además también es posible renderizar la gráfica a un PDF de forma vectorial utilizando para ello el método AddChart sobre una instancia de PDFDocument. Los parámetros esperados por dicho método son la instancia del control de gráficas propiamente dicho, los valores de las coordenadas X e Y a partir de las cuales se dibujará la gráfica en la página del documento PDF, así como el ancho y altura.

Por ejemplo, las siguientes líneas de código crearán un archivo PDF en Desktop utilizando el mismo valor de altura correspondiente al control de gráfica, mientras que el ancho será el de la página del documento PDF menos el correspondiente al valor de los márgenes:

Var d As New PDFDocument
d.AddChart(chart1, 20, 20, g.Width-40, chart1.Height )
d.Save(SpecialFolder.Desktop.Child("ChartPDF.PDF"))

En Resumen

Como puedes ver, ahora es posible añadir gráficas a tus proyectos Desktop y iOS con la misma facilidad y del mismo modo que acostumbrabas a hacerlo en tus proyectos Web 2.0, salvo que con algunas opciones adicionales de personalización.