OC rdl 189
This commit is contained in:
@@ -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>
|
||||
|
||||
|
||||
@@ -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();
|
||||
|
||||
Reference in New Issue
Block a user