string passed does not render chart object, but string value if pasted into javascript directly does. Highcharts

On debug. when execution is leaving the controller I debug and the variable contains :

?sArray {string[17, 2]} [0, 0]: "Arecleoch" [0, 1]: "21" [1, 0]: "Barnesmore" [1, 1]: "3"

etc etc....

then in the javascript its received as :

?sdata {...} [0]: "Arecleoch" [1]: "21" [2]: "Barnesmore" [3]: "3" [4]: "Beinn An Tuirc" [5]: "1" [6]: "Beinn An Tuirc Phase 2"

etc

so the pie is displayed as one solid circle of colour

puzzled, any ideas?

controller code below :

    public JsonResult GetChartData_IncidentsBySite()
    {
        var allSites = _securityRepository.FindAllSites();

        var qry = from s in _db.Sites   
                  join i in _db.Incidents on s.SiteId equals i.SiteId 
                  group s by s.SiteDescription 
                      into grp
                      select new
  开发者_运维知识库                    {
                          Site = grp.Key,
                          Count = grp.Count()
                      };

        string[,] sArray = new string[qry.Count(),2];
        int y = 0;

        foreach (var row in qry.OrderBy(x => x.Site))
        {
            if ((row.Count > 0) && (row.Site != null))
            {
                sArray[y, 0] = row.Site.ToString();
                sArray[y, 1] = row.Count.ToString();
                y++;
            }
        }

        return Json(sArray , JsonRequestBehavior.AllowGet);
    }

Here is the javascript code :

    $.getJSON(url, null, function(sdata) {

        debugger;
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },

            title: {
                text: 'Number of Environmental Incidents by Site'
            },

            tooltip: {
                formatter: function() {
                    return '<b>' + this.point.name + '</b>: ' + this.y + ' %';
                }
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: false
                    },
                    showInLegend: true
                }
            },
            series: [{
                type: 'pie',
                name: 'Incidents by Site',
                data: sdata    

  }]
            });
        });
    });

In the version that works, data is an Array of Arrays of String ;

    data: [["Arecleoch",21], ... 

(Notice there is no oppening quotes before the first bracket).

In the version that does not work, it is a String representing the Array. I suspect the charts API only expect an Array (in this case, an array of array, actually).

So it depends on what this does :

$.getJSON(url, null, function(data) {
  // What is the type of data here ? 

From your controller and the display of your debugger, I think data is itself an Array of Arrays. You should directly pass it to the charts API (without the sData = data.toString()) function wich actually transforms the Array ['a', 'b', 'c'] into a String representing the array, like "['a', 'b', 'c']");

// Callback parameter renamed to show it is an Array of Arrays
$.getJSON(url, null, function(aaData) { 
  // ... skipped ... 
  series: [{
                type: 'pie',
                name: 'Incidents by Site',
                data: aaData /* Use the Array itself */
          }]

Edit : my solution will only work if the controller output something like :

{
  data : [[ "Arecleoch", 21], ["Whatever", 42]]
}

However it seems like your controller returns something like

{
  data : "[['Arecleoch', 21],['Whatever', 42]]"
}

(Maybe without the { data : } part, I don't know if you need a top-level element or if you are derectly returning the Array in JSON)

Is that the case ? If so, then you'll have to either :

• change the controller
• parse the string on the client side, in javascript