ASP.NET MVC JsonResult and JQuery flot

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.


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

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