Q: D3.js bar charts not refreshing Edit: Thanks to musically_um below my charts now "refresh" but the result is bars hovering over / below the xaxis. See images below:
PAGE LOAD: 

Hit Customer John Doe from ACT and the chart changes to this:

The JSON data for PAGE LOAD is below, see there is no max_energy negative number:
   [{"xaxis":"6","max_energy":"98.019","max_efficiency":"25.797"},{"xaxis":"7","max_energy":"82.073","max_efficiency":"21.596"},{"xaxis":"8","max_energy":"9.503","max_efficiency":"2.503"},{"xaxis":"9","max_energy":"17.502","max_efficiency":"4.603"},... more data ...]

The JSON data for John Doe from ACT is below too, see there is no max_energy negative number also:
[{"xaxis":"6","max_energy":"22.696","max_efficiency":"5.973"},{"xaxis":"7","max_energy":"23.250","max_efficiency":"6.118"},{"xaxis":"8","max_energy":"2.692","max_efficiency":"0.709"},{"xaxis":"9","max_energy":"4.958","max_efficiency":"1.304"},... more data ...]

Why are the charts refreshing like this? Page can be found here if you have the time. Thanks!

ORIGINAL QUESTION:
The 5 charts load OK on page load with default data pulled from MySQL on a server side script.
I have selectors on the pge such that the user can click on one and new data will load into the charts. This is the piece not working.
here's my HTML
<svg id="daychart"></svg>
<svg id="weekchart"></svg>
<svg id="monthchart"></svg>
<svg id="yearchart"></svg>
<svg id="lifechart"></svg>
<div id="P100023" onclick="MenuSelect(this.id);">P100023</div>
<div id="C120036" onclick="MenuSelect(this.id);">C120036</div>
<div id="C120031" onclick="MenuSelect(this.id);">C120031</div>
<div id="C120048" onclick="MenuSelect(this.id);">C120048</div>
<div id="C120033" onclick="MenuSelect(this.id);">C120033</div>

here's my JS code:
jQuery(document).ready(function () {
    CreateBarChart("/myphp/data.php?var=PDAY&id=P100023", "#daychart");
    CreateBarChart("/myphp/data.php?var=PWEEK&id=P100023", "#weekchart");
    CreateBarChart("/myphp/data.php?var=PMONTH&id=P100023", "#monthchart");
    CreateBarChart("/myphp/data.php?var=PYEAR&id=P100023", "#yearchart");
    CreateBarChart("/myphp/data.php?var=PLIFE&id=P100023", "#lifechart");
});

function CreateBarChart(url, divid) {

    var margin = {
        top: 20,
        right: 0,
        bottom: 30,
        left: 30
    },
    width = 838 - margin.left - margin.right,
        height = 300 - margin.top - margin.bottom;

    var x = d3.scale.ordinal()
        .rangeRoundBands([0, width], .1);

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

    var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom");

    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left")
        .ticks(10);

    var svg = d3.select(divid)
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    d3.json(url, function (error, data) {
        data.forEach(function (d) {
            d.max_energy = +d.max_energy;
        });

        x.domain(data.map(function (d) {
            return d.xaxis;
        }));
        y.domain([0, d3.max(data, function (d) {
            return d.max_energy;
        })]);

        svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis)
            .append("text")
            .attr("transform", "rotate(0)")
            .attr("y", 23)
            .attr("x", 340)
            .attr("dy", ".71em")
            .style("text-anchor", "bottom")
            .text("Time / Date / Month / Year");

        svg.append("g")
            .attr("class", "y axis")
            .call(yAxis)
            .append("text")
            .attr("transform", "rotate(0)")
            .attr("y", -15)
            .attr("x", -25)
            .attr("dy", ".71em")
            .style("text-anchor", "top")
            .text("Energy - KWh");

        svg.selectAll(".bar")
            .data(data)
            .enter().append("rect")
            .attr("class", "bar")
            .attr("x", function (d) {
            return x(d.xaxis);
        })
            .attr("width", x.rangeBand())
            .attr("y", function (d) {
            return y(d.max_energy);
        })
            .transition().delay(function (d, i) {
            return i * 10;
        }).duration(10)
            .attr("height", function (d) {
            return height - y(d.max_energy);
        });

    });
};

function updateData(url, divid) {

    var margin = {
        top: 20,
        right: 0,
        bottom: 30,
        left: 30
    },
    width = 838 - margin.left - margin.right,
        height = 300 - margin.top - margin.bottom;

    var x = d3.scale.ordinal()
        .rangeRoundBands([0, width], .1);

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

    var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom");

    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left")
        .ticks(10);

    // Get the data again
    d3.json(url, function (error, data) {
        data.forEach(function (d) {
            d.max_energy = +d.max_energy;
        });

        // Scale the range of the data again 
        x.domain(data.map(function (d) {
            return d.xaxis;
        }));
        y.domain([0, d3.max(data, function (d) {
            return d.max_energy;
        })]);

        var svg = d3.select(divid)

        // Make the changes
        svg.selectAll(".bar") // change the bar
        .data(data) // Update the data within.
        // No `.enter()` and `.exit()` phase.
        .transition()
            .duration(750)
            .attr("x", function (d) {
            return x(d.xaxis);
        })
            .attr("y", function (d) {
            return y(d.max_energy);
        });

        svg.select(".x.axis") // change the x axis
        .transition()
            .duration(750)
            .call(xAxis);

        svg.select(".y.axis") // change the y axis
        .transition()
            .duration(750)
            .call(yAxis);
    });
}

function MenuSelect(divid) {

    switch (divid) {
        case "P100023":
            updateData("/myphp/data.php?var=PDAY&id=P100023", "#daychart");
            updateData("/myphp/data.php?var=PWEEK&id=P100023", "#weekchart");
            updateData("/myphp/data.php?var=PMONTH&id=P100023", "#monthchart");
            updateData("/myphp/data.php?var=PYEAR&id=P100023", "#yearchart");
            updateData("/myphp/data.php?var=PLIFE&id=P100023", "#lifechart");
            break;
        case "C120036":
            updateData("/myphp/data.php?var=CDAY&id=C120036", "#daychart");
            updateData("/myphp/data.php?var=CWEEK&id=C120036", "#weekchart");
            updateData("/myphp/data.php?var=CMONTH&id=C120036", "#monthchart");
            updateData("/myphp/data.php?var=CYEAR&id=C120036", "#yearchart");
            updateData("/myphp/data.php?var=CLIFE&id=C120036", "#lifechart");
            break;
        case "C120031":
            updateData("/myphp/data.php?var=CDAY&id=C120031", "#daychart");
            updateData("/myphp/data.php?var=CWEEK&id=C120031", "#weekchart");
            updateData("/myphp/data.php?var=CMONTH&id=C120031", "#monthchart");
            updateData("/myphp/data.php?var=CYEAR&id=C120031", "#yearchart");
            updateData("/myphp/data.php?var=CLIFE&id=C120031", "#lifechart");
            break;
        case "C120048":
            updateData("/myphp/data.php?var=CDAY&id=C120048", "#daychart");
            updateData("/myphp/data.php?var=CWEEK&id=C120048", "#weekchart");
            updateData("/myphp/data.php?var=CMONTH&id=C120048", "#monthchart");
            updateData("/myphp/data.php?var=CYEAR&id=C120048", "#yearchart");
            updateData("/myphp/data.php?var=CLIFE&id=C120048", "#lifechart");
            break;
        case "C120033":
            updateData("/myphp/data.php?var=CDAY&id=C120033", "#daychart");
            updateData("/myphp/data.php?var=CWEEK&id=C120033", "#weekchart");
            updateData("/myphp/data.php?var=CMONTH&id=C120033", "#monthchart");
            updateData("/myphp/data.php?var=CYEAR&id=C120033", "#yearchart");
            updateData("/myphp/data.php?var=CLIFE&id=C120033", "#lifechart");
            break;
        default:
    };
};


A: You are not updating the data of the selection while updating the graph anywhere. Try this:
   // Select the section we want to apply our changes to
    var svg = d3.select(divid)

    // Make the changes
    svg.selectAll(".bar") // change the bar
    .data(data)           // Update the data within.
                          // No `.enter()` and `.exit()` phase.
    .transition()
    .duration(750)
        .attr("x", function (d) {
        return x(d.xaxis);
    })
        .attr("y", function (d) {
        return y(d.max_energy);
    });

    svg.select(".x.axis") // change the x axis
    .transition()
    .duration(750)
        .call(xAxis);

    svg.select(".y.axis") // change the y axis
    .transition()
    .duration(750)
        .call(yAxis);


A: On the layout question, from the picture it looks like you are updating the height of the bars, but not their y-position.  Since the y-position for an SVG rect is always the top of the rectangle, it also needs to be changed when you change the data.
Interestingly, in the code you originally posted you are updating the y-position but not the height.  I take it you changed that?  Either way, this is what you need:
// Make the changes
svg.selectAll(".bar") // change the bar
.data(data) // Update the data within.
// No `.enter()` and `.exit()` phase.
.transition()
    .duration(750)
    .attr("x", function (d) {
    return x(d.xaxis);
})
    .attr("y", function (d) {
    return y(d.max_energy);
})
    .attr("height", function (d) {
    return height - y(d.max_energy);
});

