Saltar al contenido

Dashboard, Gráficos Estadísticos, Sumario de Sistema/Aplicación con C#, WinForm y SQL Server – Nivel Intermedio

Hola, en esta ocasión realizaremos un Dashboard (Panel de Datos), Estadísticas, Resumen o Sumario de Sistema/Aplicación con C#, WinForm, SQL Server y Procedimientos almacenados, sin usar herramientas (Librerías) adicionales de terceros.

1. Crear Base de Datos

Para este ejercicio, lo primero que haremos será crear la base de datos, tablas y datos necesarios.

CREATE DATABASE PRACTICA_DASHBOARD
GO
USE PRACTICA_DASHBOARD
go
--------------------------------------------------
--                 TABLAS  
----------------------------------------------------------------
-------------------//PRODUCTO//---------------------------------
CREATE TABLE CATEGORIAS
(
ID INT IDENTITY (1,1) PRIMARY KEY,
CATEGORIA  NVARCHAR (150)
)
go
CREATE TABLE MARCAS
(
ID INT IDENTITY (1,1) PRIMARY KEY,
MARCA  NVARCHAR (150)
)
go
CREATE TABLE PRODUCTOS
(
ID INT IDENTITY (1,1) PRIMARY KEY, 
ID_CATEGORIA INT,
ID_MARCA INT,
DESCRIPCION NVARCHAR (200),
PRECIO_COMPRA FLOAT,
PRECIO_VENTA FLOAT,
STOCK INT,
ESTADO NVARCHAR (15),
CONSTRAINT FK_CATEGORIA FOREIGN KEY (ID_CATEGORIA) REFERENCES CATEGORIAS(ID),
CONSTRAINT FK_MARCA FOREIGN KEY (ID_MARCA) REFERENCES MARCAS(ID),
)  
go
-------------------//PERSONAS//------------------------------------------------------------------------------
go
CREATE TABLE EMPLEADOS 
(
ID INT IDENTITY (1,1) PRIMARY KEY, 
DNI NVARCHAR (10),
CONTRASEÑA NVARCHAR (100),
ID_ROL INT,
NOMBRES NVARCHAR (150),
APELLIDOS NVARCHAR (150),
TELEFONO NVARCHAR (15),
DIRECCION NVARCHAR (150),
)
go
CREATE TABLE CLIENTES 
(
---

2. Crear Procedimientos Almacenados

Estadísticas Generales

Creamos un procedimiento almacenado para sumar el total de las ventas, contar la cantidad de empleados, proveedores, clientes, productos, marcas y categorías.

Importante, necesitamos almacenar el resultado de la sentencia en un parámetro de salida, esto para poder extraer el resultado y mostrarlo en la aplicación, por lo tanto, declaramos un parámetro de salida (output).

----------------------ESTADISTICAS GENERALES
create proc DashboardDatos
@totVentas float output,
@nprod int output,
@nmarc int output,
@ncateg int output,
@nclient int output,
@nprove int output,
@nemple int output
as
Set @totVentas =(select sum(total)as TotalVentas from VENTAS )
Set @nclient=(select count (ID)  as Clientes from CLIENTES)
Set @nprove =(select count (ID) as Proveedores from PROVEEDORES)
Set @nemple  =(select count (ID)as Empleados from EMPLEADOS )
Set @nprod=(select count (ID) as Productos  from PRODUCTOS)
set @nmarc  = (select count (ID) AS marcas from MARCAS)
set @ncateg  = (select count (ID) AS categorias from CATEGORIAS)
go

Productos Preferidos / Más Vendidos

Ahora creamos un procedimiento almacenado para mostrar los productos preferidos por el público, para esto usaremos la tabla detalle venta. Podemos solo mostrar dos, tres o diez primeros productos preferidos, para esto usamos top y lo ordenamos de manera descendiente.

------TOP 5 PRODUCTOS PREFERIDOS - MAS VENDIDOS 
create proc ProdPreferidos
as
Select Top 5 C.CATEGORIA+' '+M.MARCA +' '+P.DESCRIPCION as Producto , COUNT(ID_PRODUCTO ) AS nroVentas 
from DETALLE_VENTA 
inner join PRODUCTOS AS P ON P.ID =DETALLE_VENTA.ID_PRODUCTO 
inner join CATEGORIAS as C ON C.ID = P.ID_CATEGORIA 
inner join MARCAS AS M ON M.ID = P.ID_MARCA 
Group by ID_PRODUCTO,P.DESCRIPCION,C.CATEGORIA,M.MARCA    
Order by count(5) desc
go

Productos por Categoría

Ahora contaremos la cantidad de productos que hay en una categoría, el procedimiento es el mismo de la anterior.

----------------------CANTIDAD DE PRODUCTOS POR CATEGORIA
create proc ProdPorCategoria
as
select C.CATEGORIA  , COUNT(ID_CATEGORIA ) as nroProductos
from 
productos as P 
inner join CATEGORIAS as C ON C.ID=P.ID_CATEGORIA 
group by C.CATEGORIA
order by count(1) DESC
go

3. Crear Proyecto / Aplicación  

Creamos un nuevo proyecto en Visual Studio de tipo Aplicación de Windows Form en C#, en el formulario, agregamos control chart desde el cuadro de herramientas para los productos preferidos y productos por categoría, este control nos permite crear gráficos estadísticos. Finalmente agregamos Controles Labels y Picture Box para mostrar el Sumario General.

Descripción de las propiedades principales de controles de usuario.

Chart Categoría por Producto

Name = “chartProdxCategoria”;
Serie.Name=”series1″ – Por Defecto
series1.ChartArea = “ChartArea1”;
series1.ChartType = DataVisualization.Charting.SeriesChartType.Bar;
series1.IsValueShownAsLabel = true;
series1.LabelForeColor = MenuHighlight;
series1.Palette = DataVisualization.Charting.ChartColorPalette.SeaGreen;

Chart Productos Preferidos

Name = “chartProdPreferidos”;
Palette = DataVisualization.Charting.ChartColorPalette.SeaGreen;
Series.Name = “Series2”; Por Defecto
series2.ChartType = DataVisualization.Charting.SeriesChartType.Doughnut;
series2.IsValueShownAsLabel = true;
series2.LabelFormat = “0”;

Las SERIES se crean y se agregan dependiendo del orden que se agrega el control CHART. Por ejemplo.

Chart1 -> Series1
Chart2 -> Series2
Chart3->Series3
…Sucesivamente

Sin embargo, puede cambiar el nombre de Serie desde Form1.Designer.cs

4. Crear Cadena de Conexión

Doble clic en el formulario para crear el evento Load y abrir el código del formulario, importamos la librería data SQL Client para interactuar con la base de datos.

using System.Data;
using System.Data.SqlClient;

Creamos la Cadena de Conexión. Declaramos SQL Command para ejecutar sentencias y SQL Data Reader para leer filas.

SqlConnection Conexion = new SqlConnection("Server=(local);DataBase=Practica_Dashboard;Integrated Security=true");
SqlCommand cmd;
SqlDataReader dr;

5. Mostrar Gráfico Estadístico de Productos por Categoría

Declaramos ArrayList para guardar el nombre de categoría y la cantidad de productos que existen en ella.

Creamos un método para el gráfico estadístico de productos por categorías, ejecutamos el procedimiento almacenado ProdPorCategoria a través de SQL Command, luego cargamos los datos del resultado en el grafico productos por categoría (Chart chartProdxCategoria) en los ejes correspondientes (X-Y).

ArrayList Categoria = new ArrayList();
ArrayList CantProd = new ArrayList();
private void GrafCategorias() {
    cmd = new SqlCommand("ProdPorCategoria", Conexion);
    cmd.CommandType = CommandType.StoredProcedure;
    Conexion.Open();
    dr = cmd.ExecuteReader();
    while (dr.Read()) {
        Categoria.Add(dr.GetString(0));
        CantProd.Add(dr.GetInt32(1));
    }
    chartProdxCategoria.Series[0].Points.DataBindXY(Categoria,CantProd );
    dr.Close();
    Conexion.Close();
}

6. Mostrar Gráfico Estadístico de Productos Preferidos / Más Vendidos

De la misma manera que lo anterior, declaramos ArrayList para guardar el nombre del producto y la cantidad de productos que existen en ella.

Creamos un método para el gráfico estadístico de los productos preferidos o más vendidos, ejecutamos el procedimiento almacenado ProdPreferidos a través de SQL Command, luego cargamos los datos del resultado en el grafico productos preferidos (Chart-> chartProdPreferidos) en los ejes correspondientes (X-Y).

ArrayList Producto = new ArrayList();
ArrayList Cant = new ArrayList();
private void ProdPreferidos()
{
    cmd = new SqlCommand("ProdPreferidos", Conexion);
    cmd.CommandType = CommandType.StoredProcedure;
    Conexion.Open();
    dr = cmd.ExecuteReader();
    while (dr.Read())
    {
        Producto.Add(dr.GetString(0));
        Cant.Add(dr.GetInt32(1));
    }
    chartProdPreferidos.Series[0].Points.DataBindXY(Producto,Cant );
    dr.Close();
    Conexion.Close();
}

7. Mostrar Estadísticas Generales

Ahora mostraremos las estadísticas generales, creamos un nuevo método, ejecutamos el procedimiento almacenado y declaramos SQL Parameters como parámetro el parámetro de salida para todos los parámetros del procedimiento almacenado y agregamos los parámetros a los parámetros del SQL Command. El resultado, agregamos como valor a las etiquetas (Label).

private void DashboardDatos() {
    cmd = new SqlCommand("DashboardDatos",Conexion );
    cmd.CommandType = CommandType.StoredProcedure;

    SqlParameter total = new SqlParameter("@totVentas", 0);total.Direction = ParameterDirection.Output;
    SqlParameter nprod = new SqlParameter("@nprod", 0); nprod.Direction = ParameterDirection.Output;
    SqlParameter nmarca = new SqlParameter("@nmarc", 0); nmarca.Direction = ParameterDirection.Output;
    SqlParameter ncategora = new SqlParameter("@ncateg", 0); ncategora.Direction = ParameterDirection.Output;
    SqlParameter ncliente = new SqlParameter("@nclient", 0); ncliente.Direction = ParameterDirection.Output;
    SqlParameter nproveedores = new SqlParameter("@nprove", 0); nproveedores.Direction = ParameterDirection.Output;
    SqlParameter nempleados = new SqlParameter("@nemple", 0); nempleados.Direction = ParameterDirection.Output;

    cmd.Parameters.Add(total );
    cmd.Parameters.Add(nprod );
    cmd.Parameters.Add(nmarca );
    cmd.Parameters.Add(ncategora);
    cmd.Parameters.Add(ncliente );
    cmd.Parameters.Add(nproveedores );
    cmd.Parameters.Add(nempleados);

    Conexion.Open();
    cmd.ExecuteNonQuery();

    lblTotalVentas.Text = cmd.Parameters["@totVentas"].Value.ToString();
    lblCantCateg.Text = cmd.Parameters["@ncateg"].Value.ToString();
    lblCAntMarcas.Text = cmd.Parameters["@nmarc"].Value.ToString();
    lblCantProd.Text = cmd.Parameters["@nprod"].Value.ToString();
    lblCantClient.Text = cmd.Parameters["@nclient"].Value.ToString();
    lblCantEmple.Text = cmd.Parameters["@nemple"].Value.ToString();
    lblCantProve.Text = cmd.Parameters["@nprove"].Value.ToString();

    Conexion.Close();
}

Final. Invocar los Métodos desde el Evento Load

Finalmente invocamos los métodos anteriores desde el evento load del formulario.

private void Form1_Load(object sender, EventArgs e)
{
    GrafCategorias();
    ProdPreferidos();
    DashboardDatos();
}

Pueden personalizar la interfaz gráfica a su gusto, combinando colores, iconos, color de fondo, color de textos como se muestra en la portada.

Bueno eso sería todo en este tutorial 🙂 , en el próximo tutorial cambiaremos este proyecto a la arquitectura en Capas.

Video Tutorial

Descargas

Ver Parte 2: En Arquitectura en Capas y Programación Orientada a Objetos (POO)

Los comentarios están cerrados.