Hi i'm passing a List object from my controller to Javascript where it is put back into an array and used as a data source for HighChart bar graph.
In my code below if i comment back in the raw data it WORKS. If I use my array variable called 'result' I get nothing
If I step into Javascript with debugger and output result to immediate window it looks like:
?result[0] {...} [0]: "2" [1]: {...}
?result[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
HERE IS THE CODE :
function CreateChart3(surl) {
// Code block for fetching Array as jsonResult (js)
var url = $("#AbsolutePath").val() + "Comp开发者_运维百科laint.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
}]
});
});
};
EXTRACT FROM CONTROLLER CODE IF IT HELPS......
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);
As I remember data
property of series
is array of
- y-values
- pair of x-y values
- point objects
As I understand every element of your array is array where element[0] is name
and element[1] is array of y-values. So you have some number of series. You have to convert manually you result into array of { name: ..., data: ...}
objects and pass it to HighCharts constructor. Use for
loop:
var seriesData = [];
for (var i = 0; i < result.length; i++){
seriesData.push({ name: result[i][0], data: result[i][1] });
}
And use series data like:
series: seriesData
Looking at the debugger output the JSON isn't what you're expecting.
Hard to say for definite but are you returning the correct object from the controller? It looks like you're returning qry
when you should be using grp
.
精彩评论