Graficos razones financieras Rep anexo catalogo

App_Code/ClsPaginas.vb

@@ -9188,7 +9188,7 @@ Public Class ClsPaginas
             'PaginaDict.Add("/Sistemas/CatEmpresas.aspx".ToUpper(), 2)
             PaginaDict.Add("/Sistemas/CatEmpresas.aspx".ToUpper(), 24)
             PaginaDict.Add("/Sistemas/Empresa.aspx".ToUpper(), 2)
-            PaginaDict.Add("/Sistemas/Empresa2.aspx".ToUpper(), 1341)
+            PaginaDict.Add("/Sistemas/DefinicionEmpresa.aspx".ToUpper(), 1341)
             PaginaDict.Add("/Sistemas/CatUsuarios.aspx".ToUpper(), 20)
             PaginaDict.Add("/Sistemas/Usuarios.aspx".ToUpper(), 20)
             PaginaDict.Add("/Sistemas/UsuarioDetalle.aspx".ToUpper(), 20)

Contabilidad2/RepAnexoCatalogoMensual.aspx

@@ -150,12 +150,17 @@
 
                                 <asp:TemplateField>
                                     <HeaderTemplate>
-                                        <asp:HyperLink ID="Hypgrafica" runat="server" CssClass="Texto Hypgrafica gral" NavigateUrl="javascript:void(0);" onclick="return cargaGraficaBarras2();"><i class="fa fa-bar-chart" aria-hidden="true"></i></asp:HyperLink>
+                                        <%--<asp:HyperLink ID="Hypgrafica" runat="server" CssClass="Texto Hypgrafica gral" NavigateUrl="javascript:void(0);" onclick="return cargaGraficaBarras2();"><i class="fa fa-bar-chart" aria-hidden="true"></i></asp:HyperLink>--%>
+                                          <asp:HyperLink ID="hpl2" runat="server" CssClass="Texto Hypgrafica" NavigateUrl="javascript:void(0);"  >
+                                                        <i class="fa fa-bar-chart" aria-hidden="true"></i></asp:HyperLink>
                                     </HeaderTemplate>
                                     <ItemTemplate>
                                         <div style="white-space: nowrap">
-                                            <asp:HyperLink ID="Hypgrafica" runat="server" CssClass="Texto Hypgrafica" NavigateUrl="javascript:void(0);" onclick="return HandlerGraf(this, event);"><i class="fa fa-bar-chart" aria-hidden="true"></i></asp:HyperLink>
+                                            <%--<asp:HyperLink ID="Hypgrafica" runat="server" CssClass="Texto Hypgrafica" NavigateUrl="javascript:void(0);" onclick="return HandlerGraf(this, event);"><i class="fa fa-bar-chart" aria-hidden="true"></i></asp:HyperLink>
-                                            <asp:CheckBox ID="chkgraf" CssClass="chkgraf" runat="server" />
+                                            <asp:CheckBox ID="chkgraf" CssClass="chkgraf" runat="server" />--%>
+                                             <asp:HyperLink ID="hpl2" runat="server" CssClass="Texto Hypgrafica" NavigateUrl="javascript:void(0);"  >
+                                                        <i class="fa fa-bar-chart" aria-hidden="true"></i></asp:HyperLink>
+                                                    <asp:CheckBox ID="chkgraf" CssClass="chkgraf" runat="server" />
                                         </div>
                                     </ItemTemplate>
                                 </asp:TemplateField>
@@ -165,7 +170,7 @@
                                         <div style="width: 200px;">Nombre</div>
                                     </HeaderTemplate>
                                     <ItemTemplate>
-                                        <asp:Label runat="server" Text='<%# Eval("Nombre")%>'></asp:Label>
+                                        <asp:Label ID="LblNombre" runat="server" Text='<%# Eval("Nombre")%>'></asp:Label>
                                     </ItemTemplate>
                                 </asp:TemplateField>
 
@@ -272,8 +277,9 @@
                             </div>
                         </div>
                         <br />
-                        <div id="chartdiv" runat="server">
+                        <%--<div id="chartdiv" runat="server">
-                        </div>
+                        </div>--%>
+                        <div runat="server" id="chartdiv2"></div>
                     </div>
                     <div class="modal-footer">
                         <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
@@ -299,121 +305,172 @@
             $(`#${hplControl}`).click();
         }
 
-        function graficahighchartsFinan(idcontainer, titulo, subtitulo, ytitulo, datos, Yinterval, labelpoint, media, datospie1, datospie2, Tittulo2, ControlID) {
 
-            hplControl = ControlID;
+       function graficahighchartsFinan(idcontainer, titulo, subtitulo, ytitulo, datos, xtitulo, labelpoint, media, datospie1, datospie2, idChkSeleccionado,ControlID) {
+
+           
             let tipoGrafico = $(`#DdlGrafica`).val();
+            let esPie = tipoGrafico == 'pie'?true:false;
+            hplControl = ControlID;
 
-            $('#LblTituloGrafica').text(Tittulo2)
+            if(idChkSeleccionado=='' & esPie ){
+                $('#DdlGrafica').val('column');
+                 tipoGrafico = $(`#DdlGrafica`).val();
+                esPie = false;
+            }
+
+            
+           
+
+            $('#LblTituloGrafica').text(titulo)
 
             $(document).ready(function () {
                 $(".chartcheckboxes").remove();
             });
+           
             var Monedas = '';
             if (datospie1.length > 0) {
                 Monedas = 'Monedas';
             }
-            var numerodatos = 0;
+
-            $("<div class='chartcheckboxes' ><span></span></div>").insertAfter("#" + idcontainer);
+            let datosSeries = []; 
-            if (datos.length > 0) {
+            let datosCategorias = [];      
-                var numerodatos = datos.length - 1;
+            let datosRaw = [];
-                //var media = (datos.reduce(function (a, b) { return a + b; })) / (numerodatos + 1);
+            
-                for (var i = numerodatos; i >= 0; i--) {
+
-                    $("<input type='checkbox' id='" + idcontainer + i + "' class='overrydecheckbox' value='" + i + "' onchange=\" changedatagrafica2('" + idcontainer + "');\" /><label for='" + idcontainer + i + "'>" + datos[i][0].substring(0, 3) + "</label>").insertAfter("#" + idcontainer + " + div span");
+             if (idChkSeleccionado.trim().length > 0) {
+
+                let dataName = $(`#${idChkSeleccionado}`).data('name');
+                let dataData = $(`#${idChkSeleccionado}`).data('data');
+                datosRaw = dataData
+                datosCategorias = $(`#${idChkSeleccionado}`).data('categorias');
+                
+
+                let serieDato = {
+                    name: dataName,
+                    data: dataData
                 }              
+                datosSeries.push(serieDato);                
+                console.log("data-name:", dataName);
+                console.log("data-data:", dataData);
+                
+
+            } else {
+                $(document).ready(function () {
+                    $('.chksel').each(function () {
+                        if ($(this).prop('checked')) {
+
+                            var dataName = $(this).data('name');
+                            var dataData = $(this).data('data');
+                            datosCategorias = $(this).data('categorias');
+
+                            let serieDato = {
+                                name: dataName,
+                                data: dataData
+                            }
+                            datosSeries.push(serieDato);
+                            console.log("data-name:", dataName);
+                            console.log("data-data:", dataData);
+                           
+                        }
+                    });
+                });
             }             
-            $("#" + idcontainer).data('serie', datos);
             
-            var margintop = 80;
+            console.log("serieDato:", datosSeries);
-            var dataset = [{
+            console.log("datosCategorias:", datosCategorias);
-                type: tipoGrafico,
+
-                lineColor: '#9ACAE6',
+            if(esPie){                
-                color: '#2caffe',
+                let datosPie = [];
-                fillColor: '#2caffe',
+
-                lineWidth: 3,
+                for (let i = 0; i < datosCategorias.length; i++) {
-                marker: {
+
-                    lineWidth: 2,
+                        let objpie = {
-                    lineColor: '#9ACAE6',
+                            name:  datosCategorias[i],
-                    fillColor: '#9ACAE6'
+                            y:datosRaw[i]
-                },
+                        }
-                pointInterval: 1,
+                        datosPie.push(objpie);                        
-                name: ' ',
+                    }
-                data: datos
+
-            }, {
+
-                type: 'line',
+                    datosSeries = [{
-                lineWidth: 2,
+                         name: 'Importe',
-                lineColor: '#999',
+                        colorByPoint : true,
-                marker: {
+                        data : datosPie
-                    enabled: false
+                    }]
-                },
+
-                name: '  ',
+
-                data: [media, media]
+            }
-            }];
+
+            Highcharts.chart(idcontainer, {
 
-            $('#' + idcontainer).highcharts({
                 chart: {
-                    type: 'area', spacingTop: margintop
+                    type: tipoGrafico
                 },
-                title: {
-                    text: titulo
-                },
-                subtitle: {
-                    text: subtitulo
-                },
-                xAxis: {
-                    type: "category"
 
+                title: {
+                    text: titulo,
+                    align: 'left'
                 },
+
+                subtitle: {
+                    text: subtitulo,
+                    align: 'left'
+                },
+
                 yAxis: {
                     title: {
                         text: ytitulo
-                    },
+                    }
-                    labels: {
+                },
-                        formatter: function () {
+
-                            return this.value / Yinterval;
+                xAxis: {                
+                    categories: datosCategorias,
+                    title: {
+                        text: xtitulo
+                    }
+                },
+
+                legend: {
+                    layout: 'vertical',
+                    align: 'right',
+                    verticalAlign: 'middle'
+                },
+
+                plotOptions: {
+                    series: {
+                        label: {
+                            connectorAllowed: false
                         }
                     }
                 },
-                tooltip: {
+
-                    shared: true,
+                series: datosSeries ,
-                    valueSuffix: labelpoint
+
-                },
+                responsive: {
-                plotOptions: {
+                    rules: [{
-                    area: {
+                        condition: {
-                        color: '#FBC5C5',
+                            maxWidth: 500
-                        fillColor: '#FBC5C5',
+                        },
-                        stacking: 'normal',
+                        chartOptions: {
-                        lineColor: '#F89F9F',
+                            legend: {   
-                        lineWidth: 0,
+                                layout: 'horizontal',
-                        marker: {
+                                align: 'center',
-                            radius: 5,
+                                verticalAlign: 'bottom'
-                            lineWidth: 2,
-                            lineColor: '#FFF',
-                            fillColor: '#F89F9F'
-                        }
-                    },
-                    line: {
-                        pointInterval: numerodatos,
-                        lineColor: '#999999',
-                        marker: {
-                            enabled: false,
-                            symbol: 'circle',
-                            radius: 2,
-                            states: {
-                                hover: {
-                                    enabled: true
-                                }
                             }
                         }
-                    }
+                    }]
                 },
-                series: dataset,
+                credits: {
-                navigation: {
+                    enabled: false
-                    buttonOptions: {
-                        y: -80
-                    }
                 }
+
             });
+
+           
+
+
+
         }
     </script>
 

Contabilidad2/RepAnexoCatalogoMensual.aspx.vb

@@ -194,6 +194,9 @@ Partial Class Contabilidad2_RepAnexoCatalogoMensual
 
 #Region "  GV ROW DATABOUND  "
     Protected Sub GvMensual1_RowDataBound(sender As Object, e As GridViewRowEventArgs) Handles GvMensual2.RowDataBound
+        If e.Row.RowType = DataControlRowType.Header Then
+            setgrafica(e)
+        End If
         If e.Row.RowType = DataControlRowType.DataRow Then
 
             'If e.Row.RowIndex = 0 Then
@@ -296,41 +299,85 @@ Partial Class Contabilidad2_RepAnexoCatalogoMensual
     End Sub
 
     Public Sub setgrafica(e As GridViewRowEventArgs)
-        'Dim lista As New List(Of Object)
-        'lista.Add(New With {.Texto = "Enero", .Valor = e.Row.DBCampo("Enero").ToDecimal(), .Color = "#FF0F00"})
-        'lista.Add(New With {.Texto = "Febrero", .Valor = e.Row.DBCampo("Febrero").ToDecimal(), .Color = "#FF6600"})
-        'lista.Add(New With {.Texto = "Marzo", .Valor = e.Row.DBCampo("Marzo").ToDecimal(), .Color = "#F8FF01"})
-        'lista.Add(New With {.Texto = "Abril", .Valor = e.Row.DBCampo("Abril").ToDecimal(), .Color = "#04D215"})
-        'lista.Add(New With {.Texto = "Mayo", .Valor = e.Row.DBCampo("Mayo").ToDecimal(), .Color = "#2A0CD0"})
-        'lista.Add(New With {.Texto = "Junio", .Valor = e.Row.DBCampo("Junio").ToDecimal(), .Color = "#8A0CCF"})
-        'lista.Add(New With {.Texto = "Julio", .Valor = e.Row.DBCampo("Julio").ToDecimal(), .Color = "#CD0D74"})
-        'lista.Add(New With {.Texto = "Agosto", .Valor = e.Row.DBCampo("Agosto").ToDecimal(), .Color = "#754DEB"})
-        'lista.Add(New With {.Texto = "Septiembre", .Valor = e.Row.DBCampo("Septiembre").ToDecimal(), .Color = "#DDDDDD"})
-        'lista.Add(New With {.Texto = "Octubre", .Valor = e.Row.DBCampo("Octubre").ToDecimal(), .Color = "#999999"})
-        'lista.Add(New With {.Texto = "Noviembre", .Valor = e.Row.DBCampo("Noviembre").ToDecimal(), .Color = "#000000"})
-        'lista.Add(New With {.Texto = "Diciembre", .Valor = e.Row.DBCampo("Diciembre").ToDecimal(), .Color = "#FF0F00"})
 
-        Dim Lista2 As New List(Of String)
+        If e.Row.RowType = DataControlRowType.DataRow Then
-        Lista2.Add($"['{"Enero"}',{e.Row.DBCampo("Enero").ToDecimal()}]")
+            'Dim Lista2 As New List(Of String)
-        Lista2.Add($"['{"Febrero"}',{e.Row.DBCampo("Febrero").ToDecimal()}]")
+            'Lista2.Add($"['{"Enero"}',{e.Row.DBCampo("Enero").ToDecimal()}]")
-        Lista2.Add($"['{"Marzo"}',{e.Row.DBCampo("Marzo").ToDecimal()}]")
+            'Lista2.Add($"['{"Febrero"}',{e.Row.DBCampo("Febrero").ToDecimal()}]")
-        Lista2.Add($"['{"Abril"}',{e.Row.DBCampo("Abril").ToDecimal()}]")
+            'Lista2.Add($"['{"Marzo"}',{e.Row.DBCampo("Marzo").ToDecimal()}]")
-        Lista2.Add($"['{"Mayo"}',{e.Row.DBCampo("Mayo").ToDecimal()}]")
+            'Lista2.Add($"['{"Abril"}',{e.Row.DBCampo("Abril").ToDecimal()}]")
-        Lista2.Add($"['{"Junio"}',{e.Row.DBCampo("Junio").ToDecimal()}]")
+            'Lista2.Add($"['{"Mayo"}',{e.Row.DBCampo("Mayo").ToDecimal()}]")
-        Lista2.Add($"['{"Julio"}',{e.Row.DBCampo("Julio").ToDecimal()}]")
+            'Lista2.Add($"['{"Junio"}',{e.Row.DBCampo("Junio").ToDecimal()}]")
-        Lista2.Add($"['{"Agosto"}',{e.Row.DBCampo("Agosto").ToDecimal()}]")
+            'Lista2.Add($"['{"Julio"}',{e.Row.DBCampo("Julio").ToDecimal()}]")
-        Lista2.Add($"['{"Septiembre"}',{e.Row.DBCampo("Septiembre").ToDecimal()}]")
+            'Lista2.Add($"['{"Agosto"}',{e.Row.DBCampo("Agosto").ToDecimal()}]")
-        Lista2.Add($"['{"Octubre"}',{e.Row.DBCampo("Octubre").ToDecimal()}]")
+            'Lista2.Add($"['{"Septiembre"}',{e.Row.DBCampo("Septiembre").ToDecimal()}]")
-        Lista2.Add($"['{"Noviembre"}',{e.Row.DBCampo("Noviembre").ToDecimal()}]")
+            'Lista2.Add($"['{"Octubre"}',{e.Row.DBCampo("Octubre").ToDecimal()}]")
-        Lista2.Add($"['{"Diciembre"}',{e.Row.DBCampo("Diciembre").ToDecimal()}]")
+            'Lista2.Add($"['{"Noviembre"}',{e.Row.DBCampo("Noviembre").ToDecimal()}]")
+            'Lista2.Add($"['{"Diciembre"}',{e.Row.DBCampo("Diciembre").ToDecimal()}]")
+
+            Dim ListaDatos As New List(Of String)
+            Dim ListaCategorias As New List(Of String)
+
+            ListaDatos.Add(e.Row.DBCampo("Enero").ToDecimal.ToString("###########0.00"))
+            ListaDatos.Add(e.Row.DBCampo("Febrero").ToDecimal.ToString("###########0.00"))
+            ListaDatos.Add(e.Row.DBCampo("Marzo").ToDecimal.ToString("###########0.00"))
+            ListaDatos.Add(e.Row.DBCampo("Abril").ToDecimal.ToString("###########0.00"))
+            ListaDatos.Add(e.Row.DBCampo("Mayo").ToDecimal.ToString("###########0.00"))
+            ListaDatos.Add(e.Row.DBCampo("Junio").ToDecimal.ToString("###########0.00"))
+            ListaDatos.Add(e.Row.DBCampo("Julio").ToDecimal.ToString("###########0.00"))
+            ListaDatos.Add(e.Row.DBCampo("Agosto").ToDecimal.ToString("###########0.00"))
+            ListaDatos.Add(e.Row.DBCampo("Septiembre").ToDecimal.ToString("###########0.00"))
+            ListaDatos.Add(e.Row.DBCampo("Octubre").ToDecimal.ToString("###########0.00"))
+            ListaDatos.Add(e.Row.DBCampo("Noviembre").ToDecimal.ToString("###########0.00"))
+            ListaDatos.Add(e.Row.DBCampo("Diciembre").ToDecimal.ToString("###########0.00"))
+
+            ListaCategorias.Add($"""Enero""")
+            ListaCategorias.Add($"""Febrero""")
+            ListaCategorias.Add($"""Marzo""")
+            ListaCategorias.Add($"""Abril""")
+            ListaCategorias.Add($"""Mayo""")
+            ListaCategorias.Add($"""Junio""")
+            ListaCategorias.Add($"""Junio""")
+            ListaCategorias.Add($"""Agosto""")
+            ListaCategorias.Add($"""Septiembre""")
+            ListaCategorias.Add($"""Octubre""")
+            ListaCategorias.Add($"""Noviembre""")
+            ListaCategorias.Add($"""Diciembre""")
+
+            Dim Titulo As String = e.Row.FCLabel("LblNombre").Text
+            Dim SubTitulo As String = ""
+            Dim YReferencia As String = "Valor"
+            Dim Info As String = ""
+            Dim XReferencia As String = "Periodos"
+            Dim Promedio As String = ""
+
+
+            'e.Row.FCHyperLink("Hypgrafica").Attributes.Add("data-values", Newtonsoft.Json.JsonConvert.SerializeObject(lista))
+
+            'If e.Row.DataKey("Tipo").ToEntero <> 1 Then
+            'Dim Info = String.Join(",", Lista2)
+            'e.Row.FCHyperLink("Hypgrafica").Attributes.Add("onclick", "$('#DivModalGrafica').modal('show');  " &
+            '         String.Format("graficahighchartsFinan('{0}','{1}','{2}','{3}',[{4}],1,'{5}','{6}',[{8}],[{7}],'{9}','{10}');", chartdiv2.ClientID, "", "", "$", Info, "", 0, "", "", e.Row.DBCampo("Nombre"), e.Row.FCHyperLink("Hypgrafica").ClientID))
+
+
+
+            e.Row.FCHyperLink("hpl2").Attributes.Add("onclick", "$('#DivModalGrafica').modal('show');  " &
+                     String.Format("graficahighchartsFinan('{0}','{1}','{2}','{3}',[{4}],'{5}','{5}','{6}',[{8}],[{7}],'{9}','{10}');", chartdiv2.ClientID, Titulo, SubTitulo, YReferencia, Info, XReferencia, Promedio, "", "", e.Row.FCCheckBox("chkgraf").ClientID, e.Row.FCHyperLink("hpl2").ClientID))
+
+            e.Row.FCCheckBox("chkgraf").InputAttributes.Add("class", "chksel")
+            e.Row.FCCheckBox("chkgraf").InputAttributes.Add("data-name", e.Row.FCLabel("LblNombre").Text)
+            e.Row.FCCheckBox("chkgraf").InputAttributes.Add("data-data", $"[{String.Join(",", ListaDatos)}]")
+            e.Row.FCCheckBox("chkgraf").InputAttributes.Add("data-categorias", $"[{String.Join(",", ListaCategorias)}]")
+
+        End If
+
+        If e.Row.RowType = DataControlRowType.Header Then
+            e.Row.FCHyperLink("hpl2").Attributes.Add("onclick", "$('#DivModalGrafica').modal('show');  " &
+                    String.Format("graficahighchartsFinan('{0}','{1}','{2}','{3}',[{4}],'{5}','{5}','{6}',[{8}],[{7}],'{9}','{10}' );", chartdiv2.ClientID, "Selección multiple", "", "Valores", "", "Periodos", "", "", "", "", e.Row.FCHyperLink("hpl2").ClientID))
+        End If
 
 
-        'e.Row.FCHyperLink("Hypgrafica").Attributes.Add("data-values", Newtonsoft.Json.JsonConvert.SerializeObject(lista))
 
-        'If e.Row.DataKey("Tipo").ToEntero <> 1 Then
-        Dim Info = String.Join(",", Lista2)
-        e.Row.FCHyperLink("Hypgrafica").Attributes.Add("onclick", "$('#DivModalGrafica').modal('show');  " &
-                 String.Format("graficahighchartsFinan('{0}','{1}','{2}','{3}',[{4}],1,'{5}','{6}',[{8}],[{7}],'{9}','{10}');", chartdiv.ClientID, "", "", "$", Info, "", 0, "", "", e.Row.DBCampo("Nombre"), e.Row.FCHyperLink("Hypgrafica").ClientID))
         'Else
         '    e.Row.FCHyperLink("hpl2").Visible = False
         'End If

Finanzas/RepRazonesFinancieras2.aspx

@@ -450,14 +450,17 @@
                                         <asp:TemplateField>
                                             <HeaderTemplate>
                                                 <%--<asp:HyperLink ID="Hypgrafica" runat="server" CssClass="Texto Hypgrafica gral" NavigateUrl="javascript:void(0);" onclick="return cargaGraficaBarras2();"><i class="fa fa-bar-chart" aria-hidden="true"></i></asp:HyperLink>--%>
+                                                 <asp:HyperLink ID="hpl2" runat="server" CssClass="Texto Hypgrafica" NavigateUrl="javascript:void(0);"  >
+                                                        <i class="fa fa-bar-chart" aria-hidden="true"></i></asp:HyperLink>
                                             </HeaderTemplate>
                                             <ItemTemplate>
                                                 <div style="white-space: nowrap">
-                                                    <asp:HyperLink ID="Hypgrafica" Visible="false" runat="server" CssClass="Texto Hypgrafica" NavigateUrl="javascript:void(0);" onclick="return HandlerGraf(this, event);"><i class="fa fa-bar-chart" aria-hidden="true"></i></asp:HyperLink>
+                                                    <%--<asp:HyperLink ID="Hypgrafica" Visible="false" runat="server" CssClass="Texto Hypgrafica" NavigateUrl="javascript:void(0);" onclick="return HandlerGraf(this, event);"><i class="fa fa-bar-chart" aria-hidden="true"></i></asp:HyperLink>--%>
-                                                    <asp:CheckBox ID="chkgraf" CssClass="chkgraf" runat="server" Visible="false" />
+                                                    
 
                                                     <asp:HyperLink ID="hpl2" runat="server" CssClass="Texto Hypgrafica" NavigateUrl="javascript:void(0);"  >
                                                         <i class="fa fa-bar-chart" aria-hidden="true"></i></asp:HyperLink>
+                                                    <asp:CheckBox ID="chkgraf" CssClass="chkgraf" runat="server" />
 
                                                      
                                                 </div>
@@ -650,381 +653,234 @@
 </asp:Content>
 <asp:Content ID="Content7" ContentPlaceHolderID="JS" runat="Server">
 
-    <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>
-    <link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
-    <script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
 
     <script>
-        let cdatos;
-        let currentid = 1;
-        function HandlerGraf(obj, evt) {
-            $("#DivModalGrafica").modal();
-            cdatos = $(obj).data('values');
-            if (currentid == 1) {
-                CargaGraficaBarras();
-            } else {
-                CargaGraficaPastel();
-            }
-            $('.LblTituloGrafica').text($(obj).closest('tr').text().trim());
-        }
-        function CargaGraficaBarras() {
-            let data = cdatos;
-            var chart = AmCharts.makeChart("chartdiv", {
-                "type": "serial",
-                "theme": "light",
-                "dataProvider": data,
-                "startDuration": 2,
-                "valueAxes": [{
-                    "position": "left",
-                    "title": "Ventas"
-                }],
-                "graphs": [{
-                    "balloonText": "[[category]]: <b>[[value]]</b> [[Moneda]]",
-                    "colorField": "Color",
-                    "fillAlphas": 1,
-                    "lineAlpha": 0.1,
-                    "type": "line",
-                    "valueField": "Valor"
-                }],
-                "depth3D": 20,
-                "angle": 30,
-                "chartCursor": {
-                    "categoryBalloonEnabled": false,
-                    "cursorAlpha": 0,
-                    "zoomable": false
-                },
-                "categoryField": "Texto",
-                "categoryAxis": {
-                    "gridPosition": "start",
-                    "labelRotation": 90
-                },
-                "export": {
-                    "enabled": true
-                }
-            });
-        }
-        function CargaGraficaPastel() {
-            let data = cdatos;
-            var chart = AmCharts.makeChart("chartdiv", {
-                "type": "pie",
-                "theme": "light",
-                "dataProvider":
-                    data,
-                "valueField": "Valor",
-                "titleField": "Texto",
-                "outlineAlpha": 0.4,
-                "depth3D": 0,
-                "balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]% [[Moneda]])</span>",
-                "angle": 0,
-                "export": {
-                    "enabled": true
-                }
-            });
-        }
-        function ADSBegin() {
-            $('.DdlGrafica').on('select2:select', function (e) {
-                var data = e.params.data;
-                currentid = data.id;
-                if (currentid == 1) {
-                    CargaGraficaBarras();
-                } else {
-                    CargaGraficaPastel();
-                }
-            });
-            $('.DdlGrafica').removeClass('DdlGrafica')
-            initamgrafica();
-        }
-
-        function cargaGraficaBarras2() {
-            //Hypgrafica
-            $("#DivModalGrafica").modal();
-            $('.LblTituloGrafica').text('grafica');
-            let items = []
-            let data;
-            let series = [];
-            $('.chkgraf input:checked').each(function () {
-                data = $(this).closest('tr').find('.Hypgrafica').data('values')
-                let name = $(this).closest('tr').text().trim()
-                items.push({ data: data, name: name })
-            });
-            if (items) {
-                data = items[0].data;
-                series.push({
-                    "balloonText": "[[title]]: <b>[[value]]</b> [[Moneda]]",
-                    "colorField": "Color",
-                    "fillAlphas": 1,
-                    "lineAlpha": 0.1,
-                    "type": "column",
-                    "title": items[0].name,
-                    "valueField": 'Valor'
-                })
-                for (var indexcol = 1; indexcol < items.length; indexcol++) {
-                    let cdatos = items[indexcol].data;
-                    let valueField = 'Valor' + indexcol;
-                    for (var i = 0; i < cdatos.length; i++) {
-                        data[i][valueField] = cdatos[i].Valor
-                    }
-                    series.push({
-                        "balloonText": "[[title]]: <b>[[value]]</b> [[Moneda]]",
-                        "colorField": "Color",
-                        "fillAlphas": 1,
-                        "lineAlpha": 0.1,
-                        "type": "column",
-                        "title": items[indexcol].name,
-                        "valueField": valueField
-                    })
-                }
-                var chart = AmCharts.makeChart("chartdiv", {
-                    "type": "serial",
-                    "theme": "light",
-                    "dataProvider": data,
-                    "startDuration": 2, "legend": {
-
-                        "generateFromData": true  // "data":  data.map(function(num) { return {title:num.Texto ,color:num.Color}; })
-                    },
-                    "valueAxes": [{
-                        "position": "left",
-                        "title": "Ventas"
-                    }],
-                    "graphs": series,
-                    "depth3D": 20,
-                    "angle": 30,
-                    "chartCursor": {
-                        "categoryBalloonEnabled": false,
-                        "cursorAlpha": 0,
-                        "zoomable": false
-                    },
-                    "categoryField": "Texto",
-                    "categoryAxis": {
-                        "gridPosition": "start",
-                        "labelRotation": 90
-                    },
-                    "export": {
-                        "enabled": true
-                    }
-                });
-            }
-        }
-        function initamgrafica() {
-            AmCharts.addInitHandler(function (chart) {
-                function handleCustomMarkerToggle(legendEvent) {
-                    var dataProvider = legendEvent.chart.dataProvider;
-                    var itemIndex;
-                    legendEvent.chart.toggleLegend = true;
-                    if (undefined !== legendEvent.dataItem.hidden && legendEvent.dataItem.hidden) {
-                        legendEvent.dataItem.hidden = false;
-                        dataProvider.push(legendEvent.dataItem.storedObj);
-                        legendEvent.dataItem.storedObj = undefined;
-                        dataProvider.sort(function (lhs, rhs) {
-                            return lhs.dataIdx - rhs.dataIdx;
-                        });
-                    } else {
-                        legendEvent.dataItem.hidden = true;
-                        for (var i = 0; i < dataProvider.length; ++i) {
-                            if (dataProvider[i].dataIdx === legendEvent.dataItem.dataIdx) {
-                                itemIndex = i;
-                                break;
-                            }
-                        }
-                        legendEvent.dataItem.storedObj = dataProvider[itemIndex];
-                        dataProvider.splice(itemIndex, 1);
-                    }
-                    legendEvent.chart.validateData();
-                }
-                if (!chart.legend || !chart.legend.enabled || !chart.legend.generateFromData) {
-                    return;
-                }
-                var categoryField = chart.categoryField;
-                var colorField = chart.graphs[0].lineColorField || chart.graphs[0].fillColorsField || chart.graphs[0].colorField;
-                var legendData = chart.dataProvider.map(function (data, idx) {
-                    var markerData = {
-                        "title": data[categoryField],
-                        "color": data[colorField],
-                        "dataIdx": idx
-                    };
-                    if (!markerData.color) {
-                        markerData.color = chart.graphs[0].lineColor;
-                    }
-                    data.dataIdx = idx;
-                    return markerData;
-                });
-
-                chart.legend.data = legendData;
-                chart.legend.switchable = true;
-                chart.legend.addListener("clickMarker", handleCustomMarkerToggle);
-
-            }, ["serial"]);
-        }
-
-    </script>
-    <script>
-        function LimpiaCeros() {
-
-            let Divisor = 1;
-
-            $('.ceros').each(function (i, obj) {
-
-                if ($(this).html() == '0.00' || $(this).html() == '0.00%') {
-                    $(this).html('-');
-                }
-
-                if (!($(this).html() == '-' || $(this).html() == '' || ~$(this).html().indexOf("%"))) {
-                    if (Divisor > 1) {
-                        $(this).attr('data-toggle', 'tooltip');
-                        $(this).attr('data-container', 'body');
-                        $(this).attr('title', $(this).html());
-                    }
-                    $(this).html(FormatoNumeroIPP(ToDouble($(this).html()) / Divisor, ((Divisor == 1) ? 2 : 0)));
-                }
-
-                if (ToDouble($(this).html()) < 0) {
-                    $(this).css("color", "red");
-                }
-            });
-        }
-
-        function FormatoNumeroIPP(Importe, Decimales) {
-            if (typeof Decimales === 'undefined') { Decimales = 2; }
-
-            if (isNaN(parseInt(Importe))) return "NaN";
-
-            var tmpNum = Importe;
-
-            tmpNum = tmpNum.toFixed(Decimales).replace(/./g, function (c, i, a) {
-                return i && c !== "." && !((a.length - i) % 3) ? ',' + c : c;
-            });
-
-            return tmpNum;
-        }
 
 
-        function pageLoad(sender, e) {
+        function graficahighchartsFinan(idcontainer, titulo, subtitulo, ytitulo, datos, xtitulo, labelpoint, media, datospie1, datospie2, idChkSeleccionado) {
-            $(document).ready(function () {
-                $('[data-toggle="tooltip"]').tooltip();
-            });
-        }
 
-
+            $('#LblTituloGrafica').text(titulo)
-
-
-
-        function graficahighchartsFinan(idcontainer, titulo, subtitulo, ytitulo, datos, Yinterval, labelpoint, media, datospie1, datospie2, Tittulo2) {
-
-
-            $('#LblTituloGrafica').text(Tittulo2)
 
             $(document).ready(function () {
                 $(".chartcheckboxes").remove();
             });
+
             var Monedas = '';
             if (datospie1.length > 0) {
                 Monedas = 'Monedas';
             }
-            var numerodatos = 0;
+      
-            $("<div class='chartcheckboxes' ><span></span></div>").insertAfter("#" + idcontainer);
+
-            if (datos.length > 0) {
+            let datosSeries = []; 
-                var numerodatos = datos.length - 1;
+            let datosCategorias = []; 
-                //var media = (datos.reduce(function (a, b) { return a + b; })) / (numerodatos + 1);
+
-                for (var i = numerodatos; i >= 0; i--) {
+
-                    $("<input type='checkbox' id='" + idcontainer + i + "' class='overrydecheckbox' value='" + i + "' onchange=\" changedatagrafica2('" + idcontainer + "');\" /><label for='" + idcontainer + i + "'>" + datos[i][0].substring(0, 3) + "</label>").insertAfter("#" + idcontainer + " + div span");
+            if (idChkSeleccionado.trim().length > 0) {
+
+                var dataName = $(`#${idChkSeleccionado}`).data('name');
+                var dataData = $(`#${idChkSeleccionado}`).data('data');
+                datosCategorias = $(`#${idChkSeleccionado}`).data('categorias');
+
+                let serieDato = {
+                    name: dataName,
+                    data: dataData
                 }
+                datosSeries.push(serieDato);
+                console.log("data-name:", dataName);
+                console.log("data-data:", dataData);
+                
+
+            } else {
+                $(document).ready(function () {
+                    $('.chksel').each(function () {
+                        if ($(this).prop('checked')) {
+
+                            var dataName = $(this).data('name');
+                            var dataData = $(this).data('data');
+                            datosCategorias = $(this).data('categorias');
+
+                            let serieDato = {
+                                name: dataName,
+                                data: dataData
+                            }
+                            datosSeries.push(serieDato);
+                            console.log("data-name:", dataName);
+                            console.log("data-data:", dataData);
+                           
+                        }
+                    });
+                });
             }
-            $("#" + idcontainer).data('serie', datos);
 
-            var margintop = 80;
-            var dataset = [{
-                type: 'area',
-                lineColor: '#9ACAE6',
-                color: '#F1F7FD',
-                fillColor: '#F1F7FD',
-                lineWidth: 3,
-                marker: {
-                    lineWidth: 2,
-                    lineColor: '#9ACAE6',
-                    fillColor: '#9ACAE6'
-                },
-                pointInterval: 1,
-                name: ' ',
-                data: datos
-            }, {
-                type: 'line',
-                lineWidth: 2,
-                lineColor: '#999',
-                marker: {
-                    enabled: false
-                },
-                name: '  ',
-                data: [media, media]
-            }];
              
-            $('#' + idcontainer).highcharts({
+            
+            console.log("serieDato:", datosSeries);
+            console.log("datosCategorias:", datosCategorias);
+
+       
+
+            Highcharts.chart(idcontainer, {
+
                 chart: {
-                    type: 'area', spacingTop: margintop
+                    type: 'line'
                 },
-                title: {
-                    text: titulo
-                },
-                subtitle: {
-                    text: subtitulo
-                },
-                xAxis: {
-                    type: "category"
 
+                title: {
+                    text: titulo,
+                    align: 'left'
                 },
+
+                subtitle: {
+                    text: subtitulo,
+                    align: 'left'
+                },
+
                 yAxis: {
                     title: {
                         text: ytitulo
-                    },
+                    }
-                    labels: {
+                },
-                        formatter: function () {
+
-                            return this.value / Yinterval;
+                xAxis: {                
+                    categories: datosCategorias,
+                    title: {
+                        text: xtitulo
+                    }
+                },
+
+                legend: {
+                    layout: 'vertical',
+                    align: 'right',
+                    verticalAlign: 'middle'
+                },
+
+                plotOptions: {
+                    series: {
+                        label: {
+                            connectorAllowed: false
                         }
                     }
                 },
-                tooltip: {
+
-                    shared: true,
+                series: datosSeries ,
-                    valueSuffix: labelpoint
+
-                },
+                responsive: {
-                plotOptions: {
+                    rules: [{
-                    area: {
+                        condition: {
-                        color: '#FBC5C5',
+                            maxWidth: 500
-                        fillColor: '#FBC5C5',
+                        },
-                        stacking: 'normal',
+                        chartOptions: {
-                        lineColor: '#F89F9F',
+                            legend: {   
-                        lineWidth: 0,
+                                layout: 'horizontal',
-                        marker: {
+                                align: 'center',
-                            radius: 5,
+                                verticalAlign: 'bottom'
-                            lineWidth: 2,
-                            lineColor: '#FFF',
-                            fillColor: '#F89F9F'
-                        }
-                    },
-                    line: {
-                        pointInterval: numerodatos,
-                        lineColor: '#999999',
-                        marker: {
-                            enabled: false,
-                            symbol: 'circle',
-                            radius: 2,
-                            states: {
-                                hover: {
-                                    enabled: true
-                                }
                             }
                         }
-                    }
+                    }]
                 },
-                series: dataset,
+                credits: {
-                navigation: {
+                    enabled: false
-                    buttonOptions: {
-                        y: -80
-                    }
                 }
+
             });
+
+
+            //    $("#" + idcontainer).data('serie', datos);
+
+            //    var margintop = 80;
+            //    var dataset = [{
+            //        type: 'area',
+            //        lineColor: '#9ACAE6',
+            //        color: '#F1F7FD',
+            //        fillColor: '#F1F7FD',
+            //        lineWidth: 3,
+            //        marker: {
+            //            lineWidth: 2,
+            //            lineColor: '#9ACAE6',
+            //            fillColor: '#9ACAE6'
+            //        },
+            //        pointInterval: 1,
+            //        name: ' ',
+            //        data: datos
+            //    }, {
+            //        type: 'line',
+            //        lineWidth: 2,
+            //        lineColor: '#999',
+            //        marker: {
+            //            enabled: false
+            //        },
+            //        name: '  ',
+            //        data: [media, media]
+            //    }];
+
+            //    $('#' + idcontainer).highcharts({
+            //        chart: {
+            //            type: 'area', spacingTop: margintop
+            //        },
+            //        title: {
+            //            text: titulo
+            //        },
+            //        subtitle: {
+            //            text: subtitulo
+            //        },
+            //        xAxis: {
+            //            type: "category"
+
+            //        },
+            //        yAxis: {
+            //            title: {
+            //                text: ytitulo
+            //            },
+            //            labels: {
+            //                formatter: function () {
+            //                    return this.value / Yinterval;
+            //                }
+            //            }
+            //        },
+            //        tooltip: {
+            //            shared: true,
+            //            valueSuffix: labelpoint
+            //        },
+            //        plotOptions: {
+            //            area: {
+            //                color: '#FBC5C5',
+            //                fillColor: '#FBC5C5',
+            //                stacking: 'normal',
+            //                lineColor: '#F89F9F',
+            //                lineWidth: 0,
+            //                marker: {
+            //                    radius: 5,
+            //                    lineWidth: 2,
+            //                    lineColor: '#FFF',
+            //                    fillColor: '#F89F9F'
+            //                }
+            //            },
+            //            line: {
+            //                pointInterval: numerodatos,
+            //                lineColor: '#999999',
+            //                marker: {
+            //                    enabled: false,
+            //                    symbol: 'circle',
+            //                    radius: 2,
+            //                    states: {
+            //                        hover: {
+            //                            enabled: true
+            //                        }
+            //                    }
+            //                }
+            //            }
+            //        },
+            //        series: dataset,
+            //        navigation: {
+            //            buttonOptions: {
+            //                y: -80
+            //            }
+            //        }
+            //    });
+            //}
         }
+
     </script>
 
 </asp:Content>

Finanzas/RepRazonesFinancieras2.aspx.vb

@@ -5,6 +5,7 @@ Imports System.Data
 Imports System.Drawing
 Imports System.IO
 Imports System.Windows.Forms
+Imports DocumentFormat.OpenXml.EMMA
 Imports Extensiones
 Imports GemBox.Spreadsheet
 Imports Microsoft.Reporting.WebForms
@@ -452,13 +453,16 @@ Partial Class Finanzas_RepRazonesFinancieras2
 
             Dim Titulo As String = e.Row.FCLabel("LblRatio").Text
             Dim SubTitulo As String = ""
-            Dim YReferencia As String = "$"
+            Dim YReferencia As String = "Valor"
             Dim Info As String = ""
-            Dim XReferencia As String = ""
+            Dim XReferencia As String = "Periodos"
             Dim Promedio As String = ""
 
-            Dim lista As New List(Of Object)
+            'Dim lista As New List(Of Object)
-            Dim Lista2 As New List(Of String)
+            'Dim Lista2 As New List(Of String)
+            Dim ListaDatos As New List(Of String)
+            Dim ListaCategorias As New List(Of String)
+
             For x = 2 To GVRatios.Columns.Count - 1
 
                 If GVRatios.Columns(x).Visible = True Then
@@ -469,8 +473,8 @@ Partial Class Finanzas_RepRazonesFinancieras2
                         Dim valor As String = e.Row.Cells(x).Text.ToString.Replace("%", "").Replace(" ", "").Replace(" ", "").Replace(",", "").Trim
 
                         If valor.Length > 0 Then
-                            lista.Add(New With {.Texto = headerString, .Valor = valor.ToDecimal, .Color = "#FF0F00"})
+                            ListaDatos.Add(valor.ToDecimal.ToString("###########0.00"))
-                            Lista2.Add($"['{headerString}',{valor}]")
+                            ListaCategorias.Add($"""{headerString}""")
                         End If
 
                     End If
@@ -481,11 +485,18 @@ Partial Class Finanzas_RepRazonesFinancieras2
             'e.Row.FCHyperLink("Hypgrafica").Attributes.Add("data-values", Newtonsoft.Json.JsonConvert.SerializeObject(lista))
 
             If e.Row.DataKey("Tipo").ToEntero <> 1 Then
-                Info = String.Join(",", Lista2)
+
                 e.Row.FCHyperLink("hpl2").Attributes.Add("onclick", "$('#DivModalGrafica').modal('show');  " &
-                     String.Format("graficahighchartsFinan('{0}','{1}','{2}','{3}',[{4}],1,'{5}','{6}',[{8}],[{7}],'{9}');", chartdiv2.ClientID, "", SubTitulo, YReferencia, Info, XReferencia, Promedio, "", "", Titulo))
+                     String.Format("graficahighchartsFinan('{0}','{1}','{2}','{3}',[{4}],'{5}','{5}','{6}',[{8}],[{7}],'{9}');", chartdiv2.ClientID, Titulo, SubTitulo, YReferencia, Info, XReferencia, Promedio, "", "", e.Row.FCCheckBox("chkgraf").ClientID))
+
+                e.Row.FCCheckBox("chkgraf").InputAttributes.Add("class", "chksel")
+                e.Row.FCCheckBox("chkgraf").InputAttributes.Add("data-name", e.Row.FCLabel("LblRatio").Text)
+                e.Row.FCCheckBox("chkgraf").InputAttributes.Add("data-data", $"[{String.Join(",", ListaDatos)}]")
+                e.Row.FCCheckBox("chkgraf").InputAttributes.Add("data-categorias", $"[{String.Join(",", ListaCategorias)}]")
+
             Else
                 e.Row.FCHyperLink("hpl2").Visible = False
+                e.Row.FCCheckBox("chkgraf").Visible = False
             End If
 
 
@@ -493,6 +504,11 @@ Partial Class Finanzas_RepRazonesFinancieras2
 
 
         End If
+        If e.Row.RowType = DataControlRowType.Header Then
+
+            e.Row.FCHyperLink("hpl2").Attributes.Add("onclick", "$('#DivModalGrafica').modal('show');  " &
+                     String.Format("graficahighchartsFinan('{0}','{1}','{2}','{3}',[{4}],'{5}','{5}','{6}',[{8}],[{7}],'{9}' );", chartdiv2.ClientID, "Selección multiple", "", "Valores", "", "Periodos", "", "", "", ""))
+        End If
 
     End Sub
 

Sistemas/DefinicionEmpresa.aspx

@@ -1,4 +1,4 @@
-<%@ Page Title="" Language="VB" MasterPageFile="~/Site.master" AutoEventWireup="false" CodeFile="Empresa2.aspx.vb" Inherits="Sistemas_Empresa2" %>
+<%@ Page Title="" Language="VB" MasterPageFile="~/Site.master" AutoEventWireup="false" CodeFile="DefinicionEmpresa.aspx.vb" Inherits="Sistemas_DefinicionEmpresa" %>
 
 <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
 <asp:Content ID="Content1" ContentPlaceHolderID="H" runat="Server">

Sistemas/DefinicionEmpresa.aspx.vb

@@ -9,7 +9,7 @@ Imports Microsoft.Reporting.WebForms
 Imports Microsoft.Owin.Security.Provider
 Imports log4net.Util
 
-Partial Class Sistemas_Empresa2
+Partial Class Sistemas_DefinicionEmpresa
     Inherits ClsPaginas
 
 #Region " PROPIEDADES "