multi-group bar chart

by aybalasubramanian

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.js"></script>

CSS

body {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.bar {
  fill: steelblue;
}

JavaScript

damock = [];
damock.push(
  {
    key: "TRX_04_17_7",
    values: [{
      x: "1411525837000",
      y: 1
    }]
  }
);

damock.push(
  {
    key: "TRX_04_14_7",
    values: [
      {
        x: "1411525837000",
        y: 0.6
      },
      {
        x: "1413190418851",
        y: 0.6
      }
    ]
  }
);


damock.push(
  {
    key: "TRX_04_19_7",
    values: [
      {
        x: "1413190418851",
        y: 1
      }
    ]
  }
);

damock.push(
  {
    key: "TRX_04_15_7",
    values: [
      {
        x: "1413190418851",
        y: 0.8
      }
    ]
  }
);

function groupBarChar(data) {
    
    var margin = {top: 50, right: 20, bottom: 50, left: 60};
    var groupSpacing = 6;
    
    function chart(selection) {

        selection.each(function (data) {
          var container = d3.select(this);
          var containerWidth = parseInt(container.style('width'));
          var containerHeight = parseInt(container.style('height'));

          var availableWidth = (containerWidth || 960) - margin.left - margin.right,
              availableHeight = (containerHeight || 400) - margin.top - margin.bottom;
        });
    }
                                
    width = 600 - margin.left - margin.right,
    height = 300 - margin.top - margin.bottom;

var x0 = d3.scaleBand()
    .range([0, width], .1);

var x1 = d3.scaleBand();

var y = d3.scaleLinear()
    .range([height, 0]);

var color = d3.scaleBand()
    .range(["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd"]);

var dateAndTimeFormat = d3.time.format('%m/%d %H:%M');

var xAxis = d3.svg.axis()
    .scale(x0)
    .orient("bottom")
    .tickFormat(function (d) {
        
        return dateAndTimeFormat(new Date(parseInt(d)));
    }).outerTickSize(0);;

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickFormat(function (d) {
        return d * 100 + '%';
    });

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height +...