Basic Flotr Example

HTML

<script src="https://raw.github.com/HumbleSoftware/Flotr2/master/flotr2.min.js"></script>
<link rel="stylesheet" href="https://raw.github.com/HumbleSoftware/Flotr2/master/examples/examples.css">
<div id="example"></div>
<div id="controls">
    <button>Blue</button>
    <button>Green</button>
</div>

CSS

#example {
    width: 340px;
    height: 220px;
}

JavaScript

(function basic(container) {

  var
    _ = Flotr._, // underscore.js
    d1 = [[0, 3], [4, 8], [8, 5], [9, 13]], // First data series
    d2 = [], // Second data series
    show = [true, true], // Display array
    i, graph;

  // Generate first data set
  for (i = 0; i < 14; i += 0.5) {
    d2.push([i, Math.sin(i)]);
  }
    
  $('#controls').delegate('button', 'click', function (e) {
    var
      index = $(e.currentTarget).index();
      alert(JSON.stringify($(e).currentTarget))
    show[index] = !show[index];
    drawGraph();
  });

  function drawGraph () {
    var
      data = [
        {
          data : d1
        }, {
          data : d2
        }
      ];
      
    _.each(show, function (show, index) {
      data[index].hide = !show;
    });

    // Draw Graph
    return Flotr.draw(container, data, {
      xaxis: {
        minorTickFreq: 4
      }, 
      grid: {
        minorVerticalLines: true
      }
    });
  }

  drawGraph();

})(document.getElementById("example"));