E172 Rep Indicador: Se cambió de motor de gráficos de AmCharts a Highcharts
- Highcharts es más estable que AmCharts aparentemente el cual tuvo problemas al mostrar varios tipos de graficas simultaneamente - Se refactorizó el código para reducir las líneas de código innecesarias
This commit is contained in:
MLopez
@@ -96,12 +96,12 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<%--<div class="row">
|
||||
<div class="col-md-6"></div>
|
||||
<div class="col-md-6 amChartsAttribution">
|
||||
<a href="http://www.amcharts.com/" class="amChartsLegend" id="amChartsAttribution">JS charts by amCharts</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>--%>
|
||||
<asp:UpdatePanel ID="UPPMov" runat="server" RenderMode="Inline" UpdateMode="Conditional">
|
||||
<ContentTemplate>
|
||||
<div class="row">
|
||||
@@ -333,7 +333,7 @@
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<asp:UpdatePanel ID="UPTablaCxP" runat="server" class="portlet light xspadding bordered " align="left" style="" UpdateMode="Conditional">
|
||||
<asp:UpdatePanel ID="UPTablaCPxP" runat="server" class="portlet light xspadding bordered " align="left" style="" UpdateMode="Conditional">
|
||||
<ContentTemplate>
|
||||
<div class="portlet-title">
|
||||
<div class="caption font-green">
|
||||
@@ -349,7 +349,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="portlet-body formnombottom">
|
||||
<asp:GridView ID="GvCxP" runat="server" GridLines="None"
|
||||
<asp:GridView ID="GvCPxP" runat="server" GridLines="None"
|
||||
CssClass="table table-striped table-advance table-hover ScrollAD Widthall " ShowHeader="True" EmptyDataText="No se encontraron resultados." ShowHeaderWhenEmpty="true"
|
||||
AutoGenerateColumns="False" AllowPaging="False" ShowFooter="False">
|
||||
<Columns>
|
||||
@@ -398,115 +398,113 @@
|
||||
|
||||
</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/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 src="https://www.amcharts.com/lib/3/themes/light.js"></script>--%>
|
||||
<%--<script src="https://code.highcharts.com/modules/data.js"></script>--%>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
function CargaGraficasPastel(json) {
|
||||
|
||||
// Configuración genérica para todas las gráficas
|
||||
const chartconfig = {
|
||||
"hideCredits": true,
|
||||
"type": "pie",
|
||||
"theme": "light",
|
||||
"dataProvider": [], // se sobrescribe con la sección indicada del JSON en makeChart
|
||||
"valueField": "Valor",
|
||||
"titleField": "Texto",
|
||||
//"legend": {
|
||||
// "valueLabels": {
|
||||
// "text": "{value.value}"
|
||||
// }
|
||||
//},
|
||||
"outlineAlpha": 0.4,
|
||||
"depth3D": 0,
|
||||
"balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]% [[Moneda]])</span>",
|
||||
"angle": 0,
|
||||
"export": {
|
||||
"enabled": true
|
||||
}
|
||||
Highcharts.setOptions({
|
||||
lang: {
|
||||
thousandsSep: ',',
|
||||
decimalPoint: '.'
|
||||
}
|
||||
});
|
||||
|
||||
// document.querySelectorAll('div[id^=chartdiv]').forEach((chartdiv) => {
|
||||
// AmCharts.makeChart(chartdiv, chartconfig);
|
||||
// });
|
||||
|
||||
//AmCharts.makeChart("chartdiv_vxp", { ...chartconfig, type: "serial", dataProvider: json["VxP"] }); // Ventas x Producto
|
||||
AmCharts.makeChart("chartdiv_cxp", { ...chartconfig, dataProvider: json["CxP"] }); // Compras x Producto TipoProveedor 1
|
||||
AmCharts.makeChart("chartdiv_cxp192", { ...chartconfig, dataProvider: json["CxP192"] }); // Compras x Producto ProveedorClasificacion 192
|
||||
AmCharts.makeChart("chartdiv_ccxc", { ...chartconfig, dataProvider: json["CCxC"] }); // Cuentas por Cobrar x Cliente
|
||||
AmCharts.makeChart("chartdiv_cpxp", { ...chartconfig, dataProvider: json["CPxP"] }); // Cuentas por Pagar x Proveedor
|
||||
// AmCharts.makeChart("chartdiv_indicadores", { ...chartconfig, dataProvider: json["Indicadores"] }); // Indicadores por Proveedor Productor
|
||||
|
||||
document.getElementById('amChartsAttribution').style.visibility = 'visible';
|
||||
}
|
||||
|
||||
function CargaGraficasBarras(json) {
|
||||
|
||||
var chart = AmCharts.makeChart("chartdiv_vxp", {
|
||||
"hideCredits": true,
|
||||
"type": "serial",
|
||||
"theme": "light",
|
||||
"dataProvider": json["VxP"],
|
||||
"startDuration": 2,
|
||||
"valueAxes": [{
|
||||
"position": "left",
|
||||
"title": "Ventas"
|
||||
}],
|
||||
"graphs": [{
|
||||
"balloonText": "[[category]]: <b>[[value]]</b> [[Moneda]]",
|
||||
"colorField": "Color",
|
||||
"fillAlphas": 1,
|
||||
"lineAlpha": 0.1,
|
||||
"type": "column",
|
||||
"valueField": "Valor"
|
||||
}],
|
||||
"depth3D": 20,
|
||||
"angle": 30,
|
||||
"chartCursor": {
|
||||
"categoryBalloonEnabled": false,
|
||||
"cursorAlpha": 0,
|
||||
"zoomable": false
|
||||
const chartconfig = {
|
||||
chart: {
|
||||
animation: {
|
||||
duration: 500
|
||||
},
|
||||
marginRight: 50
|
||||
},
|
||||
"categoryField": "Texto",
|
||||
"categoryAxis": {
|
||||
"labelsEnabled": false,
|
||||
"forceShowField": false,
|
||||
//"labelFunction": trimLabel
|
||||
//"gridPosition": "start"
|
||||
//"labelRotation": 90
|
||||
title: {
|
||||
text: undefined,
|
||||
align: 'left'
|
||||
},
|
||||
"export": {
|
||||
"enabled": true
|
||||
}
|
||||
});
|
||||
|
||||
var legend = new AmCharts.AmLegend();
|
||||
legend.fontSize = 9;
|
||||
legend.labelWidth = 50;
|
||||
legend.enabled = false;
|
||||
|
||||
chart.addLegend(legend);
|
||||
|
||||
chart.addListener('dataUpdated', function (e) {
|
||||
var legendDataItems; //used to store the legend's custom data array.
|
||||
|
||||
legendDataItems = e.chart.dataProvider.map(function (dataElement) {
|
||||
return {
|
||||
'title': dataElement.Texto.length >= 7 ? dataElement.Texto.substr(0, 6) : dataElement.Texto,
|
||||
'color': dataElement.Color
|
||||
legend: {
|
||||
enabled: false
|
||||
},
|
||||
xAxis: {
|
||||
type: "category"
|
||||
},
|
||||
yAxis: {
|
||||
opposite: true,
|
||||
tickPixelInterval: 150,
|
||||
title: {
|
||||
text: null
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
formatter: function (tooltip) {
|
||||
var tooltiptext = tooltip.defaultFormatter.call(this, tooltip);
|
||||
tooltiptext = tooltiptext.replace("<b>", "<b>$");
|
||||
tooltiptext = tooltiptext.replace("</b>", " " + this.point.currency + "</b>");
|
||||
console.log(tooltiptext)
|
||||
return tooltiptext
|
||||
},
|
||||
//footerFormat: '{point.key}'
|
||||
},
|
||||
plotOptions: {
|
||||
series: {
|
||||
animation: false,
|
||||
groupPadding: 0,
|
||||
pointPadding: 0.1,
|
||||
borderWidth: 0,
|
||||
colorByPoint: true,
|
||||
dataSorting: {
|
||||
enabled: false,
|
||||
matchByName: true
|
||||
},
|
||||
type: "bar",
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
// format: '${y}'
|
||||
formatter: function () {
|
||||
var defaultlabel = Highcharts.getOptions().plotOptions[this.point.series.type].dataLabels.formatter.call(this);
|
||||
var isNumber = /^(\d|-)?(\d|,)*\.?\d*$/.test(defaultlabel);
|
||||
return isNumber ? "$" + defaultlabel : defaultlabel;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'bar',
|
||||
keys: ['name', 'y', 'color', 'currency'],
|
||||
data: undefined
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
// update the legend custom data and redraw the chart
|
||||
e.chart.legend.data = legendDataItems;
|
||||
e.chart.legend.enabled = true;
|
||||
e.chart.validateNow();
|
||||
});
|
||||
//AmCharts.makeChart("chartdiv_vxp", { ...chartconfig, type: "serial", dataProvider: json["VxP"] }); // Ventas x Producto
|
||||
|
||||
$('#' + "chartdiv_vxp").highcharts({ ...chartconfig, series: [{ ...chartconfig.series[0], data: customAccessor(json["VxP"]) }] })
|
||||
$('#' + "chartdiv_cxp").highcharts({ ...chartconfig, series: [{ ...chartconfig.series[0], data: customAccessor(json["CxP"]) }] })
|
||||
$('#' + "chartdiv_cxp192").highcharts({ ...chartconfig, series: [{ ...chartconfig.series[0], type: 'pie', data: customAccessor(json["CxP192"]) }] })
|
||||
$('#' + "chartdiv_ccxc").highcharts({ ...chartconfig, series: [{ ...chartconfig.series[0], data: customAccessor(json["CCxC"]) }] })
|
||||
$('#' + "chartdiv_cpxp").highcharts({ ...chartconfig, series: [{ ...chartconfig.series[0], data: customAccessor(json["CPxP"]) }] })
|
||||
|
||||
|
||||
//AmCharts.makeChart("chartdiv_cxp192", { ...chartconfig, dataProvider: json["CxP192"] }); // Compras x Producto ProveedorClasificacion 192
|
||||
//AmCharts.makeChart("chartdiv_ccxc", { ...chartconfig, dataProvider: json["CCxC"] }); // Cuentas por Cobrar x Cliente
|
||||
//AmCharts.makeChart("chartdiv_cpxp", { ...chartconfig, dataProvider: json["CPxP"] }); // Cuentas por Pagar x Proveedor
|
||||
//AmCharts.makeChart("chartdiv_indicadores", { ...chartconfig, dataProvider: json["Indicadores"] }); // Indicadores por Proveedor Productor
|
||||
|
||||
function customAccessor(data) {
|
||||
const newData = [];
|
||||
data.forEach(function (point, index) {
|
||||
newData.push([point.Texto, point.Valor, point.Color, point.Moneda]);
|
||||
});
|
||||
return newData;
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user