84 lines
4.2 KiB
Plaintext
84 lines
4.2 KiB
Plaintext
<%@ Page Title="Sistema de Información Gerencial" Language="C#" AutoEventWireup="false" CodeFile="PivotTable.aspx.cs" Inherits="PivotTable" %>
|
|
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head runat="server">
|
|
<meta charset="utf-8" />
|
|
<title>Tabla Dinámica con WebDataRocks (DataTable)</title>
|
|
<!-- Incluir el CSS de WebDataRocks -->
|
|
<link rel="stylesheet" href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" />
|
|
<!-- Incluir el archivo de localización en español -->
|
|
<script src="https://cdn.webdatarocks.com/latest/localization/webdatarocks.locale.es.js"></script>
|
|
<!-- Incluir la Toolbar y el script principal de WebDataRocks -->
|
|
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
|
|
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>
|
|
<style>
|
|
/* Estilos opcionales para el contenedor */
|
|
#wdr-component {
|
|
width: 100%;
|
|
height: 500px;
|
|
margin: 20px auto;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<form id="form1" runat="server">
|
|
<div>
|
|
<!-- Se puede utilizar este literal para depuración o para mostrar el JSON generado -->
|
|
<asp:Literal ID="litJsonData" runat="server" Visible="false"></asp:Literal>
|
|
<!-- Contenedor donde se renderizará el pivot table -->
|
|
<div id="wdr-component"></div>
|
|
<script type="text/javascript">
|
|
// La variable "datosLocal" se inicializa con el JSON generado en C#
|
|
var datosLocal = <%= JsonData %>;
|
|
|
|
// Inicialización de WebDataRocks con configuración en español
|
|
var pivot = new WebDataRocks({
|
|
container: "#wdr-component", // Contenedor donde se renderizará la tabla dinámica
|
|
toolbar: true, // Activa la barra de herramientas (se mostrará en español)
|
|
report: {
|
|
dataSource: {
|
|
data: datosLocal, // Asigna el JSON obtenido desde C#
|
|
// Configuración detallada de los campos (fields)
|
|
fields: [
|
|
{ uniqueName: "Producto", caption: "Producto" },
|
|
{ uniqueName: "Categoría", caption: "Categoría" },
|
|
{ uniqueName: "Año", caption: "Año", type: "number", format: "0" },
|
|
{ uniqueName: "Ventas", caption: "Ventas Totales", type: "number", format: "$#,##0.00" },
|
|
{ uniqueName: "Región", caption: "Región" }
|
|
]
|
|
},
|
|
// Configuración de la estructura del reporte
|
|
slice: {
|
|
// Filas: se mostrarán los productos
|
|
rows: [
|
|
{ uniqueName: "Producto", caption: "Producto" }
|
|
],
|
|
// Columnas: se agruparán los datos por Año
|
|
columns: [
|
|
{ uniqueName: "Año", caption: "Año" }
|
|
],
|
|
// Medidas: se sumarán las ventas para cada combinación de Producto y Año
|
|
measures: [
|
|
{ uniqueName: "Ventas", aggregation: "sum", caption: "Total Ventas" }
|
|
],
|
|
// Filtros: se configura un filtro sobre el campo Región
|
|
filters: [
|
|
{
|
|
uniqueName: "Región",
|
|
caption: "Filtrar por Región",
|
|
filter: {
|
|
members: [
|
|
{ uniqueName: "Región.[Norte]" },
|
|
{ uniqueName: "Región.[Sur]" }
|
|
]
|
|
}
|
|
}
|
|
]
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
</div>
|
|
</form>
|
|
</body>
|
|
</html> |