Seguimos con el tema de la visualización de datos, esta vez vamos a crear una gráfica de barras sencilla en el Visual Studio y con C#.
Crear el Proyecto
Lo primero que haremos sera crear un nuevo proyecto, también pueden usar un proyecto existente.
Una vez creado e iniciado nuestro proyecto, Vamos a agregar el componente “Chart” que se encuentra en el cuadro de Herramientas en el apartado de Datos.
Arrastramos el componente y lo colocamos en el lugar, posición y dimensiones que necesitemos.
Elementos de una Gráfica
Para crear una gráfica con el componente chart debemos tener en cuenta los elementos que conforman la gráfica:
- Serie: Conjunto de valores
- Punto: Un valor en una posición XY
Normalmente los valores XY son valores numéricos, pero en este ejemplo les muestro como poner un valor de texto en el eje X.
Código
El código a continuación lo deben escribir o copiar/pegar después de la funcion InitializeComponent() del archivo Form1.cs, o en el archivo que ustedes estén manejando.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| chart1.Series["Series1"].LegendText = "Visitas 2017"; | |
| 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); | |
| foreach(KeyValuePair<string, int> d in dic) { | |
| chart1.Series["Series1"].Points.AddXY(d.Key, d.Value); | |
| } |
Les explico el código:
- Linea 1: Seleccionamos la serie “Series1” que se crear por default y le cambiamos el texto de leyenda.
- Linea 3: Creamos un diccionario para almacenar los valores
- Lineas 4-8: Asignamos los valores al diccionario, recordamos que el valor de texto es para el eje X y el valor numérico es para el eje Y.
- Linea 10: Iniciamos un foreach para hacer el recorrido de los valores del diccionario.
- Linea 11: Asignamos el valor de cada ciclo del foreach a los puntos de la gráfica.
Resultado
Esto seria todo.
Saludos
y donde esta el codigo?
Esta en un gist de github.