title: Populate JQuery Flot Chart with Ajax and Json
body: <p>I'm trying to use JQuery Flot Charts <a href="http://www.flotcharts.org/" rel="nofollow">http://www.flotcharts.org/</a> in my MVC 5 application. At the moment I'm just trying to get an understanding of how they work. I've used this example code which creates a Bar Chart:</p>
  
  <pre><code>$(document).ready(function () {
  
      $(function () {
  
      var data = [[0, 5],[1, 10],[2, 15],[3, 20],[4, 25],[5, 30]];
      var dataset = [{ label: "2012 Average Temperature", data: data, color: "#5482FF" }];
      var ticks = [[0, "London"], [1, "New York"], [2, "New Delhi"], [3, "Taipei"],[4, "Beijing"], [5, "Sydney"]];
  
      var options = {
          series: {
              bars: {
                  show: true
              }
          },
          bars: {
              align: "center",
              barWidth: 0.5
          },
          xaxis: {
              axisLabel: "World Cities",
              axisLabelUseCanvas: true,
              axisLabelFontSizePixels: 12,
              axisLabelFontFamily: 'Verdana, Arial',
              axisLabelPadding: 10,
              ticks: ticks
          },
  
          legend: {
              noColumns: 0,
              labelBoxBorderColor: "#000000",
              position: "nw"
          },
          grid: {
              hoverable: true,
              borderWidth: 2,
              backgroundColor: { colors: ["#ffffff", "#EDF5FF"] }
          }
      };
  
          $.plot($("#placeholder"), dataset, options);
      });
  
  });
  </code></pre>
  
  <p>If I were to use JQuery Flot Charts, I'd need to be able to pull the data in dynamically via AJAX as opposed to being hard coded into my Razor View like above. </p>
  
  <p>I created an Action in my Controller which returns the same data as that hard coded into the example above</p>
  
  <pre><code>[HttpGet]
  public ActionResult GetTestData()
  {
       return Json(new[] { new[] { 0, 5 }, new[] { 1, 10 }, new[] { 2, 15 }, new[] { 3, 20 }, new[] { 4, 25 }, new[] { 5, 30 }, new[] { 6, 35 } },JsonRequestBehavior.AllowGet);
  }
  </code></pre>
  
  <p>I then amended the code in my Razor View by commenting out the data and plot calls and replaced them with an Ajax Request</p>
  
  <pre><code>//var data = [[0, 11],[1, 15],[2, 25],[3, 24],[4, 13],[5, 18]];
  //$.plot($("#placeholder"), dataset, options);
  $.ajax({
              type: "GET",
              url: '@Url.Action("GetTestData")',
              error: function () {
                  alert("An error occurred.");
              },
              success: function (data) {
                  $.plot($("#placeholder"), dataset, options);
              }
          });
  </code></pre>
  
  <p>This Ajax Request should then call the GetTestData Action in my Controller and return the Json data. However, I've put a break point on my GetTestData Action, debugged, and the Action never gets called, therefore the data is never returned in order to create the Bar Chart.</p>
  
  <p>Could anyone please help me find out why my Action isn't called by my Ajax code.</p>
  
  <p>Thanks for any feedback.</p>