drawbars

drawbars.js

define(function(require) {
    'use strict';

    var d3 = require('d3');

    return function (keys, values, keyfmt, valfmt, el) {

        /* Init defaults */
        var chart,
            width = 800,
            bar_height = 15,
            rx = 3,
            ry = 3,
            x,
            y,
            left_width = 120,
            gap = 2,
            height = bar_height * keys.length;


        /* Append SVG object */
        chart = d3.select(el)
          .append('svg')
          .attr('class', 'chart')
          .attr('width', left_width + width + 40)
          .attr('height', (bar_height + gap * 2) * keys.length + 30)
          .append("g")
          .attr("transform", "translate(10, 20)");

        x = d3.scale.linear()
           .domain([0, d3.max(values)])
           .range([0, width]);

        y = d3.scale.ordinal()
          .domain(values)
          .rangeBands([0, (bar_height + 2 * gap) * keys.length]);

        chart.selectAll("rect")
          .data(values)
          .enter().append("rect")
          .attr("x", left_width)
          .attr("y", function(d) { return y(d) + gap; })
          .attr("ry", rx)
          .attr("xy", ry)
          .attr("width", x)
          .attr("height", bar_height);

        chart.selectAll(".rule")
          .data(x.ticks(d3.max(keys)))
          .enter().append("text")
          .attr("class", "rule")
          .attr("x", function(d) { return x(d) + left_width; })
          .attr("y", 0)
          .attr("dy", -6)
          .attr("text-anchor", "middle")
          .attr("font-size", 10)
          .text(String);

        chart.selectAll("text.score")
          .data(values)
          .enter().append("text")
          .attr("x", function(d) { return x(d) + left_width; })
          .attr("y", function(d, i){ return y(d) + y.rangeBand()/2; } )
          .attr("dx", -5)
          .attr("dy", ".36em")
          .attr("text-anchor", "end")
          .attr('class', 'score')
          .text(valfmt);

        chart.selectAll("text.name")
          .data(keys)
          .enter().append("text")
          .attr("x", left_width / 2)
          .attr("y", function(d, i){ return y(d) + y.rangeBand()/2; } )
          .attr("dy", ".36em")
          .attr("text-anchor", "middle")
          .attr('class', 'name')
          .text(keyfmt);


        chart.selectAll("rect")
          .data(values)
          .enter().append("rect")
          .attr("x", left_width)
          .attr("y", function(d) { return y(d) + gap; })
          .attr("width", x)
          .attr("height", bar_height);

    }
});

gistfile1.js

 var request = xhr({method: 'POST',  path: '/', data: [this.lowstate]})
 .get('return').get(0).then(function(result) {
     var keys = [],
         values= [];

     Object.keys(result).forEach(function(val) {
         keys.push(val);
         //values.push(result[val]['1-min']);
         values.push(result[val]);
     });

     var valfmt = function(d) {
         return String(parseInt(d/60/60/24));
     }
     var keyfmt = function(d) {
         return String(d.split('.')[0]);
     }
     var el = document.querySelector('.main');
     // empty the node
     while (el.firstChild) {
         el.removeChild(el.firstChild);
     }

     drawbars(keys, values, keyfmt, valfmt, '.main');
     that.xtag.inprogress = false;
 });

gistfile2.css

.chart {
    margin: 5px;
}

.chart rect {
    stroke: white;
    fill: rgb(3, 169, 219);
}

.chart text {
    fill: white;
}

.chart text.name {
    fill: #000;
}

.chart line {
    stroke: #c1c1c1;
}

.chart .rule {
    fill: #000;
}

/* removed the while stroke as we don't need it anymore */
.chart rect {
  stroke: none;
}

/* a bit of hovering effect for each bar */
.chart rect:hover {
  fill: #64707D;
}