ASP.NET MVC JsonResult e JQuery flot

Question

Sto provando a utilizzare il plug-in di grafica jquery flot con asp.net mvc. Sto cercando di estrarre dinamicamente i dati da un JsonResult per popolare il grafico.

Il mio problema è che non riesco a ottenere i dati restituiti da JsonResult nel formato corretto.

Ecco il mio codice lato server:

public ActionResult JsonValues() 
    { 
     IList<IDictionary<string, int>> listofvalues = new List<IDictionary<string, int>>(); 
     IDictionary<string, int> values1 = new Dictionary<string, int>(); 
     values1.Add("2003", 10882); 
     values1.Add("2002", 10383); 
     values1.Add("2001", 10020); 
     values1.Add("2000", 9762); 
     values1.Add("1999", 9213); 
     values1.Add("1998", 8720); 

     IDictionary<string, int> values3 = new Dictionary<string, int>(); 
     values3.Add("2003", 599); 
     values3.Add("2002", 510); 
     values3.Add("2001", 479); 
     values3.Add("2000", 457); 
     values3.Add("1999", 447); 
     values3.Add("1998", 414); 

     listofvalues.Add(values1); 
     listofvalues.Add(values3); 

     JsonResult result = new JsonResult { Data = listofvalues }; 
     return result; 
    } 

E qui è il mio codice lato client:

$(function() { 
     $.getJSON("/path/to/JsonValues", function(data) { 
      var plotarea = $("#plot_area"); 
      $.plot(plotarea, data); 
     }); 
    }); 

nota, il seguente codice lato client funziona bene:

$(function() { 
     var points = [ 
      [[2003, 10882], 
      [2002, 10383], 
      [2001, 10020], 
      [2000, 9762], 
      [1999, 9213], 
      [1998, 8720]], 

      [[2003, 599], 
      [2002, 510], 
      [2001, 479], 
      [2000, 457], 
      [1999, 447], 
      [1998, 414]] 
     ]; 

     var plotarea = $("#plot_area"); 
     $.plot(plotarea, points); 
    }); 

Dato che quanto sopra funziona correttamente, sembra che sia solo questione di formattare correttamente JsonResult restituito. Come posso fare questo? La lista dei dizionari è il miglior tipo da restituire, o dovrei usare qualcos'altro? O c'è una funzione in javascript che dovrei usare per formattare correttamente i dati?

Sembra una cosa davvero semplice, ma non riesco a farlo funzionare.

Answer 1

Controlla la tua JSON restituito al client, sarà oggetto JSON con coppie di valori chiave, qualcosa di simile:

{{'2003':10882,'2002':10383},....} 

Dove, come si richiede un array di array.

[[[2003, 10882],[2002, 10383]],...] 

Si può sempre generare la stringa JSON se stessi e restituire il risultato

StringBuilder sb = new StringBuilder(); 
sb.append("[2003,10882],") 
return Json("[" + sb.ToString() + "]"); 

Oppure si potrebbe provare memorizzare i valori in array che potrebbe generare il JSON desiderato ma non ho provato.

Answer 2

Se si vuole farlo con C# array si potrebbe procedere come segue:

var values = new object[] { 
    new object[] /* First series of value */ 
    { 
     new int[,] { {2003,10882} }, 
     new int[,] { {2002,10383} } 
    } 
}; 

E poi

return Json(values); 

Answer 3

Avete bisogno di un array JSON nella forma:

[[1, 1], [2, 3], [5, 5]] 

Il plug-in della categoria flottaggio si aspetta dati nel formato:

[["category1", 12], ["category2", 3]] 

Questo non è semplice per creare in C# (dovuto cercare a lungo :-))

La chiave è quella di creare array di oggetti (object [])

codice non testato segue:

IEnumerable<object[]> values1_array = from x in values1 
select new object [] {x.Key, x.Value}; 

IEnumerable<object[]> values3_array = from x in values3 
select new object [] {x.Key, x.Value}; 

//create one big object 
var dataArray = new object[] { 
    new {data = values1_array, label="Values1"}, 
    new {data = values3_array, label="Values3"}, 
}; 

//return Json data 
return Json(dataArray) /* JsonRequestBehavior.AllowGet ?*/ 

Javascript-Codice dovrebbe funzionare:

$(function() { 
    $.getJSON("/path/to/JsonValues", function(data) { 
     var plotarea = $("#plot_area"); 
     $.plot(plotarea, data); 
    }); 
});