Flotr2 barchart test

Flotr2 barchart test

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: 400px; 
    height: 220px;
}
body {
    font-family: verdana;
}
.flotr-grid-label {
    font-size: 16px;
}

JavaScript

(function basic(container) {

  var
    barData = [],
    barTicks = [],
    barLabels = [],
    i, graph;

    barTicks.push([4, "Meeting expectations"]);  
    barTicks.push([3, "Speed of problem solving"]);  
    barTicks.push([2, "Professional competence in other"]);  
    barTicks.push([1, "Credibility"]);  
    barTicks.push([0, "Initiative"]);  

  // Generate first data set
  for (i = 0; i < 5; i += 1) {
      var intvalue = Math.floor((Math.random()*5)+1);
    barData.push([ intvalue, i]);
    barLabels.push([i, intvalue + '<br />'+barTicks[i][1] + '<br />n=' + Math.floor((Math.random()*20)+1)]);
  }
                   
  drawBars(container, barData,  barTicks, barLabels);                    
})(document.getElementById("example"));
    
  function drawBars(container, data, barTicks, barlabels) {  
  // Draw Graph
  Flotr.draw(
        container,
        [data],
        {
            colors: ['#EF5205'],
            htmlText: true,
            fontSize: 25,
            grid: {
                outlineWidth: 1,
                outline: 'ws',
                horizontalLines: false,
                verticalLines: true
            },
            bars: {
                show: true,
                horizontal: true,
                shadowSize: 0,
                barWidth: 0.5,
                fillOpacity: 1
            },
            mouse: {
                track: true,
                relative: true,
                trackFormatter: function (pos) {
                    var ret;
                    $.each(barlabels, function (k, v) {
                        if (v[0] == pos.y) {
                            ret = v[1];
                        };
                    });
                    return ret
                }
            },
            xaxis: {
                min: 0,
                max: 5,
                margin: true,
                tickDecimals: 0
            },
            yaxis: {
                ticks: barTicks
            }
        }
      );
   }