OC rdl 189

This commit is contained in:
rakcsle
2024-11-07 16:15:53 -07:00
parent 8b07f996bb
commit 536b0c3e82
4 changed files with 287 additions and 92 deletions

View File

@@ -375,14 +375,18 @@
</div>
</div>
<div class="portlet-body">
<div id="chartdiv" style="text-align: center;height:600px!important">
</div>
<div id="div_ventas" runat="server" style="text-align: center;">
<img src="/Metronic/assets/admin/layout/img/loading.gif" alt="loading" />
<%--<img src="/Metronic/assets/admin/layout/img/loading.gif" alt="loading" />--%>
</div>
</div>
</div>
<!-- END REGIONAL STATS PORTLET-->
</div>
</div>
</asp:Content>
<asp:Content ID="Content8" ContentPlaceHolderID="JS" runat="Server">
<script>
@@ -396,50 +400,51 @@
</script>
<script type="text/javascript">
function CargaGrafica() { }
function CargaGrafica3() { }
function filldata() {
//function CargaGrafica() { }
//function CargaGrafica3() { }
//function filldata() {
// CargaGrafica();
// CargaGrafica3();
// if ($('#C_DivIndicadores')) {
// $('#C_DivIndicadores').slick({
// lazyLoad: 'ondemand',
// slidesToShow: 3,
// slidesToScroll: 1,
// dots: true,
// infinite: true,
// autoplay: true,
// autoplaySpeed: 5000,
// responsive: [
// {
// breakpoint: 1024,
// settings: {
// slidesToShow: 2,
// slidesToScroll: 1,
// infinite: true,
// dots: true
// }
// }, {
// breakpoint: 600,
// settings: {
// slidesToShow: 1,
// slidesToScroll: 1,
// infinite: true,
// dots: true
// }
// }]
// });
// $('#C_DivIndicadores').show();
// $('#C_chartcheckboxes').hide();
// }
//}
CargaGrafica();
CargaGrafica3();
if ($('#C_DivIndicadores')) {
$('#C_DivIndicadores').slick({
lazyLoad: 'ondemand',
slidesToShow: 3,
slidesToScroll: 1,
dots: true,
infinite: true,
autoplay: true,
autoplaySpeed: 5000,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
infinite: true,
dots: true
}
}, {
breakpoint: 600,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
infinite: true,
dots: true
}
}]
});
$('#C_DivIndicadores').show();
$('#C_chartcheckboxes').hide();
}
}
$(document).ready(function () {
filldata();
Sys.Application.add_load(function (s, e) {
filldata()
});
//filldata();
//Sys.Application.add_load(function (s, e) {
// filldata()
//});
});
function CargaDia(pFecha) {
__doPostBack('txtFecha', pFecha);
@@ -465,5 +470,127 @@
});
</script>
<!-- Librería principal de amCharts 4 -->
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<!-- Módulo de gráficos de XYChart -->
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<!-- Tema animado de amCharts 4 -->
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<!-- Paquete de idioma español -->
<script src="https://cdn.amcharts.com/lib/4/lang/es_ES.js"></script>
<script >
// Función para crear series dinámicamente
function createSeries(field, name) {
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = field;
series.dataFields.categoryX = "mes";
series.name = name;
series.strokeWidth = 2;
// Añadir bullets a la serie
var bullet = series.bullets.push(new am4charts.CircleBullet());
bullet.circle.radius = 4;
bullet.circle.fill = am4core.color("#fff");
bullet.circle.strokeWidth = 2;
// Configurar el tooltip para cada serie
series.tooltipText = "{name}: [bold]{valueY}[/]";
series.tooltip.pointerOrientation = "vertical";
series.tooltip.background.cornerRadius = 5;
series.tooltip.background.fillOpacity = 0.8;
series.tooltip.label.padding(10, 10, 10, 10);
// Asegurar que el label del tooltip sea visible
series.tooltip.label.fill = am4core.color("#000"); // Texto en negro
// Mostrar el tooltip solo al pasar el cursor sobre la serie
series.tooltip.showInViewport = false;
// Habilitar interacciones en la serie
series.interactionsEnabled = true;
}
function generaGrafico(dtGrafico,dtseries) {
// Importar las librerías de amCharts
am4core.useTheme(am4themes_animated);
// Crear el gráfico
var chart = am4core.create("chartdiv", am4charts.XYChart);
// Ejemplo de datos dinámicos
chart.data = dtGrafico; //[
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "mes";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGridDistance = 30;
// Configuración del eje Y (Importe)
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.title.text = "Importe";
for (var i = 0; i < dtseries.length; i++) {
var item = dtseries[i];
var key = Object.keys(item)[0];
var value = item[key];
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = key;
series.dataFields.categoryX = "mes";
series.name = value;
series.strokeWidth = 2;
// Añadir bullets a la serie
var bullet = series.bullets.push(new am4charts.CircleBullet());
bullet.circle.radius = 4;
bullet.circle.fill = am4core.color("#fff");
bullet.circle.strokeWidth = 2;
// Configurar el tooltip para cada serie
series.tooltipText = "{name}: [bold]{valueY}[/]";// "{" + value + "}: [bold]{" + key +"}[/]";
series.tooltip.pointerOrientation = "vertical";
series.tooltip.background.cornerRadius = 5;
series.tooltip.background.fillOpacity = 0.8;
series.tooltip.label.padding(10, 10, 10, 10);
// Asegurar que el label del tooltip sea visible
series.tooltip.label.fill = am4core.color("#000"); // Texto en negro
// Mostrar el tooltip solo al pasar el cursor sobre la serie
series.tooltip.showInViewport = false;
// Habilitar interacciones en la serie
series.interactionsEnabled = true;
}
// Habilitar el cursor pero deshabilitar su tooltip
chart.cursor = new am4charts.XYCursor();
chart.cursor.behavior = "none"; // Deshabilitar pan o zoom
chart.cursor.lineX.disabled = true;
chart.cursor.lineY.disabled = true;
chart.cursor.tooltipEnabled = false; // Deshabilitar el tooltip del cursor
// Leyenda
chart.legend = new am4charts.Legend();
// Exportar el gráfico
chart.exporting.menu = new am4core.ExportMenu();
}
</script>
</asp:Content>

View File

@@ -2,7 +2,7 @@
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls;
using Extensiones;
using System.Data;
using static Extensiones.ModExtensiones;
@@ -280,14 +280,19 @@ public partial class Ventas_RepProductosServiciosPeriodo : ClsPaginas
CveClienteClasificacion: DdlClienteClasificacion.SelectedValue.ToEntero(), ModalidadContable: !ChkLecturaAdmin.Checked))
{
GvDatos.DataSource = ObjVentas.DtResultados;
DtVentas = ObjVentas.DtResultados;
}
DtVentas = ObjVentas.DtResultados;
}
CveProyecto = DdlProyecto.SelectedValue.ToEntero();
ObjVentas.Dispose();
GvDatos.DataBind();
if (GvDatos.Rows.Count > 0)
{
//CargaGraficas(DtVentas);
//this.DvGraficas.Visible = true;
}
else
{
this.DvGraficas.Visible = false;
}
UPDatos.Update();
@@ -298,6 +303,37 @@ public partial class Ventas_RepProductosServiciosPeriodo : ClsPaginas
}
#endregion
#region GRAFICA
private void CargaGraficas(DataTable DtVentas)
{
MuestraGrafica(div_ventas, DtVentas, "GPO", "Total", "", "", "gh2", "");
}
private void CargaGraficaNEW(DataTable D_T_Datos)
{
JArray jsonData = new JArray();
for (int x=24; x <= 35 ; x++)
{
string Mes = D_T_Datos.Columns[x].ColumnName;
JObject obj = new JObject();
obj.Add(new JProperty("mes", Mes));
for (int y = 1; y <= D_T_Datos.Rows.Count - 1; y++) // y Empiesa en 1 para no agregar el total
{
obj.Add(new JProperty(D_T_Datos.Rows[y][4].ToString(), D_T_Datos.Rows[y][x].ToString()));
}
jsonData.Add(obj);
}
JArray jsonSeries = new JArray();
for (int y = 1; y <= D_T_Datos.Rows.Count - 1; y++) // y Empiesa en 1 para no agregar el total
{
JObject obj = new JObject(
new JProperty(D_T_Datos.Rows[y][4].ToString(), D_T_Datos.Rows[y][4].ToString())
);
jsonSeries.Add(obj);
}
string jsdatos = jsonData.ToString();
string jsseries = jsonSeries.ToString();