AdminADS/SIG
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Cambios en el dashboard de ventas

Browse Source
This commit is contained in:
RPimienta
2024-11-14 23:06:09 -06:00
parent c8771a541e
commit b52fa9bc35
2 changed files with 144 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
Ventas/DashboardVentas.aspx
View File

@@ -117,8 +117,10 @@
</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>
@@ -251,7 +253,7 @@
</asp:UpdatePanel>
</asp:Content>
<asp:Content ID="Content8" ContentPlaceHolderID="JS" runat="Server">
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<%-- <script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/pie.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
@@ -346,6 +348,123 @@
// "enabled": true
// }
//});
}--%>
<!--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>