title: handle click event in bar chart
body: <p>Anytime I hover a point in a bar chart of the flot chart it 'shines'.
  How can I handle a click event on that point to be linked to a php page? or How to add links to my bar charts</p>
  
  <p>Thanks :-)</p>
  
  <p>Here is my code</p>
  
  <pre><code>     &lt;script src="../../js/jquery-2.1.1.min.js"&gt;&lt;/script&gt;
       &lt;script src="../../js/jquery-ui.min.js" charset="utf-8"&gt;&lt;/script&gt;
       &lt;script src="../../js/autoNumeric.min.js" charset="utf-8"&gt;&lt;/script&gt;
       &lt;script src="../../js/jquery.flot.js" charset="utf-8"&gt;&lt;/script&gt;
       &lt;script src="../../js/jquery.flot.pie.js" charset="utf-8"&gt;&lt;/script&gt;
       &lt;script src="../../js/jquery.flot.resize.min.js"charset="utf-8"&gt;&lt;/script&gt;
       &lt;script src="../../js/jquery.flot.fillbelow.min.js"charset="utf-8"&gt;&lt;/script&gt;
       &lt;script src="../../js/jquery.flot.axislabels.min.js"charset="utf-8"&gt;&lt;/script&gt;
       &lt;script src="../../js/jquery.flot.symbol.js"charset="utf-8"&gt;&lt;/script&gt;
       &lt;script src="../../js/bootstrap.min.js"&gt;&lt;/script&gt;
       &lt;script type="text/javascript"&gt;
  
  
  
          var data = [
          [0, &lt;?php echo $usa; ?&gt;], 
          [1, &lt;?php echo $china; ?&gt;],
          [2, &lt;?php echo $uk; ?&gt;], 
          [3, &lt;?php echo  $france; ?&gt;],
          [4, &lt;?php echo  $germany; ?&gt; ]
  
          ];
  
  
           var dataset = [
           { label: "Fall By Location", data: data, color: "#5482FF" }
            ];
  
           var ticks = [
           [0, "Bathroom"], [1, "Bedside"], [2, "Kitchen"], [3, "Ward"],
           [4, "Hallway"]];
  
  
           var options = {
           series: {
           bars: {
              show: true
              }
           },
           bars: {
          align: "center",
          barWidth: 0.5
              },
        xaxis: {
      axisLabel: "Location",
      axisLabelUseCanvas: true,
      axisLabelFontSizePixels: 12,
      axisLabelFontFamily: 'Verdana, Arial',
      axisLabelPadding: 10,
      ticks: ticks
  
     },
     yaxis: {
      axisLabel: "Number of Falls",
      axisLabelUseCanvas: true,
      axisLabelFontSizePixels: 12,
      axisLabelFontFamily: 'Verdana, Arial',
      axisLabelPadding: 3,
      tickFormatter: function (v, axis) {
          return v + "R";
      }
     },
      legend: {
      noColumns: 0,
      labelBoxBorderColor: "#000000",
      position: "nw"
     },
      grid: {
      hoverable: true,
      borderWidth: 2,        
      backgroundColor: { colors: ["#ffffff", "#EDF5FF"] }
      }
       };
  
        $(document).ready(function () {
         $.plot($("#flot-placeholder"), dataset, options);    
          $("#flot-placeholder").UseTooltip();
        });
  
  
  
  
      function gd(year, month, day) {
        return new Date(year, month, day).getTime();
         }
  
        var previousPoint = null, previousLabel = null;
  
       $.fn.UseTooltip = function () {
       $(this).bind("plothover", function (event, pos, item) {
      if (item) {
          if ((previousLabel != item.series.label) || (previousPoint != item.dataIndex)) {
              previousPoint = item.dataIndex;
              previousLabel = item.series.label;
              $("#tooltip").remove();
  
              var x = item.datapoint[0];
              var y = item.datapoint[1];
  
              var color = item.series.color;
  
              //console.log(item.series.xaxis.ticks[x].label);                
  
              showTooltip(item.pageX,
                      item.pageY,
                      color,
                      "&lt;strong&gt;" + item.series.label + "&lt;/strong&gt;&lt;br&gt;" +               
       item.series.xaxis.ticks[x].label + " : &lt;strong&gt;" + y + "&lt;/strong&gt; R");                
          }
      } else {
          $("#tooltip").remove();
          previousPoint = null;
      }
       });
      };
  
       function showTooltip(x, y, color, contents) {
       $('&lt;div id="tooltip"&gt;' + contents + '&lt;/div&gt;').css({
      position: 'absolute',
      display: 'none',
      top: y - 40,
      left: x - 120,
      border: '2px solid ' + color,
      padding: '3px',
      'font-size': '9px',
      'border-radius': '5px',
      'background-color': '#fff',
      'font-family': 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
      opacity: 0.9
      }).appendTo("body").fadeIn(200);
      }
  </code></pre>