Se estará desarrollando una gráfica estadística en C# usando el objeto CharControl que muestre los grupos de productos que existen en una fruteria ordenados por su precio, para esto estaremos extrayendo datos de una tabla de nuestra base de datos de MySql, para que sean mostrados en nuestra gráfica.
Objetivos:
1.Implementar
la programación en C# orientada a objetos.
2.Aprender a Ordenar
datos múltiples de una tabla con muchos registros.
3.Crear gráficas estadísticas en C# utilizando el objeto CharControl.
Conocimientos previos:
1.Tener
conocimientos sobre la programación en C# orientada a objetos.
2.Manejar
la instrucción SQL como los comandos select y las funciones de agregado.
3.Tener
conocimientos sobre la clase de programación.
4.Entender los llamados de las
librerías de MySql.
5.Conocer cómo hacer los llamados de
los elementos a una gráfica con CharControl.
Conceptos Básicos
Objeto CharControl: Es el objeto
contenedor de toda la gráfica, que contiene el título de la gráfica, el área,
las series, leyendas marcas y otros elementos.
Desarrollo de los contenidos:
1. Abrir visual studio, antes de todo modificar el dataset creando una nueva tabla correspondiente a los datos a mostrar en nuestra gráfica.
2. Crear un nuevo formulario en nuestro proyecto que utilizaremos para cargar nuestra gráfica.
2. Pegar del cuadro de herramientas el objeto ChartControl.
3. Pegar los dos botones que ejecutaran las acciones de actualizar y cerrar en el formulario de la gráfica.
4. Escribir en el botón actualizar los parámetros: de conexión con la base de datos, solicitud específica de datos y la configuración de los elementos de la gráfica.
Pasos a seguir
para realizar una gráfica estadística en C# utilizando Chart Control
Hecho esto le damos el nombre de Productos
a nuestra tabla y usando la combinación de teclas Ctrl + L insertamos dos
columnas más, una se va a llamar producto
y va quedar de tipo String, la segunda fila se va a llamar Total y le
asignamos un tipo de dato System.Int16, tal como muestra la imagen. Hasta aquí
ya configuramos el origen de datos.
Lo que hacemos luego es crear un nuevo
formulario en nuestro proyecto que utilizaremos para realizar nuestra gráfica,
para esto hacemos click derecho en nuestro proyecto y agregamos un nuevo
Windows Form.
Ahora en la propiedad text le damos un
nombre al título de nuestro formulario y también le damos la propiedad
Maximized en la sección WindowState.
Luego nos vamos al cuadro de
herramientas y en la sección de datos seleccionamos el objeto Chart y lo pegamos en el formulario.
Hecho esto le damos un click encima del
objeto Chart, en la ventana de las propiedades nos vamos a la sección name y lo nombramos como mGrafico, aquí mismo nos vamos a la
propiedad anchor y seleccionamos los cuatro lados del objeto de la manera que
se muestra en la imagen. Esto lo hacemos para que el objeto se adapte a toda el
área del formulario, de manera que cuando agrandemos nuestro formulario se
agrande todo el objeto Chart de manera automática.
Luego pegamos dos botones del cuadro de
herramientas, al primer botón en la propiedad de text, le damos el título de Actualizar y lo nombramos
como(btnActualizar) en la propiedad
de name, al segundo botón le damos el título de Cerrar y también lo nombramos
como (btnCerrar).
Una vez hecho esto seleccionamos los dos
botones y nos vamos a la propiedad Anchor, aquí solo dejamos marcados los lados
de abajo y derecho, tal como se muestra en la imagen, esto nos sirve para
cuando ampliemos nuestro formulario, los botones se mantengan en su lugar y no
se agranden distorsionando su tamaño.
Ahora entonces damos doble click en el
botón Actualizar.
Declaramos
las siguientes librerías para el funcionamiento de nuestra gráfica.
La
librería:
Using System.Windows.Forms.DataVisualization.Charting; sirve para llamar los elementos de la gráfica como por
ejemplo los títulos, áreas, series, etc.
using MySql.Data.MySqlClient; contiene los componentes de MySql que nos permiten establecer la conexión y
extraer y mostrar los datos.
Lo siguiente que
hacemos ahora es como primer paso conectarnos con la base de datos, en el botón
actualizar creamos una nueva conexión tal como se muestra aquí en la imagen
//1 Conectarnos con la base de datos
admConexion conexion = new admConexion();
if (conexion.CrearConexion() == true)
{
Como ya tenemos nuestra
conexión abierta, mediante la condición declarada en el if, entonces procedemos a
hacer una solicitud especifica de datos, para esto declaramos la variable SQL
de tipo string y realizamos una instrucción sql con la función de
agregado
//2 Hacer la solicitud específica de datos
string SQL = "Select precio, Count(producto) as Total from
fruteria.tiendafrutas group by precio";
En esta instrucción sql le
estamos indicando al servidor, que nos seleccione de la base de datos fruteria,
de la tabla tiendafrutas la columna precio y mediante la función de agregado Count
nos extraiga el producto uno a uno y todo esto lo agrupe por precio.
Esto significa que nuestra gráfica va a mostrar de
forma estadística los grupos de productos ordenados por su determinado precio.
Hecho esto llamamos al
adaptador de datos de MySql que será el que va alimentar nuestro dataset. A
nuestro adaptador entonces le enviamos la instrucción SQL y el objeto conexión
de la conexión que ya está abierta.
MySqlDataAdapter DA = new MySqlDataAdapter (SQL, conexion.oConexion); // Hasta este momento se ha hecho la solicitud específica de datos y se ha ejecutado la instrucción sql.
Ahora mediante el método Fill y usando el adaptador de
datos ya declarado poblamos de datos nuestro dataset. Lo que se muestra dentro
de las comillas en color rojo es el nombre de la tabla que tengo creada en mi
dataset.
DA.Fill(dsFruteria, "Productos");
//Hemos poblado de datos nuestro dataset con
el adaptador de datos de MySql, mediante el método fill, para que sean
mostrados en nuestra
Como cuarto paso cerramos la conexión que tenemos abierta
y lo hacemos llamando al objeto conexión.oConexion y mediante la función Close
la cerramos.
//4 Cerrar la conexion abierta
conexion.oConexion.Close();
Una vez hecho esto comenzamos a configurar nuestra
gráfica, empezamos por limpiar los títulos, las series y las áreas, para esto
llamamos a nuestro chart mGrafico con su debido elemento a
limpiar y las limpiamos con la función Clear.
//configurar nuestra gráfica
mGrafico.Titles.Clear();
mGrafico.Series.Clear();
mGrafico.ChartAreas.Clear();
Ahora llamamos de nuevo al objeto mGrafico y mediante el
elemento Palette le damos un color a
nuestra gráfica de la siguiente manera. En este caso le he dado el color de
tipo Pastel.
mGrafico.Palette = ChartColorPalette.Pastel;
Ahora procedemos a
configurar el área de nuestra gráfica, vamos a crear una nueva área, para esto
llamamos al elemento ChartArea y
declaramos el objeto areagrafico y
esto será igual a una nueva área, tal como se muestra a continuación.
//Configurar el área de la gráfica
ChartArea areagrafico = new
ChartArea ();
Ahora le damos una
propiedad en estilo 3D a nuestra gráfica, para esto llamamos a nuestro objeto areagrafico
y le decimos que esta propiedad en 3D va ser igual a verdadero.
Luego agregamos nuestro
objeto areagrafico con los cambios que hicimos a la sección de las áreas del
objeto mGrafico.
areagrafico.Area3DStyle.Enable3D = true;
mGrafico.ChartAreas.Add(areagrafico);
Bien vamos ahora a
configurar el título de la gráfica, para esto llamamos al elemento Titles y
declaramos el objeto título y esto será igual a un nuevo título. Lo que va
dentro del paréntesis es el título que se mostrara en nuestra gráfica.
Seguido de esto
configuramos la fuente del título, para esto llamamos al objeto título y la
propiedad Font y esto es igual a una nueva fuente. El tipo de letra a utilizar
será Tahoma , tendrá un tamaño de 18 y el estilo de la fuente será negrita.
Title titulo = new Title
("Productos ordenados por categoria");
titulo.Font = new Font("Tahoma",
18, FontStyle.Bold);
Hecho esto agregamos a la
sección de los títulos del objeto
mGrafico nuestro objeto titulo de esta manera:
mGrafico.Titles.Add(titulo);
Seguidamente pasamos a
configurar las series, llamamos al elemento Series
declaramos el objeto serie y esto es igual a una nueva
serie. Le decimos que lo que va a mostrar en la serie son productos. Luego
mediante la función ChartType elegimos el tipo de gráfica que se va a mostrar,
en mi caso yo elegí la gráfica de pastel. Cabe destacar que la gráfica de
pastel es la única gráfica que no se puede comparar con otro tipo de gráfica.
Series serie = new Series("Productos");
serie.ChartType = SeriesChartType.Pie;
En resumido las series
son los diferentes tipos de gráficas que existen.
Venimos ahora a indicarle
que en el valor de X de la serie se van mostrar precios, también le decimos
que en el valor de Y se mostrará el
Total de productos.
serie.XValueMember = "Precios";
serie.YValueMembers = "Total";
serie.IsValueShownAsLabel = true;
Mediante la propiedad
IsValueShownAsLabel le estamos indicando
a la gráfica que los valores se nos van a mostrar como etiquetas entendibles encima
de las áreas de la gráfica.
Por último, venimos a agregar nuestro objeto serie a la
sección de las series del objeto mGrafico de la gráfica.
mGrafico.Series.Add(serie);
Como último paso configuramos nuestro Datasource que es
el que establece el origen de datos de la librería de los llamados de los
elementos de la gráfica. Aquí le decimos que sea igual a nuestro dataset que
tenemos creado con el nombre de nuestra tabla.
mGrafico.DataSource = dsFruteria.Productos;
Una vez hecho esto, nos vamos a Program
y cambiamos el nombre del formulario de arranque estableciendo el nombre de
nuestro formulario frmGraf_mercado. Luego presionamos Ctrl + F5 para ejecutarlo.
En tiempo de ejecución nuestra gráfica debió quedarnos de la siguiente
manera
De tal forma en nuestra gráfica se muestra en la sección de la leyenda el precio que tiene ese determinado número de productos que aparecen encima de las áreas de nuestra gráfica. Osea que de manera estadística nuestra gráfica nos está mostrando los grupos de productos que tienen un mismo precio. Por ejemplo: en el color morado de la gráfica nos dice que en nuestra fruteria existen 3 productos que tienen un precio de 10 lempiras.
