27 de abril de 2021

Gráficos de barras simples a través de Grid y BackStyle_Access

Artículo original: Simple Bar Graphs via Grid and Backstyle_Access
http://www.sweetpotatosoftware.com/spsblog/2005/12/10/SimpleBarGraphsViaGridAndBackstyleAccess.aspx
Autor: Craig Boyd
Traducido por: Luis María Guayán


Me llegó un correo electrónico

Sue Cunningham me envió un correo electrónico y me contó sobre un uso muy bueno que había encontrado para la técnica BackStyle_Access que había explicado en una publicación de mi blog. Si no tienes tiempo para leer esa entrada de blog, aquí tienes la versión resumida: Al usar el método BackStyle_Access de un control contenido en la columna de un Grid, se puede hacer casi cualquier cosa que se desee, ya que ese método se activará cuando se pinte cada fila visible en el Grid. Realmente ni siquiera hay una necesidad de todos esos métodos DynamicLoQueSea que el Team FoxPro de Microsoft agregó al objeto Columna, cuando usas BackStyle_Access. También permite realizar operaciones mucho más complejas y efectos visuales dentro de las filas del Grid. De todos modos, Sue me envió un correo electrónico y me dijo que había ideado una forma relativamente simple para producir gráficos de barras. Algo que se parece mucho a las barras de degradado recientes sobre las que Calvin Hsia escribió en su blog, pero mucho más simple, sin necesidad de GDI+.

Yo decidí probarlo

Sue no me proporcionó el código para su solución, pero según la explicación que me había dado en su correo electrónico, sentí que tenía la idea básica y decidí intentarlo y ver qué podía crear. El resultado (ver la imagen a continuación) fue tan agradable como fácil. Sue también me dijo que estaba encontrando algunos resultados impredecibles al colocar el Grid dentro de un control contenedor, por lo que también produje un ejemplo (Formulario Example2 que se puede descargar al final) que también usa esta técnica para mostrar gráficos en dos páginas separadas de un marco de página. No encontré ninguno de los resultados inconsistentes (usando VFP 9.0 SP1) que comentó Sue, así que no estoy seguro de qué le está sucediendo a ella. La técnica parece funcionar perfectamente (Nota: las barras se truncarán y/o tendrán problemas de pintura si permito que el Grid muestre ambos paneles al mismo tiempo y el panel izquierdo es un Change Panel. El Change Panel es el único lugar que vi este comportamiento no deseado, aparte de eso, todo está bien).

Todo esta involucrado

Tengo una subclase Grid que contiene dos columnas. La primer columna se usa para la descripción de lo que sea el elemento que estoy graficando ... puedes pensar en ello como la etiqueta del eje, supongo. La segunda columna contiene una subclase Container bastante simple que contiene un Shape y una subclase Label. el control Shape se usa para producir las barras y el control Label se usa para mostrar el valor que fue graficado. La magia de todo esto está en el método BackStyle_Access del control Container (que está en la columna2). Aquí está el código actual que es bastante pequeño ...

LOCAL lnTotalTicks, lnValue, lnWidth
lnTotalTicks = (this.Parent.Parent.MaxValue - This.Parent.Parent.MinValue)
lnValue = EVALUATE(this.Parent.Parent.recordsource + ".value")
lnWidth = (This.Parent.Width - 35) * (lnValue/lnTotalTicks) && - 35 to leave room for the value caption
This.cshape1.Width = lnWidth
This.clabel1.Caption = TRANSFORM(lnValue)
This.cLabel1.Left = lnWidth + 5 && leave a five pixel margin
RETURN THIS.BackStyle

Eso es básicamente todo lo que hay que hacer. Las barras serán del color del Shape en el contenedor. Sin duda, podría mejorar lo que estoy mostrando aquí agregando una propiedad de color de barra para el Grid o tal vez mostrando las barras en diferentes filas y en diferentes colores basado en algunos criterios, o llamando a un método del Grid desde el método BackStyle_Access del contenedor para que el código anterior no esté tan oculto. Solo estoy mostrando lo básico aquí, esto ciertamente no es un producto terminado con todo el cotillón posible. Además, a medida que observa los ejemplos, puede notar que hay propiedades MinValue y MaxValue que se han agregado a la subclase del Grid. Estas son para que no tengamos que graficar siempre en 0-100 o lo que sea (ver el código arriba). Los valores graficados pueden ser cualquier cosa, como 1000-10000, 250-350, etc.

Finalmente, para ver los cursores con los que se ejecutan los gráficos de barra del Grid, mire en los métodos Load de los formularios de ejemplo donde encontrará algo como el siguiente código ...

LOCAL lnCounter
CREATE CURSOR crsValues (Descript c(25), Value I)
=RAND(-1)
FOR lnCounter = 1 TO 100
 INSERT INTO crsValues (Descript, Value) VALUES ("Item " + TRANSFORM(lnCounter), INT(100 * RAND( ) + 1))
ENDFOR
GO TOP IN crsValues

Como puede ver, el cursor que se necesita para esto es extremadamente simple, de hecho solo dos campos, uno para la descripción y el otro para los valores. En cualquier caso, esto solo muestra una vez más el valor de la clase Grid de Visual FoxPro cuando se acopla con el método BackStyle_Access. Con muy pocas líneas de código podemos producir una clase bastante útil para mostrar datos visualmente a nuestros usuarios. Gracias por la sugerencia enviada por correo electrónico Sue!

Código fuente y captura de pantalla

Cuando descargue el archivo zip, extraiga el contenido. Abra el proyecto en Visual FoxPro y ejecute los formularios Example y Example2.

Descargue el código fuente de Grid Graph con los ejemplos desde el siguiente enlace: gridgraph.zip (23 KB aprox.)


3 comentarios :

Los comentarios son moderados, por lo que pueden demorar varias horas para su publicación.