Обновление dataSet с помощью flot сбрасывает данные - PullRequest
Новая
       51

Обновление dataSet с помощью flot сбрасывает данные

7 голосов
/ 24 апреля 2011

У меня есть флот-диаграмма, которую я хочу динамически обновлять через AJAX.

Я могу визуализировать диаграмму изначально, но всякий раз, когда я пытаюсь обновить dataSet и перерисовать диаграмму, она сбрасывает все мои данныеpoints: 

plot.setData(dataSet);
        plot.draw();

Я пробовал это с несколькими различными настройками массива, и мне кажется, что я передаю правильные данные - диаграмма просто не принимает.

У кого-нибудь естьидеи?Спасибо!

http://datasift.islsandbox.com/

В этом примере используются WebSockets, поэтому браузер WebKit - ваш лучший выбор для тестирования.

Ответы [ 3 ]

11 голосов
/ 26 апреля 2011

В вашем коде есть две вещи с настройкой flot. На нагрузке вы делаете это: 

var plot = $.plot($("#flotchart"), [{
    data: [[35, 0]],
    bars: {show: true, horizontal: true}
}]);

Затем позже вы получаете новые данные через AJAX и делаете это: 

 var dataSet = [[pacCount, 0]];//pacCount is a number that increments each call
 plot.setData(dataSet);
 plot.draw();

Чего не хватает, так это того, что при первом вызове вы используете формат данных, где каждая серия является объектом, но затем, когда вы вызываете setData во второй раз, вы используете "серию массив "вариация. Я не совсем уверен, где, но это беспорядок. Вот как это исправить во втором звонке: 

 var dataSet = [[pacCount, 0]];//pacCount is a number that increments each call
 plot.setData([{
    data:dataSet,
    bars: {show: true, horizontal: true}
 }]);
 plot.draw();
2 голосов
/ 23 сентября 2011

Если вы хотите несколько серий с метками: 

plot.setData([
  {
    label: 'Hola',
    data: data[0],
  },
  {
    label: 'Hola2',
    data: data[1]
  }
]);                 
plot.setupGrid();
plot.draw();

Где данные могут быть получены из вызова ajax в формате json.

Например, в php: 

<?php

$data[] = array(2,4);
$data[] = array(12,6);
$data[] = array(22,8);
$data[] = array(32,2);
$data1[] = array(4,6);
$data1[] = array(14,3);
$data1[] = array(24,9);
$data1[] = array(34,5);

$response[0] = $data;
$response[1] = $data1;

echo json_encode($response);
?>

В любом случае значение формата возврата со стороны сервера должно быть примерно таким для двух серий, как в примере выше:

[[[2,4], [12,6], [22,8], [32,2]], [[4,6], [14,3], [24,9], [ 34,5]]]

0 голосов
/ 01 декабря 2016

Если вы хотите обновить свой график более одного раза, вы можете инкапсулировать переменные параметров 

var drawcourb = function(){

var options = {
                    series : {
                    }
                };

var plot = $.plot($("#placeholder"), [ {
label : "balbla",
data : courbData,
otherOption : "value"


} ], options);

return function(courbData){

    plot.setdata([{
label : "blabla",
data : courbData,
    }]);
    plot.draw();
}

}

Затем вы можете вызвать обновление функции для примера: 

var updateProgressPlot = drawcourb();

updateProgressPlot(newDataSet);
...