javascript - How does one use Flot's selection graph with time on the xaxis? -

update: here fiddle demonstrate: http://jsfiddle.net/msybn/1/

i using flot's selection graph: http://www.flotcharts.org/flot/examples/selection/index.html

i use time xaxis, when drag zoom in smaller time interval graph goes blank. in working examples xaxis time based in years, numerically easy plot (i.e 1994.5 half way through 1994).

i have month year on xaxis such as: 'jul 2012', 'jan 2013', 'jul 2013' , on in 6 month intervals. using in conjuntion crosshair plugin , time plugin.

the zooming wont work. get's milli sec values correctly cant set graph them. code below, can help?

imported scripts: jquery.flot.js jquery.flot.time.js jquery.flot.crosshair.js jquery.flot.selection.js

$(function() {        //define datasets     var datasets = {             "blah": {                 label: "blah",                 key: "blah",                 data: []             }, //etc     };       $.each(datasets, function(i, item) {                 item.data.push([(time*1000), datapoints]);     });      // hard-code color indices prevent them shifting     // countries turned on/off     var = 0;     $.each(datasets, function(key, val) {         val.color = i;         ++i;     });      var plot;      var options = {             xaxis: {                 timezone: "browser",                 mode: "time"             }, series: {                 lines: {                     show: true                 }             }, crosshair: {                 mode: "x"             }, grid: {                 hoverable: true,                 autohighlight: false             }, selection: {                 mode: "x"             }         };      function plotaccordingtochoices() {          var data = [];                     //inputs not shown         choicecontainer.find("input:checked").each(function () {             var key = $(this).attr("name");             if (key && datasets[key]) {                 data.push(datasets[key]);             }         });          if (data.length > 0) {             plot = $.plot("#placeholder", data, options);         }     }      plotaccordingtochoices();       var placeholder = $("#placeholder");      placeholder.bind("plotselected", function (event, ranges) {          var = math.ceil(ranges.xaxis.from / 1000);         var = math.ceil(ranges.xaxis.to / 1000);  //this breaks           plot = $.plot(placeholder, datasets, $.extend(true, {}, options, {             xaxis: {                 min: from,                 max:             }         }));     }); });  </script> 

(updated based on solving problems in fiddle)

there 3 problems:

1. the main problem you're not using same code re-plot in plotselected callback plot originally. plotaccordingtochoices function builds new array containing data series datasets object. plotselected callback passes in 'datasets' itself, invalid.

   this difficult see in original code snippet, since omitted lines.

2. as mentioned before, you're incorrectly dividing 'from' , 'to' 1000; should use range values as-is.

3. the crosshair doesn't work because updatelegend undefined in plothover callback. fails repeatedly move mouse across plot, blocking crosshair.

i've updated fiddle demonstrate.