AJAX загрузки в JQPlot - PullRequest
       4

AJAX загрузки в JQPlot

0 голосов
/ 18 декабря 2011

Мне нужно сделать диаграмму, используя jqPlot с массивом данных вроде

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

прекрасно работает с официальным примером для "плагина dateAxisRenderer"

но теперь мне нужно сделать ajax-нагруженную диаграмму. мне кажется, что метод «AJAX JSON Data Renderer» не может использовать даты в качестве источника данных «x» и может принимать значения «y» только из простого массива [y1, y2, y3]. как я могу заставить его взять обе координаты из моего массива - дату для «х» и число для «у»? Пример JSON:

$(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
  }
  });
});

спасибо.

1 Ответ

2 голосов
/ 17 января 2012

Основная проблема в вашем коде заключается в том, что средство визуализации не возвращает ответ, полученный от запроса ajax. Успешный вызов функции устанавливает переменную после ее возврата.

Посмотрите на код ниже.

Этапы исполнения:

  1. вызов функции plot при загрузке страницы
  2. сделать запрос Ajax
  3. при успешном выполнении запроса вызовите renderer с данными ответа
  4. вызов jqplot с аргументами, формирующими данные ответа.
  5. отображенный график

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();
});
...