ドラッググリッドデータポイントとサブミット値

Question

jqPlotページには、jqPlotチャート上にデータポイントをドラッグする例があります。

サーバーの変更された値に（例：jQuery ajaxで）送信するにはどうすればよいですか？変更された（現在の）値は、jqplotオブジェクトのどこかに格納されますか？

Answer 1

ここで最も難しいのは、ユーザーがポイントをドラッグした後にデータを取得しないとわかります。すべてのドラッグで

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

}); 

出力された（更新されたデータポイントを含む）：私はあなたがそうのようなフックpostDrawSeriesを使用することをお勧めし

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

Here's an example.（あなたにはjqPlotのjsファイルをキャッシュする必要がありますあなたのブラウザはhotlinkingを許可していないので、あなたのブラウザです。）ポストドローリーフックがすべてのドラッグイベントで発生するので、あなたのajaxを呼び出す前に、何らかのタイマーを5秒間待つよう実装する必要があります。それはあまりにも難しいはずがありません。

Answer 2

postDrawSeriesHooksの問題は、グラフをクリックしている間は実行されるということです。あなたがajaxコールをしているなら、これは本当に混乱するかもしれません。代わりにjqplotClickイベントをグラフにバインドします。あなたは特定のポイントに到達することも、毎回すべてのデータを保存することもできます。しかし、クリック1回につき1回しか保存されません。ここで

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

PHPファイルへのAJAX呼び出しすべてのデータポイントの両方のグラフからすべてのクリックして保存を行い、複数のグラフを例。これは、各プロットのための単一のシリーズのみを可能にする。

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

Answer 3

この回答は本当に助けになりました。

もう1つのフックjqplotDragStopがあります。

これを使用すると、ドラッグが停止するたびにajaxを呼び出すことができます。ちょうど私たちが探していたもの。このことができます

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

ホープ（申し訳ありませんが、StackOverflowのために新しいコメントを追加する方法を見つけ出すことができませんでした）。