Basic Flotr Example

by cesutherland

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>

CSS

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

JavaScript

(function basic(container) {

  var
    horizontal = (horizontal ? true : false), // Show horizontal bars
    d1 = [],                                  // First data series
    ticks = [],                               // X Axis Labels
    point,                                    // Data point variable declaration
    i;

  for (i = 0; i < 4; i++) {

    if (horizontal) { 
      point = [Math.ceil(Math.random()*10), i];
    } else {
      point = [i, Math.ceil(Math.random()*10)];
    }
    
    ticks.push([i, 'Label ' + i]);

    d1.push(point);
  };
              
  // Draw the graph
  Flotr.draw(
    container,
    [d1],
    {
      bars : {
        show : true,
        horizontal : horizontal,
        shadowSize : 0,
        barWidth : 0.5
      },
      mouse : {
        track : true,
        relative : true
      },
      yaxis : {
        min : 0,
        autoscaleMargin : 1
      },
      xaxis : {
        ticks : ticks
      }
    }
  );
})(document.getElementById("example"));