Crear Graficas de Linea con Visual Studio y C# .NET


El dia de hoy vamos a crear una grafica de líneas usando Visual Studio y C# .NET, este ejemplo puede ser muy util para tu próximo proyecto.

Visual Studio ya incluye una libreria para graficas muy completa, por lo que no es necesario usar extras mas que agregar las clases de manipulacion de graficas que seria esta.

using System.Windows.Forms.DataVisualization.Charting;

Con esa clase y agregando el componente “Chart” a nuestro formulario principal o a otro formulario ya podemos trabajar con las diferentes graficas que nos brinda el entorno .NET.

Anteriormente les habia escrito un articulo sobre crear graficas de barras(default) con C# .

Componente Chart

Lo siguiente sera agregar el componente chart a nuestro formulario, el componente chart esta en el cuadro de herramientas, al agregarlo al proyecto tendremos una variable objeto para referirnos al componente y configurar las graficas.}

Despues de agregarlo ahora vamos al codigo fuente en la funcion principal o si queremos puede ser en algun evento de Button Click.

La primera parte del codigo es la siguiente, aqui van las configuraciones iniciales de las graficas.

            chart1.Series["Series1"].ChartType = SeriesChartType.Spline; // Tipo de grafica: Bar, Column
            chart1.Series["Series1"].BorderWidth = 5; // Borde de la grafica
            chart1.Series["Series1"].Color = Color.Yellow; // Color de la grafica
            chart1.Series["Series1"].LegendText = "Visitas 2017"; // Label o etiqueta

En la siguiente parte vamos a crear un diccionario de datos donde van los valores que se ingresaran a la grafica. No tiene tanta complicacion, primero van las fechas o los valores del eje X seguido van los valores numericos quevan en el eje Y.

            Dictionary<string, int> dic = new Dictionary<string, int>();
            dic.Add("19-FEB-2017", 576);
            dic.Add("20-FEB-2017", 1087);
            dic.Add("21-FEB-2017", 1061);
            dic.Add("22-FEB-2017", 660);
            dic.Add("23-FEB-2017", 774);
            dic.Add("24-FEB-2017", 576);
            dic.Add("25-FEB-2017", 887);
            dic.Add("26-FEB-2017", 561);
            dic.Add("27-FEB-2017", 1060);
            dic.Add("28-FEB-2017", 274);

Y por ultimo hacemos un recorrigo de los valores del Diccionario de datos y lo agregamos a la grafica.

            foreach (KeyValuePair<string, int> d in dic)
            {
                chart1.Series["Series1"].Points.AddXY(d.Key, d.Value);
            }

Y listo, ejecutamos , podemos ver el resultado en el siguiente video.