El Demo del Día: Gráficos de Lineas y Curvas en WinForms

Gráficos de Lineas y Curvas en WinForms

Hoy veremos como crear gráficos en .NET dinamicamente usando la clase Graphics del espacio de Nombres System.Drawing, la cual tiene métodos que permiten dibujar textos, lineas, curvas, etc.

Para el ejemplo lo haremos mediante un Timer que genera números al azar con los cuales se crearan los puntos a graficar, pero en un caso real, en vez del Timer podemos leer de una base de datos una serie de datos o también recibir por el puerto serial o via sockets leer el valor de un dispositivo conectado a la computadora, por ejemplo un termómetro, balanza electrónica, medición de latidos del corazón, pulsos, etc.

Crear la Aplicación Windows Forms

En el Visual Studio crear una aplicación en C# llamada: "GraficoLineasCurvas" y renombrar el formulario a "frmGrafico". Arrastrar solo un control Timer y llamarlo: "tmrGrafico" configurando sus propiedad Enabled en True, para que se habilite cada 100 milisegundos el gráfico.

El diseño del formulario debe quedar como se muestra en la figura:

Escribir el siguiente código en el formulario, sobre todo la función "graficarSeries" que esta asociado al evento "Tick" del timer "tmrGrafico":

using System;
using System.Drawing;
using System.Windows.Forms;

namespace GraficoLineasCurvas
{
    /*Creado por Luis Dueñas para el Blog*/
    public partial class frmGrafico : Form
    {
        private int x = 0;
        private int n = 40;
        private Point punto1Linea;
        private Point punto1Curva;

        public frmGrafico()
        {
            InitializeComponent();
        }

        private void graficarSeries(object sender, EventArgs e)
        {
            Random oAzar = new Random();
            int yLinea = oAzar.Next(this.Height-200) + 100;
            int yCurva = oAzar.Next(this.Height-200) + 100;
            if (x == 0)
            {
                punto1Linea = new Point(x,yLinea);
                punto1Curva = new Point(x, yCurva);
            }
            Point punto2Linea = new Point(x, yLinea);
            Point punto4Curva = new Point(x, yCurva);
            Graphics grafico = this.CreateGraphics();
            grafico.DrawString("Gráficos Dinámicos en .NET (Por Lduenas)",
                new Font("Arial",40),Brushes.Green,100,20);
            grafico.DrawLine(new Pen(Brushes.Red, 4), punto1Linea, punto2Linea);

            Point punto2Curva;
            Point punto3Curva;
            int c = (int)((x/n)-1)*n;
            if (punto1Curva.Y >= punto4Curva.Y)
            {
                punto2Curva = new Point(c + (n/4), punto4Curva.Y);
                punto3Curva = new Point(c+((3*n) / 4), punto1Curva.Y);              
            }
            else
            {
                punto2Curva = new Point(c+ (n / 4), punto1Curva.Y);
                punto3Curva = new Point(c+ ((3 *n) / 4), punto4Curva.Y);              
            }
            grafico.DrawBezier(new Pen(Brushes.Blue, 4), punto1Curva, punto2Curva,
            punto3Curva, punto4Curva);
         
            x += n;
            punto1Linea = punto2Linea;
            punto1Curva = punto4Curva;
            if (x >= this.Width)
            {
                x = 0;
                grafico.Clear(this.BackColor);
            }
        }
    }
}

Nota: Se crea la variable x para la posición de la columna y la variable y para la fila, ademas 2 variables punto1Linea y punto1Curva para guardar el punto anterior desde donde se iniciara el gráfico.

Para las lineas solo necesitamos 2 puntos: inicio (punto1Linea) y fin (punto2Linea), pero para la curva de Bézier necesitamos 4 puntos: punto de anclaje de inicio (punto1Curva), punto de control 1 (punto2Curva), punto de control 2 (punto3Curva), y punto de anclaje final (punto4Curva).

La variable n (por defecto 40) indica el intervalo en que aumenta las columnas o posición x.

Probar la Aplicación Creada

Grabar el proyecto y ejecutarlo con F5. Aparece una ventana maximizada como en la siguiente figura:

El texto con el título se mostrará de color verde, el gráfico de Lineas se mostrará en color rojo y el gráfico de Curvas en color azul.

Cuando llegue al final del ancho se borrará el dibujo y se creará nuevamente. Puedes experimentar modificando el tamaño del intervalo n de 40 a mas o menos.

Comentario Final

Es muy fácil crear gráficos dinámicos en .NET, ya sea de lineas o curvas, sin necesidad de recurrir a ningún Control, ya que estos solo se utilizan para graficar datos históricos (existentes den bases de datos, archivos de textos, xml, etc), pero, si deseamos graficar en tiempo real mejor es crear nuestro gráfico dinámicamente usando la clase Graphics de System.Drawing.

Descarga
Demo20_GraficoLineasCurvas