InigoValentin/www-admin/script/stats.js

function BarGraph(context) {

    var graph = this;
    this.values = [];
    this.labels = [];

    this.setLabels = function(labels){
        this.labels = labels;
    }

    this.setValues = function(values){
        this.values = values;
    }

    this.draw = function () {

        var values = graph.values;
        var barW;
        var barH;
        var barB = 1; // Border
        var ratio;
        var maxH;
        var max;
        var i;

        // Canvas dimensions
        context.canvas.width = graph.width;
        context.canvas.height = graph.height;

        // Width of each bar
        barW = graph.width / values.length - graph.margin * 2;
        maxH = graph.height - 25;

        // Reference height
        var max = 0;
        for (i = 0; i < values.length; i ++) {
            if (values[i] > max) {
                max = values[i];	
            }
        }

        // Loop bars
        for (i = 0; i < values.length; i ++) {

            // Compare with the max value
            barH = maxH * values[i] / max;
            graph.height -= 15;

            // Value
            context.fillStyle = "#003300";
            context.font = "bold 12px sans-serif";
            context.textAlign = "center";
            context.fillText(parseInt(values[i], 10), i * graph.width / values.length + (graph.width / values.length) / 2, graph.height - barH - 3);

            // Bar background (border)
            context.fillStyle = "#003300";
            context.fillRect(graph.margin + i * graph.width / values.length, graph.height - barH, barW, barH);

            // Bar fill
            context.fillStyle = "#ccffcc";
            context.fillRect(graph.margin + i * graph.width / values.length + barB, graph.height - barH + barB, barW - barB * 2, barH - barB * 2);

            // Label
            graph.height += 15;
            context.fillStyle = "#003300";
            context.font = "10px sans-serif";
            context.textAlign = "center";
            context.fillText(graph.labels[i], i * graph.width / values.length + (graph.width / values.length) / 2, graph.height - 5);
        }
    };

  this.width = 450;
  this.height = 150;
  this.margin = 1;
  
}