ASP.NET MVC JsonResult and JQuery flot

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