Draggind data points and submitting values

问题:

On page jqPlot there is an example of dragging data point on jqPlot chart.

How can I submit (e.g. with jQuery ajax) to server changed values? Are changed (current) values stored somewhere in jqplot object?

回答1:

The hardest thing here is knowing when the user drags a point, not getting the data afterward. I recommend you use a postDrawSeries hook like so:

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

});

Output on every drag is (containing the updated data point):

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

Here's an example. (You'll have to cache the jqPlot js files in your browser since they do not allow hotlinking.)

You'll have to implement some sort of timer to wait for 5 seconds or so before calling your ajax since the postdrawseries hook fires on EVERY drag event. That shouldn't be too hard though.

回答2:

The problem with postDrawSeriesHooks is that it runs the entire time you are clicking on the graph. This could be a real mess if you are making ajax calls. I would bind the jqplotClick event to your chart instead. You can even get to specific point or you can save all of the data each time. But it will only get saved once per click.

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

Here an example with multiple graphs that makes an ajax call to a php file every click and stores all the data points from both graphs. This only allows for a single series for each plot though.

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

回答3:

This answer really helped us.

I noticed there is another hook, jqplotDragStop.

So by using this, we can call ajax every time the dragging stops. Just what we were looking for.

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

Hope this helps (Sorry, could not figure out how to add a comment, new to stackoverflow).