CODEWITHSUNDEEP
javascriptjqueryajaxarraysjqplot
guzich
guzich

Reputation: 1

ajax loading into the jqPlot

I need to make a chart using a jqPlot with data array like

[[2010-06-30 18:40:11, 18], [2010-06-30 18:42:17, 25]...]

it works great with the official example for "dateAxisRenderer plugin"

but now i need to make ajax-loaded chart. it seems to me that "AJAX JSON Data Renderer" method can't use dates as a "x" data source and only can take "y" values from simple [y1,y2,y3] array. how can i make him to take both coords from my array - date for "x" and number for "y"? JSON example:

$(document).ready(function(){
var ajaxDataRenderer = function(url, plot, options) {
var ret = null;
$.ajax({
  async: false,
  url: url,
  dataType:"json",
  success: function(data) {
    ret = data;
  }}
);
return ret;
};

var jsonurl = "jsondata.php";

var plot2 = $.jqplot('chart2', jsonurl,{
  title: "AJAX JSON Data Renderer",
  dataRenderer: ajaxDataRenderer,
  dataRendererOptions: {
    unusedOptionalUrl: jsonurl
  }
  });
});

thanks.

Upvotes: 0

Views: 5970

Answers (1)

vallabh joshi
vallabh joshi

Reputation: 143

The basic issue in your code is renderer is not returning the response received form the ajax request. Success function call sets the variable after returning it.

Take a look at the code below.

Steps of execution:

  1. Call the plot function on page load
  2. make the ajax request
  3. on success of the request call the renderer with response data
  4. call jqplot with arguments form the response data.
  5. graph rendered
var ajaxJqPlot = {
    settings : {
        data_url : "jsondata.php",
        element_id : "chart2"
    },
    plot : function(settings){
        t = this;
        $.extend(t.settings, settings);
        $.ajax({
            async : false,
            url : t.settings.data_url,
            dataType :"json",
            success : t.renderer
        });
    },
    renderer : function(res){
        t = this;
        $.jqplot(t.settings.element_id,  res.data, res.opt);
    }
};

$(document).ready(function(){
    ajaxJqPlot.plot();
});

Upvotes: 2

Related Questions