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.