JQPlot, JSON and 'No data specified' Error

Question

I am trying to use JQPlot within a VB.NET application under .NET 3.5. On a button click, using jquery, I am trying to populate the JQPlot Chart with JSON derived data using a ASP.NET Webservices Source file (which is part of the solution).

The JSON data is sent by the web service but when it is presented to JQPlot I get the javascript error 'No Data Specified' which is generated by JQPlot code.

My code listing is as follows:

Code to listen for the button to be clicked:

$(document).ready(function () {
 $('#<%=btnASMX1.ClientID%>').click(function () {
  getElectricDataJSON();
 return false;
 });
});

Javascript code outside the 'document.ready' function:

function ajaxDataRenderer() {
 var ret = null;
 $.ajax({
  // have to use synchronous here, else the function 
  // will return before the data is fetched
  async: false,
  //url: url,
  type: 'POST',
  contentType: 'application/json; charset=utf-8',
  url: "AccountsService.asmx/GetJSONData",
  data: "{AccountID: " + $('#<%= hiddenAccountID.ClientID%>').val() + " }",
  dataType: "json",
  success: function (response) {
   var ret = response.d;
   // The following two lines just display the JSON data for testing purposes
   $('#<%=outputASMX.ClientID%>').empty();
   $('#<%=outputASMX.ClientID%>').html("<div>" + ret + "</div>");
   return ret;
  },
  error: function (request) {
   $('#<%=outputASMX.ClientID%>').html("<div style='color:red;'>WEBSERVICE UNREACHABLE</div>");
  }
 });
 return ret;
};

var jsonurl = "./jsondata.txt";

function getElectricDataJSON() {
 var ret = ajaxDataRenderer();
 var plot1 = $.jqplot('chart2', jsonurl, {
 title: "AJAX JSON Data Renderer",
 dataRenderer: ret, //$.jqplot.ciParser
 dataRendererOptions: {
  unusedOptionalUrl: jsonurl
 }
});
}

The JSON data format is as follows:

[ { "todate": "2013-09-23T00:00:00", "Bill": 7095.65 }, { "todate": "2013-08-22T00:00:00", "Bill": 1137.96 }, { "todate": "2013-07-24T00:00:00", "Bill": 220429.41 }, ... ]

Any help or advice will be appreciated.

Answer 1

Thanks to @Fresh for their quick response. Here is the complete solution to my problem:

---

Code to listen for the button to be clicked:

$(document).ready(function () {
 $('#<%=btnASMX1.ClientID%>').click(function () {
  getElectricDataJSON();
 return false;
 });
});

---

JS function to get the data from a web service:

function ajaxDataRenderer() {
 var ret = null;
 $.ajax({
  // have to use synchronous here, else the function 
  // will return before the data is fetched
  async: false,
  type: 'POST',
  contentType: 'application/json; charset=utf-8',
  url: "AccountsService.asmx/GetJSONData",
  data: "{AccountID: " + $('#<%= hiddenAccountID.ClientID%>').val() + " }",
  dataType: "json",
  success: function (response) {
    ret = response.d; // return response string object
  },
  error: function (request) {
   $('#<%=outputASMX.ClientID%>').html("<div style='color:red;'>WEBSERVICE    UNREACHABLE</div>");
  }
 });
 return ret;
};

---

Data structure outputted by the web service is:

[ { "todate": "2013-09-23T00:00:00", "Bill": 7,095.65 }, { "todate": "2013-08-22T00:00:00", "Bill": 1,137.96 }, { "todate": "2013-07-24T00:00:00", "Bill": 220,429.41 }, ... ]

---

Data structure that is expected by JQPlot:

[ [ "2013-09-23T00:00:00", 7095.65 ] , [ "2013-08-22T00:00:00", 1137.96 ], [ "2013-07-24T00:00:00", 220429.41 ], ... ]

Note the removal of the comma's in the 'expected data' Bill field.

---

And finally, the function getElectricDataJSON() that is being called by btnASMX1 where 'chart2' is the ID of the div tags where the chart will be drawn.

function getElectricDataJSON() {

 // Get JSON 'string' object
 var ret = ajaxDataRenderer();

 // If JSON string object is null, stop processing with friendly message
 if (ret == null) {
   $('#<%=outputASMX.ClientID%>').html("<div style='color:red;'>CHARTS ARE NOT AVAILABLE AT THIS TIME</div>");
   return false;
 }

 // Now push required data into a JSON array object
 var sampleData = [], item;
 $.each(ret, function (key, value) {
   sampleData.push([value.todate, parseFloat(value.Bill.replace(/,/g, ""))]);
 });

 var plot = $.jqplot('chart2', [sampleData], {
   title: 'AJAX JSON Data Renderer',
   dataRenderer: sampleData,
   ...      
 });
}

Answer 2

The method signature for your datarender (i.e. ajaxDataRender) is wrong. The signature should look like this:

function(userData, plotObject, options) { ... return data; }

(See the documentation here)

In your example you are passing the datarenderer "ret" which is not a function with the correct datarender signature. Also the jsonurl you are passing to getElectricDataJSON() is redundant as at no point in your code is the data from "AccountsService.asmx/GetJSONData" persisted to "./jsondata.txt".

Hence you should change your code to this:

$(document).ready(function(){
 function ajaxDataRenderer(url, plot, options) {
  var ret = null;
  $.ajax({
   // have to use synchronous here, else the function 
   // will return before the data is fetched
   async: false,
   url: url,
   dataType: "json",
   success: function (response) {
    var ret = response;
    // The following two lines just display the JSON data for testing purposes
    $('#<%=outputASMX.ClientID%>').empty();
    $('#<%=outputASMX.ClientID%>').html("<div>" + ret + "</div>");
   },
   error: function (request) {
    $('#<%=outputASMX.ClientID%>').html("<div style='color:red;'>WEBSERVICE UNREACHABLE</div>");
   }
  });
  return ret;
 };

 var url = "AccountsService.asmx/GetJSONData";

 function getElectricDataJSON() {
  var plot1 = $.jqplot('chart2', url, {
  title: "AJAX JSON Data Renderer",
  dataRenderer: ajaxDataRenderer,
 });
}