[Solved]-X axis not displaying on bar chart using d3.js-d3.js

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>