Grafico Rep Anexo Catalogo
This commit is contained in:
rakcsle
@@ -7,7 +7,7 @@
|
||||
<style>
|
||||
#chartdiv {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
height: 700px;
|
||||
}
|
||||
|
||||
.fa.fa-bar-chart {
|
||||
@@ -62,8 +62,8 @@
|
||||
<div class="col-md-1 truncate">
|
||||
Cuenta:
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<asp:DropDownList ID="DdlCuentas" runat="server" AppendDataBoundItems="true" DataTextField="CtaCodigo" DataValueField="CveCuenta" CssClass="form-control input-sm select2me" Enabled="true" Width="350px">
|
||||
<div class="col-md-2">
|
||||
<asp:DropDownList ID="DdlCuentas" runat="server" AppendDataBoundItems="true" DataTextField="CtaCodigo" DataValueField="CveCuenta" CssClass="form-control input-sm select2me" Enabled="true" >
|
||||
<asp:ListItem Selected="True" Text="Seleccione" Value="-1"></asp:ListItem>
|
||||
</asp:DropDownList>
|
||||
<asp:RequiredFieldValidator ID="RFVDdlCuentas" runat="server" InitialValue="-1" ControlToValidate="DdlCuentas" Display="None" ErrorMessage="<b><span style='text-decoration: underline'>ERROR:</span></b><br />El campo <b>''Cuenta''</b> es necesario, por favor ingréselo." ValidationGroup="GrpConsulta"></asp:RequiredFieldValidator>
|
||||
@@ -250,14 +250,30 @@
|
||||
<div class="col-md-2"></div>
|
||||
<label class="col-md-1 truncate">Grafica:</label>
|
||||
<div class="col-md-2">
|
||||
<asp:DropDownList ID="DdlGrafica" runat="server" AppendDataBoundItems="true" Class="DdlGrafica select2me">
|
||||
<asp:ListItem Selected="True" Text="Barras" Value="1"></asp:ListItem>
|
||||
<asp:ListItem Text="Pastel" Value="2"></asp:ListItem>
|
||||
</asp:DropDownList>
|
||||
|
||||
|
||||
<select id="DdlGrafica" class="DdlGrafica select2me" >
|
||||
<option value="column">Barras</option>
|
||||
<option value="line">Lineas</option>
|
||||
<option value="pie">Pastel</option>
|
||||
</select>
|
||||
|
||||
<%-- <asp:UpdatePanel runat="server">
|
||||
<ContentTemplate>
|
||||
<asp:DropDownList ID="DdlGrafica" runat="server" ClientIDMode="Static" AppendDataBoundItems="true" Class="DdlGrafica select2me" AutoPostBack="true" OnSelectedIndexChanged="DdlGrafica_SelectedIndexChanged">
|
||||
<asp:ListItem Selected="True" Text="Barras" Value="line"></asp:ListItem>
|
||||
<asp:ListItem Text="Pastel" Value="pie"></asp:ListItem>
|
||||
<asp:ListItem Text="Lineas" Value="column"></asp:ListItem>
|
||||
</asp:DropDownList>
|
||||
</ContentTemplate>
|
||||
</asp:UpdatePanel>--%>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<div id="chartdiv"></div>
|
||||
<div id="chartdiv" runat="server">
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
|
||||
@@ -269,7 +285,140 @@
|
||||
</asp:Content>
|
||||
<asp:Content ID="Content8" ContentPlaceHolderID="JS" runat="Server">
|
||||
|
||||
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
|
||||
<script>
|
||||
|
||||
$(document).ready(function () {
|
||||
$('#DdlGrafica').change(function () {
|
||||
recargaGrafica();
|
||||
});
|
||||
});
|
||||
|
||||
var hplControl = "";
|
||||
|
||||
function recargaGrafica() {
|
||||
$(`#${hplControl}`).click();
|
||||
}
|
||||
|
||||
function graficahighchartsFinan(idcontainer, titulo, subtitulo, ytitulo, datos, Yinterval, labelpoint, media, datospie1, datospie2, Tittulo2, ControlID) {
|
||||
|
||||
hplControl = ControlID;
|
||||
let tipoGrafico = $(`#DdlGrafica`).val();
|
||||
|
||||
$('#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) {
|
||||
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]
|
||||
}];
|
||||
|
||||
$('#' + 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>
|
||||
|
||||
|
||||
<%-- <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>
|
||||
@@ -531,7 +680,7 @@
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</script>--%>
|
||||
|
||||
</asp:Content>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user