Matriz no en el formato correcto en Javascript para su uso por HighChart
-
25-10-2019 - |
Pregunta
Hola, estoy pasando un objeto de la Lista de mi controlador de Javascript donde se vuelve a colocar en una matriz y se utiliza como fuente de datos para HighChart gráfico de barras.
En mi siguiente código si un comentario nuevo en el raw de datos FUNCIONA.Si yo uso mi matriz variable llamada 'resultado' me sale nada
Si me paso en Javascript con el depurador y el resultado de salida inmediata de la ventana se ve como:
?resultado[0] {...} [0]:"2" [1]:{...}
?resultado[0][1] {...} [0]:0 [1]:0 [2]:0 [3]:0 [4]:0 [5]:0 [6]:1 [7]:0 [8]:0 [9]:0 [10]:0 [11]:0
AQUÍ ESTÁ EL CÓDIGO :
function CreateChart3(surl) {
// Code block for fetching Array as jsonResult (js)
var url = $("#AbsolutePath").val() + "Complaint.mvc/GetChartData_MonthlyByType/" + surl;
var chart;
$.getJSON(url, null, function(data) {
var result = [];
jQuery.each(data, function(i, val) {
result[i] = [val.Type, val.Count];
});
// var seriesData = [];
// for (var i = 0; i < result.length; i++) {
// seriesData.push({ data: result[i][1] ,name: result[i][0]});
// }
debugger;
chart = new Highcharts.Chart({
chart: {
renderTo: 'chart3',
defaultSeriesType: 'column',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Stacked Bar Monthly By Type'
},
yAxis: {
min: 0,
title: {
text: 'Total No Of Complaints'
},
xAxis: {
categories: ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],
title: 'Month'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function() {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
// series:
// [{
// name: "2",
// data: [0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0]
// }, {
// name: "3",
// data: [1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 3, 0]
// }]
series: [{
data: result
}]
});
});
};
EXTRACTO DE CÓDIGO DE CONTROLADOR DE SI AYUDA......
var qry = from i in _db.Complaints
where i.Site.SiteDescription.Contains(searchTextSite)
&& (i.Raised >= startDate && i.Raised <= endDate)
group i by i.ComplaintNatureTypeId.ToString()
into grp
select new
{
Type = grp.Key,
Count = new int[] {
grp.Where(c => c.Raised.Month == 1).Count(),
grp.Where(c => c.Raised.Month == 2).Count(),
grp.Where(c => c.Raised.Month == 3).Count(),
grp.Where(c => c.Raised.Month == 4).Count(),
grp.Where(c => c.Raised.Month == 5).Count(),
grp.Where(c => c.Raised.Month == 6).Count(),
grp.Where(c => c.Raised.Month == 7).Count(),
grp.Where(c => c.Raised.Month == 8).Count(),
grp.Where(c => c.Raised.Month == 9).Count() ,
grp.Where(c => c.Raised.Month == 10).Count() ,
grp.Where(c => c.Raised.Month == 11).Count(),
grp.Where(c => c.Raised.Month == 12).Count() }
};
return Json(qry.ToArray(), JsonRequestBehavior.AllowGet);
Solución
Como recuerdo data
propiedad de series
es la matriz de
- los valores de y
- par de x-y, y los valores
- los objetos de punto
Como yo lo entiendo, cada elemento de la matriz es la matriz donde el elemento[0] es name
y el elemento[1] es la matriz de valores.Así que usted tiene un número de serie.Usted tiene que convertir manualmente resultado en una matriz de { name: ..., data: ...}
los objetos y pasar a HighCharts constructor.Uso for
bucle:
var seriesData = [];
for (var i = 0; i < result.length; i++){
seriesData.push({ name: result[i][0], data: result[i][1] });
}
Y el uso de la serie de datos como:
series: seriesData
Otros consejos
Mirando la salida del depurador el JSON no es lo que usted está esperando.
Difícil de decir para la definitiva pero se debe devolver el objeto correcto desde el controlador?Parece que estamos volviendo qry
cuando usted debe utilizar grp
.