Gráfica Scatter: Conectando los Puntos

Recientemente me han preguntado si sería posible conectar los puntos (x/y) representados en una gráfica de tipo Scatter utilizando DesktopChart y, si fuese posible, cómo realizarlo. La respuesta breve es: “Sí, es posible”. Sigue leyendo y te mostraré como hacerlo ¡y lo fácil que es!

Para el propósito de este ejemplo utilizaremos como valores de las coordenadas x e y de la gráfica Scatter los correspondientes a las funciones de Seno y Coseno. Por tanto, comencemos creando un nuevo proyecto Desktop desde el IDE de Xojo.

A continuación, selecciona la ventana por defecto “Window1” y arrastra sobre ella el objeto DesktopChart desde el panel Library. Ajusta su margen derecho hasta que se ajuste con la guía de margen correspondiente a Window, y bloquea los candados izquierdo, superior y derecho de Chart1 utilizando para ello el Panel Inspector. En este punto, el diseño debería de ser similar al siguiente:

Mientras que estás en el Panel Inspector de Chart1, selecciona la opción Behavior > Mode > Scatter.

A continuación, con Window1 seleccionada, añade dos propiedades utilizando los siguientes valores en el Panel Inspector:

Propiedad 1:

• Name: CosStyle
• Type: ChartLinearStyle
• Scope: Private

Propiedad 2

• Name: SineStyle
• Type: ChartLinearStyle
• Scope: Private

Estas serán las propiedades que almacenarán las referencias a los objetos de estilo para los conjuntos de datos correspondientes a las funciones Seno y Coseno.

Luego, con Window1 seleccionada, añade el evento Opening y escribe las siguientes líneas de código en el Editor de Código asociado:

CosStyle = New ChartLinearStyle
CosStyle.Line = ChartLinearStyle.LineTypes.Dashed

SineStyle = New ChartLinearStyle
SinStyle.Line = ChartLinearStyle.LineTypes.Solid

DrawScatterChart

Como resumen, las anteriores líneas de código se encargan de crear las instancias de tipo ChartLinearStyle para las propiedades que hemos añadido previamente; asignando el estilo de línea Solid (sólido) para conectar los puntos de datos correspondientes a la función Coseno, y el tipo de línea Dashed (punteada) para conectar los puntos de datos correspondientes a la función Seno. Luego, simplemente llamará al método DrawScatterChart cuya función será la de crear los conjuntos de datos necesarios para ser representados en la gráfica Chart1. De modo que añadamos ahoa dicho método a Window1 utilizando para ello los siguientes valores en el Panel Inspector:

• Name: DrawScatterChart
• Scope: Private

Y escribe el siguiente fragmento de código en el Editor de Código asociado con dicho método:

// These are the Array variables in charge of storing the Scatter data points
// for the Sine and Cosine functions
Var SinePoints() As ChartScatterDatapoint
Var CosinePoints() As ChartScatterDatapoint

//…and these variables will handle the DataSet instances
// for the previous arrays of data points on both functions
Var SineDataSet As ChartScatterDataset
var CosDataSet As ChartScatterDataset

Const pi = 3.14159265359
Var y As Double
Var maxXValue As Double= 2.0 * pi

// Using a simple loop to feed the x and y
// values for the Sine and Cosine
For x As Double = 0.0 To maxXValue Step 0.5
  
  y = Sin(x)
  SinePoints.add New ChartScatterDatapoint(x, y, 1)
  
  y = Cos(x)
  CosinePoints.add new ChartScatterDatapoint(x, y, 1)
  
Next

// Next, we create the new instances for the Scatter DataSets
SineDataSet = New ChartScatterDataset(Color.Blue, SinePoints)
CosDataSet = new ChartScatterDataset(color.Red, CosinePoints)

//…and we set the Style to be used on each of them
SineDataSet.Style = SineStyle
CosDataSet.Style = CosStyle

//… and of course the labels to be shown on the Legend section
// of the chart itself
SineDataSet.Label = "Sine Function"
CosDataSet.Label = "Cos Function"

// As the last step, we add both DataSets to the chart
// so these can be rendered
Chart1.AddDatasets(SineDataSet, CosDataSet)

Ejecuta la app y deberías de ver algo similar a esto:

Un cambio de Estilo… sobre la marcha

Como muchas otras cosas relacionadas con DesktopChart, cada cambio realizado en tiempo de ejecución se refleja sobre la marcha en la gráfica sin necesidad de tener que refrescarla, recrear los conjuntos de datos o bien realizar cualquier otra operación compleja. Veámoslo mediante el cambio de los estilos para los datos representados de las funciones Seno y Coseno en tiempo de ejecución, de modo que el usuario de nuestra gran app pueda elegir entre conectar los puntos o no.

Añade un par de controles DesktopCheckBoxes bajo el margen inferior de la instancia Chart1 en Window1. Define el valor Caption del primer checkbox a “Connect Sine Points”, y como valor de Caption para el segundo checkbox utiliza “Connect Cos Points”. En ambos checkboxes, utiliza el Panel Inspector para elegir la opción “Checked” disponible en Initial State > Visual State. El diseño final debería de ser similar al siguiente:

Por último, añade el evento ValueChanged a ambas instancias de CheckBox y, luego, añade las siguientes líneas de código al checkbox con el valor Caption “Connect Sine Points”:

If Me.Value Then
  SineStyle.Line = ChartLinearStyle.LineTypes.Dashed
Else
  SineStyle.Line = ChartLinearStyle.LineTypes.None
End If

Y estas líneas de código en el Editor de Código correspondiente al evento ValueChanged del checkbox cuyo valor Caption está establecido a “Connect Cos Points”:

If Me.Value Then
  CosStyle.Line = ChartLinearStyle.LineTypes.Solid
Else
  CosStyle.Line = ChartLinearStyle.LineTypes.None
End If

Ejecuta de nuevo la aplicación y, en esta ocasión, haz clic sobre cada checkbox para ver como se representa la línea (o no) que conecta los puntos en cada una de las funciones seleccionadas mediante el checkbox.

En resumen

Como puedes ver, puedes utilizar los estilos no sólo para conectar los puntos de una gráfica de tipo Scattered sino que, a través de sus propiedades, también podrías establecer la representación gráfica del punto en sí mismo. Por ejemplo, podrías cambiar la representación de punto utilizada por defecto a otra como una cruz, un rombo, un aspa… o bien ninguna. Y lo que es mejor, ¡cualquier cambio de valor que realices sobre el estilo se aplicará sobre la marcha!