Graficos razones financieras Rep anexo catalogo
This commit is contained in:
rakcsle
@@ -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:CheckBox ID="chkgraf" CssClass="chkgraf" runat="server" />
|
||||
<%--<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: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>
|
||||
<%--<div id="chartdiv" runat="server">
|
||||
</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);
|
||||
if (datos.length > 0) {
|
||||
var numerodatos = datos.length - 1;
|
||||
//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");
|
||||
}
|
||||
}
|
||||
$("#" + idcontainer).data('serie', datos);
|
||||
|
||||
var margintop = 80;
|
||||
var dataset = [{
|
||||
type: tipoGrafico,
|
||||
lineColor: '#9ACAE6',
|
||||
color: '#2caffe',
|
||||
fillColor: '#2caffe',
|
||||
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]
|
||||
}];
|
||||
let datosSeries = [];
|
||||
let datosCategorias = [];
|
||||
let datosRaw = [];
|
||||
|
||||
|
||||
$('#' + idcontainer).highcharts({
|
||||
chart: {
|
||||
type: 'area', spacingTop: margintop
|
||||
},
|
||||
title: {
|
||||
text: titulo
|
||||
},
|
||||
subtitle: {
|
||||
text: subtitulo
|
||||
},
|
||||
xAxis: {
|
||||
type: "category"
|
||||
if (idChkSeleccionado.trim().length > 0) {
|
||||
|
||||
},
|
||||
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
|
||||
}
|
||||
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);
|
||||
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
console.log("serieDato:", datosSeries);
|
||||
console.log("datosCategorias:", datosCategorias);
|
||||
|
||||
if(esPie){
|
||||
let datosPie = [];
|
||||
|
||||
for (let i = 0; i < datosCategorias.length; i++) {
|
||||
|
||||
let objpie = {
|
||||
name: datosCategorias[i],
|
||||
y:datosRaw[i]
|
||||
}
|
||||
datosPie.push(objpie);
|
||||
}
|
||||
},
|
||||
series: dataset,
|
||||
navigation: {
|
||||
buttonOptions: {
|
||||
y: -80
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
datosSeries = [{
|
||||
name: 'Importe',
|
||||
colorByPoint : true,
|
||||
data : datosPie
|
||||
}]
|
||||
|
||||
|
||||
}
|
||||
|
||||
Highcharts.chart(idcontainer, {
|
||||
|
||||
chart: {
|
||||
type: tipoGrafico
|
||||
},
|
||||
|
||||
title: {
|
||||
text: titulo,
|
||||
align: 'left'
|
||||
},
|
||||
|
||||
subtitle: {
|
||||
text: subtitulo,
|
||||
align: 'left'
|
||||
},
|
||||
|
||||
yAxis: {
|
||||
title: {
|
||||
text: ytitulo
|
||||
}
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
categories: datosCategorias,
|
||||
title: {
|
||||
text: xtitulo
|
||||
}
|
||||
},
|
||||
|
||||
legend: {
|
||||
layout: 'vertical',
|
||||
align: 'right',
|
||||
verticalAlign: 'middle'
|
||||
},
|
||||
|
||||
plotOptions: {
|
||||
series: {
|
||||
label: {
|
||||
connectorAllowed: false
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
series: datosSeries ,
|
||||
|
||||
responsive: {
|
||||
rules: [{
|
||||
condition: {
|
||||
maxWidth: 500
|
||||
},
|
||||
chartOptions: {
|
||||
legend: {
|
||||
layout: 'horizontal',
|
||||
align: 'center',
|
||||
verticalAlign: 'bottom'
|
||||
}
|
||||
}
|
||||
}]
|
||||
},
|
||||
credits: {
|
||||
enabled: false
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user