score:5

Accepted answer

It's a margin issue. Your effective height is height - margin.top - margin.bottom. I've fixed the example accordingly (with readability improvement).

To use months in ordinal scale you must initialize the scale with, yeah, months. Then use the scale to map an ordinal value to a x-scale value, e.g. x0Scale(d.Month).

function createGroupchart() 
{
  var width  = 500;
  var height = 180;
  var margin = {
    'top'    : 5, 
    'right'  : 20, 
    'bottom' : 20, 
    'left'   : 50 
  };
  var colors = [
    ["TotalTicket", "#377EB8"],
    ["TotalOrders", "#4DAF4A"]
  ];
  var dataset = [
    {"Month": "Jan",   "TotalOrders": 7324, "TotalTicket": 23954, "Year": "2013", "Avg": "10%"},
    {"Month": "Feb",   "TotalOrders": 3738, "TotalTicket": 12319, "Year": "2013", "Avg": "12%"},
    {"Month": "March", "TotalOrders": 4466, "TotalTicket": 15524, "Year": "2013", "Avg": "14%"},
    {"Month": "May",   "TotalOrders": 100,  "TotalTicket": 200,   "Year": "2013", "Avg": "50%"},
    {"Month": "Oct",   "TotalOrders": 109,  "TotalTicket": 2000,  "Year": "2013", "Avg": "9%" }
  ];

  var x0Scale = d3.scale.ordinal()
    .domain(dataset.map(function(d)
    {
      return d.Month;
    }))
    .rangeRoundBands([margin.left, width - margin.right], 0.1);

  var x1Scale = d3.scale.ordinal()
    .domain([0, d3.max(dataset, function(d) 
    { 
      return d.TotalOrders; 
    })])
    .rangeRoundBands([margin.left, width - margin.right], 0.1);

  var yScale = d3.scale.linear()
    .domain([0, d3.max(dataset, function(d) 
    { 
      return (d.TotalTicket + 10000); 
    })])
    .range([height - margin.top - margin.bottom, 0]);

  var xAxis = d3.svg.axis()
    .scale(x0Scale)
    .tickSize(5)
    .tickSubdivide(true)
    .orient("bottom");

  var yAxis = d3.svg.axis()
    .scale(yScale)
    .tickSize(5)
    .orient("left")
    .tickSubdivide(true);

  var commaFormat = d3.format(',');


  // SVG element
  var svg = d3.select("#chart")
    .append("svg")
    .attr("width",  width)
    .attr("height", height)
    .attr("margin", margin);

  // Draw X Axis values
  svg.append('g')
    .attr('class', 'x axis')
    .attr('transform', 'translate(0,' + (height - margin.bottom - margin.top) + ')')
    .call(xAxis);

  // Draw Y Axis values
  svg.append('g')
    .attr('class', 'y axis')
    .attr('transform', 'translate(' + margin.left + ',0)')
    .call(yAxis);

  // Graph Bars
  var sets = svg.selectAll(".set")
    .data(dataset)
    .enter().append("g")
    .attr("class", "set")
    .attr("transform", function(d) 
    {
      return "translate(" + x0Scale(d.Month) + ",0)"
    });

  sets.append("rect")
    .attr("class", "TotalTicket")
    .attr("width", x0Scale.rangeBand() / 2)
    .attr("y", function(d) 
    {
      return yScale(d.TotalTicket);
    })
    .attr("x", x0Scale.rangeBand() / 2)
    .attr("height", function(d) 
    {
      return height - margin.top - margin.bottom - yScale(d.TotalTicket);
    })
    .attr("fill", colors[0][1]);

  sets.append("rect")
    .attr("class", "TotalOrders")
    .attr("width", x0Scale.rangeBand() / 2)
    .attr("y", function(d) 
    {
      return yScale(d.TotalOrders);
    })
    .attr("height", function(d) 
    {
      return height - margin.top - margin.bottom - yScale(d.TotalOrders);
    })
    .attr("fill", colors[1][1])


  var legend = svg.append("g")
    .attr("class", "legend")
    .attr("height", 100)
    .attr("width", 100)
    .attr('transform', 'translate(-30,20)');

  var legendRect = legend.selectAll('rect').data(colors);

  legendRect.enter()
    .append("rect")
    .attr("x", width - 65)
    .attr("width", 10)
    .attr("height", 10);

  legendRect
    .attr("y", function(d, i) 
    {
      return i * 20;
    })
    .style("fill", function(d) 
    {
      return d[1];
    });

  var legendText = legend.selectAll('text').data(colors);

  legendText.enter()
    .append("text")
    .attr("x", width - 52);

  legendText
    .attr("y", function(d, i) 
    {
      return i * 20 + 9;
    })
    .text(function(d) 
    {
      return d[0];
    });

  svg.selectAll("text")
    .data(dataset, function(d)
    {
      return d.Avg;
    })
    .enter()
    .append("text")
    .text(function(d) 
    {
      return d.Avg;
    })
    .attr("class", "bartext")
    .attr("text-anchor", "middle")
    .attr("x", function(d) 
    {
      return x0Scale(d.Month) + x0Scale.rangeBand() / 2;
    })
    .attr("y", function(d) 
    {
      return  yScale(d.TotalTicket) - 10;
    })
    .attr("font-family", "sans-serif")
    .attr("font-size", "15px")
    .attr("fill", "black");
}
createGroupchart()
svg .axis path, .axis line {
  fill            : none;
  stroke          : #000;
  shape-rendering : crispEdges;
}

svg .x.axis path {
  display : none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id='chart'></div>


Related Query

More Query from same tag