ASP.NET MVC JsonResult y JQuery flot

Question

Estoy tratando de usar el complemento de gráficos jquery flot con asp.net mvc. Intento extraer dinámicamente datos de un JsonResult para completar el gráfico.

Mi problema es que parece que no puedo obtener los datos devueltos de JsonResult en el formato correcto.

Aquí es mi servidor de código del lado:

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

Y aquí es mi código del lado del cliente:

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

Nota, el siguiente código del lado del cliente funciona bien:

$(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); 
    }); 

Dado que lo anterior funciona correctamente, parece que solo se trata de formatear el JsonResult devuelto correctamente. ¿Cómo puedo hacer esto? ¿Es la lista de diccionarios el mejor tipo para devolver, o debería estar usando algo más? ¿O hay una función en javascript que debería usar para formatear los datos correctamente?

Parece una cosa realmente simple, pero no puedo hacer que funcione.

Answer 1

Compruebe su JSON devuelto al cliente, será objetos JSON con pares de valores clave, algo así como:

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

Donde como usted requiere una matriz de matrices.

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

Siempre se puede generar la cadena JSON mismo y devolver el resultado

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

o usted podría intentar almacenar los valores de matrices que podría generar JSON deseado, pero no he probado eso.

Answer 2

Si quiere hacerlo con arrays de C# que podría hacer lo siguiente:

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

Y luego

return Json(values); 

Answer 3

Se necesita una matriz JSON en la forma:

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

El plugin de categoría flot espera datos en el formulario:

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

Esto no es sencillo crear en C# (tenía que buscar un tiempo :-) largo)

La clave es crear matrices de objetos (object [])

Código No comprobado siguiente:

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 ?*/ 

Tienes JavaScript-código debería funcionar:

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