Array not in correct format in Javascript for use by HighChart

Question

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() + "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
 }]
 });
 });
 };

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);

• John: Anyone any ideas on this please? thanks

Answer 1

As I remember data property of series is array of

1. y-values
2. pair of x-y values
3. 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

• John: Thankyou for the response, I tried this and its all ok except I cannot get the doubles quotes off the [n,n,n,n,n,n,n,n,n,n,n,n] data. I am starting to think i need to change the controller code
• John: The data part is a string and i want it to be an array within the array
• Igor Dymov: maybe try to make real array (not string) on server-side and use JavaScriptSerializer class
• John: Igor, thankyou very much for the help, i'm almost there, I have the data on the client side in what I thought was the correct format but still the charts not rendering. Here is my immediate window output from array on client side before its assigned to chart : ?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
• Igor Dymov: combine all values in element[1] to one array

Answer 2

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.

• John: The grp is just what is returned to qry object, if you take the grp outside the statement to the return line its out of context. The problem is the shape of the array. I have pie charts working because the shape or structure is more simple. trying to work out whats wrong. I'm gonna try and post a simpler question purely about how to structure the array and the difference between the pie chart example and the structured bar for HighCharts