Cambios en el dashboard de ventas
This commit is contained in:
RPimienta
@@ -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>
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
Imports System.Activities.Statements
|
||||
Imports System.Data
|
||||
Imports Extensiones
|
||||
Imports Newtonsoft.Json.Linq
|
||||
|
||||
Partial Class Ventas_DashboardVentas
|
||||
Inherits ClsPaginas
|
||||
@@ -183,7 +184,7 @@ Partial Class Ventas_DashboardVentas
|
||||
GvVentasClasificacionxMes.DataBind()
|
||||
GvVentasAcumulado.DataBind()
|
||||
|
||||
CargaGraficas(DtVentasGrafica)
|
||||
CargaGraficaNEW(DtVentasGrafica)
|
||||
|
||||
'Dim Ano3 = DateTime.Now.Year.ToString()
|
||||
'Dim Ano2 = (DateTime.Now.Year - 1).ToString()
|
||||
@@ -212,42 +213,31 @@ Partial Class Ventas_DashboardVentas
|
||||
|
||||
End Sub
|
||||
|
||||
Private Sub CargaGraficas(ByVal DtVentas As DataTable)
|
||||
MuestraGrafica(div_ventas, DtVentas, "Ano", "Total", "", "", "gh2", "")
|
||||
End Sub
|
||||
Private Sub CargaGraficaNEW(ByVal D_T_Datos As DataTable)
|
||||
Dim jsonData As JArray = New JArray()
|
||||
|
||||
Private Sub MuestraGrafica(ByVal divcontainer As HtmlGenericControl, ByVal DTDatos As DataTable, ByVal ColTitle As String, ByVal ColValue As String, ByVal Titulo As String, ByVal SubTitulo As String, ByVal Optional Indicador As String = "gh", ByVal Optional XReferencia As String = "", ByVal Optional YReferencia As String = "")
|
||||
Dim Info As String = ""
|
||||
Dim SBJSScript As StringBuilder = New StringBuilder()
|
||||
For x As Integer = 1 To 12
|
||||
Dim Mes As String = D_T_Datos.Columns(x).ColumnName
|
||||
Dim obj As JObject = New JObject()
|
||||
obj.Add(New JProperty("mes", Mes))
|
||||
|
||||
If DTDatos.Rows.Count > 0 Then
|
||||
|
||||
'For Each DbRow As DataRow In DTDatos.Rows
|
||||
' Info = String.Format("{2}['{1}',{0}],", DbRow("TotalAno1"), DbRow(ColTitle), Info)
|
||||
' Info = String.Format("{2}['{1}',{0}],", DbRow("TotalAno2"), DbRow(ColTitle), Info)
|
||||
' Info = String.Format("{2}['{1}',{0}],", DbRow("TotalAno3"), DbRow(ColTitle), Info)
|
||||
' Info = String.Format("{2}['{1}',{0}],", DbRow("TotalAno3Presupuesto"), DbRow(ColTitle), Info)
|
||||
'Next
|
||||
|
||||
'For Each DbRow As DataRow In DTDatos.Rows
|
||||
' Info = String.Format("{2}['{1}',{0}],", DbRow("TotalAno1"), DateTime.Now.Year - 2, Info)
|
||||
' Info = String.Format("{2}['{1}',{0}],", DbRow("TotalAno2"), DateTime.Now.Year - 1, Info)
|
||||
' Info = String.Format("{2}['{1}',{0}],", DbRow("TotalAno3"), DateTime.Now.Year, Info)
|
||||
' Info = String.Format("{2}['{1}',{0}],", DbRow("TotalAno3Presupuesto"), $"PRESUPUESTO {Now.Year}", Info)
|
||||
'Next
|
||||
|
||||
For Each DbRow As DataRow In DTDatos.Rows
|
||||
Info = String.Format("{2}['{1}',{0}],", DbRow(ColValue), DbRow(ColTitle), Info)
|
||||
For y As Integer = 0 To D_T_Datos.Rows.Count - 1
|
||||
obj.Add(New JProperty(D_T_Datos.Rows(y)(0).ToString(), D_T_Datos.Rows(y)(x).ToString()))
|
||||
Next
|
||||
|
||||
If Info.Length > 0 Then
|
||||
'Info = Info.Remove(Info.Length - 1, 1)
|
||||
SBJSScript.AppendFormat("graficahighcharts('{0}','{1}','{2}','{3}',[{4}],1,'{5}');", divcontainer.ClientID, Titulo, SubTitulo, YReferencia, Info, XReferencia)
|
||||
End If
|
||||
Else
|
||||
SBJSScript.AppendFormat("graficahighcharts('{0}','{1}','{2}','{3}',[{4}],1,'{5}');", divcontainer.ClientID, Titulo, SubTitulo, YReferencia, " ", XReferencia)
|
||||
End If
|
||||
jsonData.Add(obj)
|
||||
Next
|
||||
|
||||
RegistraScript(SBJSScript.ToString(), Indicador)
|
||||
Dim jsonSeries As JArray = New JArray()
|
||||
|
||||
For y As Integer = 0 To D_T_Datos.Rows.Count - 1
|
||||
Dim obj As JObject = New JObject(New JProperty(D_T_Datos.Rows(y)(0).ToString(), D_T_Datos.Rows(y)(0).ToString()))
|
||||
jsonSeries.Add(obj)
|
||||
Next
|
||||
|
||||
Dim jsdatos As String = jsonData.ToString()
|
||||
Dim jsseries As String = jsonSeries.ToString()
|
||||
RegistraScript($"generaGrafico({jsdatos},{jsseries});")
|
||||
End Sub
|
||||
|
||||
End Class
|
||||
|
||||
Reference in New Issue
Block a user