Question

I’m using the jqPlot “AJAX JSON Data Renderer” as described in: http://www.jqplot.com/tests/data-renderers.php.
My server side is Spring MVC. On the server I render a matrix of Object[][], each line of the matrix contains 2 objects: [LocalTime.toString(“HH:mm”), Integer]. Response is returned as “@ResponseBody”

I can see that the data is retrieved from the server and when I display it in an alert I see the following:

[["09:00",5],["09:30",5],["10:00",5],["10:30",5],["11:00",10],["11:30",10],["12:00",10],["12:30",10],["13:00",5]]

I also tried using List<List<Object>> instead of the array.
I cant get it to work. All I get is an empty chart.
Here is the javascript:

<script>
    $(document).ready(function(){
      var ajaxDataRenderer = function(url, plot, options) {
        var ret = null;
        $.ajax({
          async: false,
          url: url,
          dataType:"json",
          success: function(data) {
            ret = data;
          }
        });
        alert("OUT: " + ret);
        return ret;
      };
       var jsonurl = "chartData";

      var plot2 = $.jqplot('chart', jsonurl,{
        dataRenderer: ajaxDataRenderer,
        dataRendererOptions: {
          unusedOptionalUrl: jsonurl
        }
      });
    });
</script>

I saw in here JSON for jqPlot that everyone suggests to build a string and parse it. Is this the only way?
I also reviewed several similar questions but couldn’t find me an answer.
Will appreciate any hint…

Answer 1

This question was asked ages ago, so I assume you have moved on by now…but I was searching for this as well…and have just found the answer. Well…AN answer.

The issue is that the thing you are passing back from ajaxDataRenderer stops looking like json when you put the dates in. I dont know why, but if you change dataType to text, then your alert will output the data. But the chart fails, because it isn’t set up to handle a string.

so….you use eval, to force js to convert the string into an actual array, like this:

var ajaxDataRenderer = function(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:"text",
      success: function(data) {
          ret = data;
          }
    });

    //clear out the loading message from the div
    $('#chartdiv').empty();
    //evaluate the returned string...to turn it into the data structure.
    return eval(ret);
};

This worked for me anyway. I then made my url to return text representing the data.

Hope this helps someone else searching for the answer to this!