From 766c6db174d022ace1ab2e54b465f622f492c6f7 Mon Sep 17 00:00:00 2001
From: JORGE LUIS CAUDILLO ESPARZA <caudillo_90@hotmail.com>
Date: Thu, 3 Sep 2020 22:22:16 -0700
Subject: [PATCH]

---
 Contabilidad2/RepAnexoCatalogoAnual.aspx   | 183 ++++++++++++++++++---
 Contabilidad2/RepAnexoCatalogoCC.aspx      | 141 +++++++++++++++-
 Contabilidad2/RepAnexoCatalogoMensual.aspx | 140 +++++++++++++++-
 3 files changed, 425 insertions(+), 39 deletions(-)

diff --git a/Contabilidad2/RepAnexoCatalogoAnual.aspx b/Contabilidad2/RepAnexoCatalogoAnual.aspx
index bb0921343..4e64fa231 100644
--- a/Contabilidad2/RepAnexoCatalogoAnual.aspx
+++ b/Contabilidad2/RepAnexoCatalogoAnual.aspx
@@ -104,22 +104,28 @@
 
     <asp:UpdatePanel ID="UpAnual" UpdateMode="Conditional" runat="server">
         <ContentTemplate>
-            <asp:GridView ID="GvAnual" runat="server" AutoGenerateColumns="False" ShowHeader="true" EmptyDataText="No se encontraron datos" GridLines="none" 
-                        CssClass="ADSCROLLER2  table table-striped table-advance table-hover"  data-cols="2" data-heightmenos="300">
+            <asp:GridView ID="GvAnual" runat="server" AutoGenerateColumns="False" ShowHeader="true" EmptyDataText="No se encontraron datos" GridLines="none"
+                CssClass="ADSCROLLER2  table table-striped table-advance table-hover" data-cols="2" data-heightmenos="300">
                 <Columns>
                     <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>
+                        </HeaderTemplate>
                         <ItemTemplate>
-                            <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>
+                            <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:CheckBox ID="chkgraf" CssClass="chkgraf" runat="server" />
+                            </div>
+                        </ItemTemplate>
+                    </asp:TemplateField>
+                    <asp:TemplateField ItemStyle-HorizontalAlign="Left" ItemStyle-Width="250px" ControlStyle-Width="250px">
+                        <HeaderTemplate>
+                            <div style="width: 200px;">Nombre</div>
+                        </HeaderTemplate>
+                        <ItemTemplate>
+                            <asp:Label runat="server" Text='<%# Eval("Nombre")%>'></asp:Label>
                         </ItemTemplate>
                     </asp:TemplateField>
-                                <asp:TemplateField ItemStyle-HorizontalAlign="Left" ItemStyle-Width="250px" ControlStyle-Width="250px">
-                                    <HeaderTemplate>
-                                        <div style="width: 200px;">Nombre</div>
-                                    </HeaderTemplate>
-                                    <ItemTemplate>
-                                        <asp:Label runat="server" Text='<%# Eval("Nombre")%>'></asp:Label>
-                                    </ItemTemplate>
-                                </asp:TemplateField>
                     <asp:BoundField DataFormatString="{0:N2}" ItemStyle-HorizontalAlign="Right" ItemStyle-CssClass="ceros" ItemStyle-Width="100px" />
                     <asp:BoundField DataFormatString="{0:N2}" ItemStyle-HorizontalAlign="Right" ItemStyle-CssClass="ceros" ItemStyle-Width="75px" />
                     <asp:BoundField DataFormatString="{0:N2}%" ItemStyle-HorizontalAlign="Right" ItemStyle-CssClass="ceros" ItemStyle-Width="50px" />
@@ -221,7 +227,7 @@
         </ContentTemplate>
     </asp:UpdatePanel>
 
-    
+
     <div id="DivModalGrafica" class="modal ADS fade" role="dialog">
         <asp:UpdatePanel class="modal-dialog modal-lg" runat="server" ID="UPModalProd" UpdateMode="Conditional">
             <ContentTemplate>
@@ -256,7 +262,7 @@
 
 </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/serial.js"></script>
     <script src="https://www.amcharts.com/lib/3/pie.js"></script>
@@ -267,15 +273,15 @@
     <script> 
         let cdatos;
         let currentid = 1;
-        function HandlerGraf(obj, evt) { 
+        function HandlerGraf(obj, evt) {
             $("#DivModalGrafica").modal();
             cdatos = $(obj).data('values');
             if (currentid == 1) {
-            CargaGraficaBarras();
+                CargaGraficaBarras();
             } else {
-            CargaGraficaPastel();
+                CargaGraficaPastel();
             }
-            $('.LblTituloGrafica').text($(obj).parent().parent().text()); 
+            $('.LblTituloGrafica').text($(obj).parent().parent().text());
         }
         function CargaGraficaBarras() {
             let data = cdatos;
@@ -333,17 +339,140 @@
             });
         }
         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')
+            $('.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() {
diff --git a/Contabilidad2/RepAnexoCatalogoCC.aspx b/Contabilidad2/RepAnexoCatalogoCC.aspx
index b31a79e72..3f633936e 100644
--- a/Contabilidad2/RepAnexoCatalogoCC.aspx
+++ b/Contabilidad2/RepAnexoCatalogoCC.aspx
@@ -100,14 +100,20 @@
     <asp:UpdatePanel ID="UpCC" UpdateMode="Conditional" runat="server">
         <ContentTemplate>
 
-            <div  >
-                <div   style="background-color:#fff;">
-                    <asp:GridView ID="GvCC" runat="server" AutoGenerateColumns="False" ShowHeader="true" EmptyDataText="No se encontraron datos" GridLines="none" 
-                        CssClass="ADSCROLLER2  table table-striped table-advance table-hover"  data-cols="2" data-heightmenos="300">
+            <div>
+                <div style="background-color: #fff;">
+                    <asp:GridView ID="GvCC" runat="server" AutoGenerateColumns="False" ShowHeader="true" EmptyDataText="No se encontraron datos" GridLines="none"
+                        CssClass="ADSCROLLER2  table table-striped table-advance table-hover" data-cols="2" data-heightmenos="300">
                         <Columns>
                             <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>
+                                </HeaderTemplate>
                                 <ItemTemplate>
-                                    <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>
+                                    <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:CheckBox ID="chkgraf" CssClass="chkgraf" runat="server" />
+                                    </div>
                                 </ItemTemplate>
                             </asp:TemplateField>
                             <asp:TemplateField ItemStyle-HorizontalAlign="Left" ItemStyle-Width="250px" ControlStyle-Width="250px">
@@ -383,8 +389,131 @@
                     CargaGraficaPastel();
                 }
             });
-            $('.DdlGrafica').removeClass('DdlGrafica')
+            $('.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(Divisor) {
diff --git a/Contabilidad2/RepAnexoCatalogoMensual.aspx b/Contabilidad2/RepAnexoCatalogoMensual.aspx
index f658f52b0..9ac72ebfc 100644
--- a/Contabilidad2/RepAnexoCatalogoMensual.aspx
+++ b/Contabilidad2/RepAnexoCatalogoMensual.aspx
@@ -106,13 +106,19 @@
         <ContentTemplate>
             <div class="row">
                 <div class="col-md-12">
-                    <div style="background-color:#fff;">
-                        <asp:GridView ID="GvMensual2" runat="server" AutoGenerateColumns="False" ShowHeader="true" EmptyDataText="No se encontraron datos" GridLines="none" 
-                            CssClass="ADSCROLLER2  table table-striped table-advance table-hover"  data-cols="2" data-heightmenos="300">
+                    <div style="background-color: #fff;">
+                        <asp:GridView ID="GvMensual2" runat="server" AutoGenerateColumns="False" ShowHeader="true" EmptyDataText="No se encontraron datos" GridLines="none"
+                            CssClass="ADSCROLLER2  table table-striped table-advance table-hover" data-cols="2" data-heightmenos="300">
                             <Columns>
                                 <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>
+                                    </HeaderTemplate>
                                     <ItemTemplate>
-                                        <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>
+                                        <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:CheckBox ID="chkgraf" CssClass="chkgraf" runat="server" />
+                                        </div>
                                     </ItemTemplate>
                                 </asp:TemplateField>
                                 <asp:TemplateField ItemStyle-HorizontalAlign="Left" ItemStyle-Width="250px" ControlStyle-Width="250px">
@@ -221,7 +227,7 @@
             } else {
                 CargaGraficaPastel();
             }
-            $('.LblTituloGrafica').text($(obj).parent().parent().text());
+            $('.LblTituloGrafica').text($(obj).parent().parent().text().trim());
         }
         function CargaGraficaBarras() {
             let data = cdatos;
@@ -259,7 +265,6 @@
                 }
             });
         }
-
         function CargaGraficaPastel() {
             let data = cdatos;
             var chart = AmCharts.makeChart("chartdiv", {
@@ -289,7 +294,130 @@
                 }
             });
             $('.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() {