This commit is contained in:
JORGE LUIS CAUDILLO ESPARZA
2020-09-03 22:22:16 -07:00
parent d9307c4f3e
commit 766c6db174
3 changed files with 425 additions and 39 deletions

View File

@@ -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() {

View File

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

View File

@@ -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() {