ASP.NET MVC JsonResult and JQuery flot - asp.net-mvc

Question

I'm trying to use the jquery flot graphing plugin with asp.net mvc. I'm trying to dynamically pull data from a JsonResult in order to populate the graph.
My problem is that I can't seem to get the data returned from the JsonResult in the correct format.
Here is my server side code:
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;
}
And here is my client side code:
$(function() {
$.getJSON("/path/to/JsonValues", function(data) {
var plotarea = $("#plot_area");
$.plot(plotarea, data);
});
});
Note, the following client side code works fine:
$(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);
});
Given that the above works correctly, it seems that it's just a matter of formatting the returned JsonResult correctly. How can I do this? Is the list of dictionaries the best type to be returning, or should I be using something else? Or is there a function in javascript that I should be using to format the data correctly?
Seems like a really simple thing, but I can't quite get it working.

Answer 1

Check your Json returned to the client, it will be Json objects with key value pairs, something like:
{{'2003':10882,'2002':10383},....}
Where as you require an array of Arrays.
[[[2003, 10882],[2002, 10383]],...]
You could always generate the Json string yourself and return the result
StringBuilder sb = new StringBuilder();
sb.append("[2003,10882],")
return Json("[" + sb.ToString() + "]");
Or you could try storing your values in Arrays which might generate the desired Json but I haven't tried that.

Answer 2

If you want to do it with C# arrays you could do the following:
var values = new object[] {
new object[] /* First series of value */
{
new int[,] { {2003,10882} },
new int[,] { {2002,10383} }
}
};
And then
return Json(values);

Answer 3

You need a JSON Array in the form:
[[1, 1], [2, 3], [5, 5]]
The flot category plugin expects data in the form:
[["category1", 12], ["category2", 3]]
This is not straightforward to create in C# (had to search for a long time :-))
The key is to create object Arrays (object [])
Untested Code follows:
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 ?*/
Your JavaScript-Code should work:
$(function() {
$.getJSON("/path/to/JsonValues", function(data) {
var plotarea = $("#plot_area");
$.plot(plotarea, data);
});
});