Draggind точки данных и отправка значений - PullRequest
Новая
       28

Draggind точки данных и отправка значений

3 голосов
/ 03 января 2012

На странице jqPlot есть пример перетаскивания точки данных на диаграмме jqPlot.

Как я могу отправить (например, с jQuery ajax) на сервер измененные значения? Измененные (текущие) значения хранятся где-то в объекте jqplot?

Ответы [ 3 ]

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

Самое сложное здесь - это знать, когда пользователь перетаскивает точку, а потом не получает данные.Я рекомендую использовать хук postDrawSeries следующим образом: 

$(document).ready(function () {

  // set up plot
  $.jqplot.config.enablePlugins = true;

  s1 = [['23-May-08',1],['24-May-08',4],['25-May-08',2],['26-May-08', 6]];

  plot1 = $.jqplot('chart1',[s1],{
     title: 'Highlighting, Dragging, Cursor and Trend Line',
     axes: {
         xaxis: {
             renderer: $.jqplot.DateAxisRenderer,
             tickOptions: {
                 formatString: '%#m/%#d/%y'
             },
             numberTicks: 4
         },
         yaxis: {
             tickOptions: {
                 formatString: '$%.2f'
             }
         }
     },
     highlighter: {
         sizeAdjust: 10,
         tooltipLocation: 'n',
         tooltipAxes: 'y',
         tooltipFormatString: '<b><i><span style="color:red;">hello</span></i></b> %.2f',
         useAxesFormatters: false
     },
     cursor: {
         show: true
     }
  });

  // add our hook, to fire after a series update
  $.jqplot.postDrawSeriesHooks.push(updatedSeries);

  function updatedSeries(sctx, options) {
    console.log(plot1.series[0].data); //data for the series is here
  }

});

Вывод при каждом перетаскивании (с обновленной точкой данных): 

[
Array[2]
, 
Array[2]
, 
Array[2]
, 
Array[2]
]

Вот пример. (Вам придется кэшировать js-файлы jqPlot в вашем браузере, так как они не позволяют хотлинкинг.)

Вам нужно будет реализовать какой-то таймер, чтобы ждать около 5 секунд или около того, прежде чем вызывать ваш ajaxтак как хук postdrawseries срабатывает на КАЖДОМ событии перетаскивания.Хотя это не должно быть слишком сложно.

1 голос
/ 26 апреля 2013

Этот ответ действительно помог нам.

Я заметил, что есть еще один хук, jqplotDragStop.

Итак, используя это, мы можем вызывать ajax каждый раз, когда перетаскивание прекращается. Как раз то, что мы искали. 

$('#chart1').bind('jqplotDragStop',
  function (seriesIndex, pointIndex, pixelposition, data) {
  // do your stuff here
});

Надеюсь, это поможет (извините, не могу понять, как добавить комментарий, новый для stackoverflow)

1 голос
/ 05 декабря 2012

Проблема с postDrawSeriesHooks заключается в том, что он работает все время, когда вы нажимаете на график. Это может быть настоящим беспорядком, если вы делаете AJAX-звонки. Вместо этого я бы связал событие jqplotClick с вашим графиком. Вы даже можете добраться до определенной точки или сохранить все данные каждый раз. Но он будет сохранен только один раз за клик. 

$("#chart1").on("jqplotClick", function(ev, gridpos, datapos, neighbor) {
    if ( neighbor ) {
        // specific point that has been clicked
        console.log('x:' + neighbor.data[0] + ' y:' + neighbor.data[1]);
    }
    // all the data from this plot's single series
    console.log(plot1.series[0].data);
});

Здесь приведен пример с несколькими графиками, который при каждом щелчке делает ajax-вызов php-файла и сохраняет все точки данных из обоих графиков. Это позволяет использовать только одну серию для каждого сюжета. 

var plots = [
    $.jqplot('chart1', [s0], graph_opts),
    $.jqplot('chart2', [s1], graph_opts)
];
$("#chart1, #chart2").on("jqplotClick", function(ev, gridpos, datapos, neighbor) {
    var data = [];
    $.each(plots, function(key, plot) {
        data[key] = plot.series[0].data;
    });

    var ajax_opts = {
        url:      ajax_info.url,
        type:     'post',
        async:    true,
        cache:    false,
        dataType: 'json',
        data: {
            action:  'store_graphs',
            data:    data
        },
        success: function( response ) {
            console.log(response);
        },
        error: function( xhr, textStatus, e ) {
            console.log(xhr.responseText);
        }
    };
    $.ajax(ajax_opts);
});
...