Lina Lina - 5 months ago 8
JSON Question

How to use flot with jQuery in ASP.NET MVC?

I am trying to learn how to use Flot, and I think your example is a very nice, simple, very understandable code, so I have been trying to implement it, but here is my code in the index.aspx:

$(function () {
$.getJSON("../../Home/JsonValues", function (data) {
alert('json: ' + data + ' ...');
var plotarea = $("#plot_area");
$.plot(plotarea, data);
//$.plot(plotarea,[ [[0, 0], [1, 1]] ]);
});
});


And here is the code in the HomeController:

public ActionResult JsonValues()
{
//string s = "[ [[0, 0], [1, 1]] ]";
//return Json(s, JsonRequestBehavior.AllowGet);
StringBuilder sb = new StringBuilder();
sb.Append("[[0, 0], [1, 1]]");
return Json("[" + sb.ToString() + "]", JsonRequestBehavior.AllowGet);
}


All I am getting is an empty graph, although when alerting in the index. I get the perfect formatted JSON data.

What am I doing wrong?

Answer

I would advise you to avoid creating JSON by hand in your controller. Try this instead:

public ActionResult JsonValues()
{
    return Json(
        new[] { new[] { 0, 0 }, new[] { 1, 1 } }, 
        JsonRequestBehavior.AllowGet);
}

And in the view:

<div id="plot_area" style="width:600px;height:300px;"></div>

<script type="text/javascript">
$(function() {
    $.getJSON('../../Home/JsonValues', function (data) {
        $.plot($('#plot_area'), [data]);
    });
});
</script>