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

Anyone any ideas on this please? thanks

John
– John

2011-07-25 10:03:33 +00:00
Commented Jul 25, 2011 at 10:03 — John
– John, Commented Jul 25, 2011 at 10:03

Igor Dymov · Accepted Answer · 2011-07-26 06:26:15Z

1

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

answered Jul 26, 2011 at 6:26

Igor Dymov

16.5k5 gold badges52 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

John Over a year ago

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 Over a year ago

The data part is a string and i want it to be an array within the array

Igor Dymov Over a year ago

maybe try to make real array (not string) on server-side and use JavaScriptSerializer class

John Over a year ago

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 Over a year ago

combine all values in element[1] to one array

|

Fish Below the Ice · Accepted Answer · 2014-04-30 12:50:15Z

0

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.

edited Apr 30, 2014 at 12:50

Fish Below the Ice

1,27113 silver badges23 bronze badges

answered Jul 25, 2011 at 18:22

escouser

1,94319 silver badges16 bronze badges

1 Comment

John Over a year ago

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

Collectives™ on Stack Overflow

Array not in correct format in Javascript for use by HighChart

2 Answers 2

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related