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

Question

I am trying to learn how to use Flot , and I think your example is very good, simple and clear code, so I tried to implement it, but here is my code in 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 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 get is an empty graph, although when notified in the index. I get perfect JSON formatted data.

What am I doing wrong?

Answer 1

I would advise you not to create JSON manually in your controller. Try 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>