title: How to add crosshair in FLOT after zooming the graph?
body: <p>Hello I am creating a graph with FLOT and i am adding the "crosshair" option, it works very well until I zoom the graph. I know the problem is when I bind the "plotselected" data with the "updatelegend" function, but i don't know how to do it. I'd appreciate it a lot if you can help me. Thanks.
  Here is my code:</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
  &lt;html&gt;
   &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
      &lt;title&gt;Tendencia de Produccion&lt;/title&gt;
      &lt;link href="layout.css" rel="stylesheet" type="text/css"&gt;
      &lt;!--[if lte IE 8]&gt;&lt;script language="javascript" type="text/javascript" src="../excanvas.min.js"&gt;&lt;/script&gt;&lt;![endif]--&gt;
      &lt;script language="javascript" type="text/javascript" src="../jquery.js"&gt;&lt;/script&gt;
      &lt;script language="javascript" type="text/javascript" src="../jquery.flot.js"&gt;&lt;/script&gt;
      &lt;script language="javascript" type="text/javascript" src="../jquery.flot.crosshair.js"&gt;&lt;/script&gt;
      &lt;script language="javascript" type="text/javascript" src="../jquery.flot.selection.js"&gt;&lt;/script&gt;
   &lt;/head&gt;
      &lt;body&gt;
      &lt;h1&gt;TENDENCIA DE PRODUCCION&lt;/h1&gt;
  
   &lt;div id="placeholder" style="width:1000px;height:350px; font-size: 13px;"&gt;&lt;/div&gt;
  &lt;p id="hoverdata"&gt;&lt;/p&gt;
  
  Previsualizacion:
      &lt;div id="overview" style="margin-left:50px;margin-top:20px;width:400px;height:50px"&gt;&lt;/div&gt;
  
  &lt;script id="source"&gt;
  $(function () {
      var d = [[1070233200000, 375.97], [1072911600000, 377.03], [1199142000000, 385.44]]; 
  
  
      var options = {
      series: {lines: { show: true, lineWidth: 1 }},
          xaxis: { mode: "time", tickLength: 5 },
          selection: { mode: "x" },
          grid: { markings: weekendAreas, color: "#333", hoverable: true, autoHighlight: true },
      crosshair: { mode: "x" }
      };
  
      var plot = $.plot($("#placeholder"), [{data:d, label: "Presion = -0.00", color: "#00ff00"} ], options);
  
  
  // ************** MOSTRAR PUNTOS AL POSICIONARSE SOBRE LA LINEA DEL GRAFICO ********************************************************
      var legends = $("#placeholder .legendLabel");
      legends.each(function () {
          // fix the widths so they don't jump around
          $(this).css('width', $(this).width());
      });
  
      var updateLegendTimeout = null;
      var latestPosition = null;
  
      function updateLegend() {
          updateLegendTimeout = null;
  
          var pos = latestPosition;
  
          var axes = plot.getAxes();
          if (pos.x &lt; axes.xaxis.min || pos.x &gt; axes.xaxis.max ||
              pos.y &lt; axes.yaxis.min || pos.y &gt; axes.yaxis.max)
              return;
  
  
          var i, j, dataset = plot.getData();
          for (i = 0; i &lt; dataset.length; ++i) {
              var series = dataset[i];
  
              // find the nearest points, x-wise
              for (j = 0; j &lt; series.data.length; ++j)
                  if (series.data[j][0] &gt; pos.x)
                      break;
  
              // now interpolate
              var y, p1 = series.data[j - 1], p2 = series.data[j];
              if (p1 == null)
                  y = p2[1];
              else if (p2 == null)
                  y = p1[1];
              else
                  y = p1[1] + (p2[1] - p1[1]) * (pos.x - p1[0]) / (p2[0] - p1[0]);
  
              legends.eq(i).text(series.label.replace(/=.*/, "= " + y.toFixed(2)));
  
          }
      }
  
  // ************************************************************************************************************
  
      $("#placeholder").bind("plothover",  function (event, pos, item) {
          latestPosition = pos;
          if (!updateLegendTimeout)
              updateLegendTimeout = setTimeout(updateLegend, 50);
      });
  
  
      var overview = $.plot($("#overview"), [{data:d,  color: "#00ff00"}], {
          series: {
              lines: { show: true, lineWidth: 1 },
              shadowSize: 0
          },
          xaxis: { ticks: [], mode: "time" },
          yaxis: { ticks: [], min: 0, autoscaleMargin: 0.1 },
          selection: { mode: "x" }
      });
  
      // now connect the two
  
      $("#placeholder").bind("plotselected", function (event, ranges) {
          // do the zooming
          plot = $.plot($("#placeholder"), [{data:d, label: "Presion = -0.00", color: "#00ff00"}],
                        $.extend(true, {}, options, {
                            xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to }
                        }));
  
          // don't fire event on the overview to prevent eternal loop
          overview.setSelection(ranges, true);
      });
  
  
  
      $("#overview").bind("plotselected", function (event, ranges) {
          plot.setSelection(ranges);
      });
  
  
  
  
  });
  &lt;/script&gt;
  
   &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>