Gráfica Estadística, Objeto Chart Control

Integrantes: -Bessy Yolany Zavala Galdamez

                     -Carlos Eduardo Mejía Galeas

                     -David Enrrique Mejía Velasquez

                     -Michael Josue Figueroa Padilla

Gráfica Estadística, Objeto Chart Control

Como crear grafícas estadísticas en C#, con datos extraídos de MySQL.

El objeto que estaremos usando es Chart Control, este objeto es el coordinador de la gráfica según su totalidad y cual se agrupara la gráfica, y en de la gráfica sera marcas, leyendas y otros elementos, los diferentes datos que componen una gráfica son: Chart, ChartArea, Double, Serie.

En este caso usaremos Chart.
Para poder trabajar con gráficas primero tenemos que tener una tabla en MySQL y un Crud de datos en Visual Studio. Aquí les dejo este enlace para que puedan observar, realizar un Crud de Datos: Crud de Datos en Visual 2010

Ejemplo #1:Crearemos una gráfica que muestre la cantidad de estudiantes por curso, y que esta gráfica sea una Gráfica de Barra.

Comenzaremos creando una tabla para nuestra gráfica de Curso. En ‘dscolegio.xsd’, daremos clic derecho ‘Agregar’ y seleccionamos la opción ‘Tabla de Datos’.

Ahora le asignamos un nombre a la tabla, este será de ‘ColegioCurso’ y le agregamos dos columnas.

Ahora crearemos un formulario (Windows Form), para la gráfica y se llamará: ’frmGrafCurso’ 

Ahora lo que aremos es Nombrar el formulario, En la ventana de propiedades en text escribiremos ‘Graficas de Estudiantes Por Curso’

Luego agregamos un objeto de Chart que se encuentra en la parte izquierda de nuestra pantalla, luego de eso realizaremos una serie de modificaciones en la ventana de propiedades.

 Ahora agregaremos dos botones de la barra de herramientas, uno de actualizar y otro de Cerrar, en la ventana de propiedades:

-Para el botón de Actualizar: Name: ‘btnActualizar’, Text: ‘Actualizar’

-Para el botón de Cerrar: Name: ’btnCerrar’, Text: ’Cerrar’

Modificaremos también el anchor, para ello seleccionaremos ambos botones y nos vamos a la propiedad anchor

Hasta aquí ya tenemos todo lo que será el diseño del formulario, ahora lo que prosigue es el código, tanto del botón actualizar como del botón cerrar.

Damos doble clic en el botón Cerrar

Lo primero que agregamos en el código será las librerías que vamos a utilizar:

Y configuramos el botón de Cerrar:

Ahora ingresaremos código para la conexión con la base de datos de MySQL

Escribiremos código al botón Actualizar:

Y así es como nos quedaría la gráfica:

Ejemplo #2: Crear una gráfica que nos muestre el total de alumnos por colegio.

Lo primero que haremos sera verificar o hacer la conexion entre sí, luego de esto vamos agregar una tabla de datos a este lo llamaremos colegios, las columnas serán colegio, el tipo de dato sera tipo String, luego total sera de tipo int, bien luego de todo esto guardamos los cambios e iremos a agregar un nuevo formulario de windows.

Agregar Windows Form

Ahora seguiremos con el botón Actualizar, vamos al formulario de la gráfica y damos doble click en el botón Actualizar.

1. El primer paso que haremos al programar el botón actualizar será ir a hacer la conexion, esto para conectar con la base de datos (BD).

1. Luego hacemos un IF para abrir la conexion y así verificar si tenemos una conexion valida, dentro del IF crearemos una variable que va contener la instruccion SQL, esta será ¨Select  colegio, count(colegio) as total from estudiantes group by colegio¨.

• Vamos a agregar otra librería para hacer un llamado alas funciones de MySQL, este sera: using MySql.Data.MySqlClient; también haremos una adaptacion con MySql Data Adapter.

• Lo siguiente que haremos poblar los datos en Data Set para hacer mostrados los datos en la grafica, pero antes iremos al formulario y en el panel de opciones de la parte de arriba de Visual Studio 2010, elegimos la opción datos y elegimos mostrar orígenes de datos, ahora miramos en detalle la parte de colegio, arrastramos total ala gráfica y en la parte de abajo solo eliminamos, solo dejaríamos dsColegio.

• Esta seria la adaptacion

•   Lo otro que haremos sera cerrar la conexion, sera así : conexion.oConexion.Close();

• Ahora configuraremos la gráfica, vamos a borrar por método clear Títulos, Series y ChartArea, luego de haber eliminado eso, lo primero que haremos sera darle los colores ala gráfica, antes de esto vamos a ir a las librerías y ala que dice DataVisualization le escribiremos chartin, quedaría de esta forma: using System.Windows.Forms.DataVisualization.Charting; luego de haber dado colores y otras configuraciones ala gráfica, como área de la gráfica vamos al siguente paso..

• Ahora configuraremos el titulo. Cambiaremos

• Ahora configuraremos la serie, en esto tenemos que tener mucho cuidado ya que las gráficas tienen nombre único, el gráfico que usaremos sera de columnas

• Ya se mostraria de esta forma

• Le podemos activar la funcion 3D, nosotros dejamos una parte del código comentarisado, eso lo iremos a borrar las 2 plecas para ver como nos quedo.

• Ya borrado eso, nos queda de esta forma

Ya creando el formulario a este le llamaremos frmGrafColegios.

Bien ya creado el formulario en la propiedades del formulario cambiaríamos por decirlo así el titulo que en las propiedades esta representado Text: el nombre sera Gráfica de alumnos por colegios

Luego vamos al cuadro de herramientas del formulario, elegimos datos y elegimos Chart, lo expandimos alo grande que tenemos el formulario

Ya creado el método Chart cambiaremos la propiedad llamada Anchor, este tiene selecionado la opción izquierda y arriba, nosotros activaremos derecha y abajo debemos de tener las 4 opciones activas, estos no funciona para que la gráfica sea de igual tamaño que el formulario

Nos quedaría de la siguiente forma:

Luego de eso vamos agregar 2 botones, estos se encuentran en controles comunes, los botones serán actualizar y cerrar, en la propiedad Text pondremos el nombre que queremos que aparezca en el botón, en la propiedad name pondremos btnActualizar y btnCerrar, luego seleccionamos los 2 botones y vamos a cambiar la propiedad Anchor, por definición siempre esta activa la opción de la izquierda y arriba, desactivaremos esas 2 y activaremos derecha y abajo.

Luego de esto, haremos un click en el formulario e iremos a cambiar la propiedad CancelButton y eligiremos btnCerrar, esto para el botón cerrar, pero siempre iremos a programar damos doble click en el botón cerrar y pondremos Close(); En la parte de las librerías agregaremos una nueva llamada: using System.Windows.Forms.DataVisualization; esta librería funciona para llamar elementos de Chart Control.

Ejemplo #3: Gráfica de alumnos por sexo 

Lo primero es lo primero lo que debemos de hace es agregar un nuevo elemento damos clic en el proyecto y damos clic derecho y buscamos la opción agregar y buscamos nuevo elemento

Después de haber lo generado daremos forma insertando un Tipo de datos Chart en el cual guardara la grafica de forma permanente hasta que la eliminen.

Agregamos dos botones que los servirían para Actualizar y el otro para Cerrar.

También le agregaremos un tipo de dato DataSet. El cual es una función para que nos funcione la gráfica ya que si no le agregas eso no serviría.

Ya agregado el data set damos clic y nos aparecerá un flecha arriba donde daremos clic y seleccionamos la  única opción “Editar en el Diseñador de DataSet”.

Nos abrirá el dscolegio que hayamos creado conforme al crud de estudiantes que hicimos anteriormente en nuestro blog Donde agregaremos a ese dscolegio un DataTable que nos aparecerá en la barra de herramientas ala izquierda de la pantalla para agregar esa tabla le daremos de nombre “Sexo” y las columnas que iran dentro de el le llamaremos sexo y Total.

Guardamos y nos dirigiremos a confirgurar el formulario que llamaremos frmGraficSexo.cs

Damos doble clic en el  botón actualizar y nos dirigirá a el public del frmActualizar para empezar a configurarlo para que nos guarde lo que pidamos. Lo primero que ingresaremos será el adm para crear una nueva conexión con la base de datos, luego diremos que la conexión y la crearconexion sea verdadera. Luego declaramos la variable SQL que será de tipo String que será igual a la selección de  la tabla sexo y la columna sexo y el total de la tabla estudiantes con el grupo de sexo. También declararemos el MySqlDataAdapter que tendrá de variable “DA” lo que será igual, a una nueva adaptación de MySql con la que nos conecta con la variable SQL y la conexión.oConexion que seria la conexión primaria. El DA.Fill (dscolegio, “sexo”) es la tabla de que nos permite coincidir con los datos ingresados en el dscolegio

Después decimos que se cierre la conexión  y que el oGrafico como llamamos a nuestro formulario limpie los títulos y las series de la gráfica.

Después haremos que la grafica se limpie. Después decimos que nuestra grafica(oGrafico) que obtenga un color y que use colores de Excel. Después hacemos que el área del grafico sea “aregrafico”  y que sea igual a iniciar una nueva instancia en la clase.  Continuadamente decimos que el oGrafico obtenga un objeto al final de la colección con la variable local  “aregrafico”. Despues decimos que el titulo sea una nueva instancia también de la clase donde los diga “Total de alumnos por sexo”. También le declaramos que tipo de letra usaremos el tamaño y el estilo que queramos. Tambien diremos que el oGrafico  almacene y agregue  objetos con la variable “títulos”.

También almacenara puntos de datos con la variable “serie” y que va a hacer igual a una nueva instancia con una serie de caracteres Unicode.

Con la variable “serie” diremos que el gráfico será de tipo circular. También con la variable diremos que obtenga un origen de datos del gráfico usado en el enlace y que sea igual a un carácter Unicode que sea “sexo”. En la siguiendo se hara casi-mente lo mismo solo que en este iremos a obtener columnas de la tabla de datos del gráfico usado para enlazar los datos de los valores y que será igual a una cadena de Unicode llamada “Total”.  Después diremos que la variable obtenga una marca que indique el valor del punto de datos en la etiqueta y que será igual a verdadero. Por menultimo diremos que el oGrafico obtenga un objeto al final  con la variable “serie”. Por ultimo direos que el oGrafico establezca el origen de datos del objeto que será igual al dscolegio.sexo ya que asi nos mostrara la grafica..    

También configuramos el botón Cerrar con solo un simple código : close();  y eso seria todo  para el botón Cerrar

Y asi se veria la grafica terminada y funcionando :

Gracias por su atención! Esto ha sido todo por hoy.