X axis not showing on histogram using d3.js

I have implemented a dynamic group chart using d3.js. His working tone. According to my data, the Y-axis displays TotalOrders. I want to display Months on the x axis. But its not getting display. Here is my code:

    function Groupchart() {
    debugger;
    var w = 500;
    var h = 600;
    var MARGINS = { top: 1, right: 20, bottom: 2, 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(d3.range(dataset.length))
                       .rangeRoundBands([MARGINS.left, w - MARGINS.right], 0.1);
    var x1Scale = d3.scale.ordinal()
                    .domain([0, d3.max(dataset, function (d) { return d.TotalOrders; })])
                    .rangeRoundBands([MARGINS.left, w - MARGINS.right], 0.1);

    var yScale = d3.scale.linear()
                    .domain([0, d3.max(dataset, function (d) { return (d.TotalTicket + 10000); })])
                    .range([h - MARGINS.top, MARGINS.bottom]);
    xAxis = d3.svg.axis().scale(x0Scale).tickSize(5).tickSubdivide(true).orient("bottom");
    yAxis = d3.svg.axis().scale(yScale).tickSize(5).orient("left").tickSubdivide(true);

    var TotalOrders = function (d) {
        return d.TotalOrders;
    };

    var TotalTicket = function (d) {
        return d.TotalTicket;
    };
    var Month = function (d) {
        return d.Month;
    };

    var Average = function (d) {
        return d.Avg;
    };

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

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


    /*Draw X Axis values*/
    svg.append('svg:g')
      .attr('class', 'x axis')
      .attr('transform', 'translate(0,' + (h - MARGINS.bottom) + ')')
      .call(xAxis);

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

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

        .on("mouseover", function (d, i) {
            //Get this bar x/y values, then augment for the tooltip
            var xPosition = parseFloat(x0Scale(i) + x0Scale.rangeBand() / 6);
            var yPosition = 0;
            //Update Tooltip Position & value
            d3.select("#tooltip")
                .style("left", xPosition + "px")
                .style("top", yPosition + "px")
                .select("#cpcVal")
                .text(d.Month);
            d3.select("#tooltip").classed("hidden", false);
        })
        .on("mouseout", function () {
            //Remove the tooltip
            d3.select("#tooltip").classed("hidden", true);
        });

    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 h - yScale(d.TotalTicket);
        })
        .attr("fill", colors[0][1])
        .transition()
        .delay(function (d, i) { return i * 300 })
        .duration(1000)

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


    var legend = svg.append("g")
     .attr("class", "legend")
     //.attr("x", w - 65)
     //.attr("y", 50)
     .attr("height", 100)
     .attr("width", 100)
     .attr('transform', 'translate(-20,50)');

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

    legendRect.enter()
        .append("rect")
        .attr("x", w - 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", w - 52);

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

    svg.selectAll("text")
       .data(dataset, Average)
       .enter()
       .append("text")
       .text(function (d) {
           return(d.Avg);
       })
       .attr("class", "bartext")
       .attr("text-anchor", "middle")
       .attr("x", function (d, i) {
       return x0Scale(i) + x0Scale.rangeBand() / 2;
       })
       .attr("y", function (d) {
           return  yScale(d.TotalTicket) - 10;
       })
      .attr("font-family", "sans-serif")
      .attr("font-size", "15px")
      .attr("fill", "black");
}

      

        
        
        
      

    

Can anyone please me what is the problem?