Cambios en el dashboard de ventas

Ventas/DashboardVentas.aspx

@@ -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>

Ventas/DashboardVentas.aspx.vb

@@ -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)
+    Private Sub CargaGraficaNEW(ByVal D_T_Datos As DataTable)
-        MuestraGrafica(div_ventas, DtVentas, "Ano", "Total", "", "", "gh2", "")
+        Dim jsonData As JArray = New JArray()
-    End Sub
 
-    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 = "")
+        For x As Integer = 1 To 12
-        Dim Info As String = ""
+            Dim Mes As String = D_T_Datos.Columns(x).ColumnName
-        Dim SBJSScript As StringBuilder = New StringBuilder()
+            Dim obj As JObject = New JObject()
+            obj.Add(New JProperty("mes", Mes))
 
-        If DTDatos.Rows.Count > 0 Then
+            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()))
-            '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)
             Next
 
-            If Info.Length > 0 Then
+            jsonData.Add(obj)
-                'Info = Info.Remove(Info.Length - 1, 1)
+        Next
-                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
 
-        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