views:

449

answers:

1

If I bind a function to flot's "plotselected" event, is there a way to get the main series indexes of the start and end points of the selected area?

I saw that with "plothover" you can use the "item" variable, but it's not clear if that works for selections. Plus, I don't want to have to iterate through the entire series each time the function is called. My goal is get something like:

 $("#placeholder").bind("plotselected", function (itemx1, itemx2) {
          var x1 = itemx1.plot.pos //The index for this plot point in series";
          var x2 = itemx2.plot.pos //The index for this plot point in series";
          var sum = 0;
          for (var i = x1; i < x2; i++) {
               sum += d[i][0];
               }
          $("#total_selected").text(sum);
          });

If I could get that, I could also output (with my data) something like:

         "You earned X points over Y days, Z hours, F minutes. Good Job!"

Seems like this should be simple, but flot is really throwing me for a loop.

Thanks!

+4  A: 

From the flot api documentation: the "plotselected" event function takes two paremeters "event" and "ranges". The ranges object contains the x and y coordinates of the selection.

$('#placeholder').bind('plotselected', function (event, ranges) {
  var x1 = ranges.xaxis.from;
  var x2 = ranges.xaxis.to;
  var y1 = ranges.yaxis.from;
  var y2 = ranges.yaxis.to;    
  var sum = 0;

  /* The values returned by the coordinates are floats. 
     You may need to tweak this to get the correct results.*/
  for (var i = x1; i < x2; i++) {
       sum += d[i][0];
  }
  $("#total_selected").text(sum);
});
Jose Basilio