updating bar chart data of various lengths on a chart with an x-axis timeline using d3

https://stackoverflow.com/questions/17992915

04-06-2022
|

Question

I'm obviously missing something simple here and looking for some expert input. I've been trying to create a simple bar chart with an x-axis timeline using d3 where the dataset will update upon the click of a button. Each dataset will be of different lengths depending upon user input (ultimately and most prominently the time range selected). In order to address my particular problem, I have extracted just two datasets stored in the variables 'live' and 'test' contained in the code supplied below, also replicated within a jsFiddle: http://jsfiddle.net/jimaroonie/6WBEU/

My problem is that I can't get the bars to update with the values of the new dataset. The data is changing as the length of the dataset determines the width of each bar which clearly works when you click the update button (notice I'm using the ordinal scale to drive this aspect whereas the x-axis uses the time scale format (compare the 'xord' and 'x' variable below)).

So, where am I going wrong? I think I might be missing something with the selection hierarchy, or how the data is being appended to (if at all?). Hopefully someone can point me in the right direction.

HTML contains simple button:

<body>
    <div id="click">
        <button>Update</button>
    </div>
</body>

.CSS used for styling and selection:

body {
font: 12px Arial;
}
h1, h2 {
    font-weight: bold;
}
path {
    stroke-width: 2;
    fill: none;
}
.servers-class {
    stroke: steelblue;
    shape-rendering: crispEdges;
}
.players-class {
    stroke: red;
}
.bar-class {
    fill: lightblue;
}
.axis path, .axis line {
    fill: none;
    stroke: black;
    stroke-width: 1;
    shape-rendering: crispEdges;
}

And finally, JavaScript:

var live = [{"Servers":"10301","Players":"7743","Retrieved":"2013-08-01 03:00:05"},{"Servers":"10301","Players":"8987","Retrieved":"2013-08-01 02:00:05"},{"Servers":"10299","Players":"9973","Retrieved":"2013-08-01 01:00:06"},{"Servers":"10294","Players":"11066","Retrieved":"2013-08-01 00:00:04"},{"Servers":"10291","Players":"12194","Retrieved":"2013-07-31 23:00:05"},{"Servers":"10285","Players":"14094","Retrieved":"2013-07-31 22:00:05"},{"Servers":"10281","Players":"16666","Retrieved":"2013-07-31 21:00:05"},{"Servers":"10274","Players":"19626","Retrieved":"2013-07-31 20:00:11"},{"Servers":"10264","Players":"20595","Retrieved":"2013-07-31 19:00:05"},{"Servers":"10257","Players":"20289","Retrieved":"2013-07-31 18:00:07"},{"Servers":"10246","Players":"19772","Retrieved":"2013-07-31 17:00:04"},{"Servers":"10235","Players":"19025","Retrieved":"2013-07-31 16:00:04"},{"Servers":"10225","Players":"19226","Retrieved":"2013-07-31 15:00:05"},{"Servers":"10217","Players":"18856","Retrieved":"2013-07-31 14:00:04"},{"Servers":"10211","Players":"17571","Retrieved":"2013-07-31 13:00:06"},{"Servers":"10203","Players":"16722","Retrieved":"2013-07-31 12:00:04"},{"Servers":"10195","Players":"16918","Retrieved":"2013-07-31 11:00:04"},{"Servers":"10186","Players":"16160","Retrieved":"2013-07-31 10:00:05"},{"Servers":"10179","Players":"15283","Retrieved":"2013-07-31 09:00:04"},{"Servers":"10218","Players":"13658","Retrieved":"2013-07-31 08:00:07"},{"Servers":"10215","Players":"10549","Retrieved":"2013-07-31 07:00:04"},{"Servers":"10213","Players":"7698","Retrieved":"2013-07-31 06:00:05"},{"Servers":"10210","Players":"6548","Retrieved":"2013-07-31 05:00:05"},{"Servers":"10340","Players":"6603","Retrieved":"2013-07-31 04:00:05"}];

var test = [{"Servers":"10215","Players":"15378","Retrieved":"2013-07-30 09:00:05"},{"Servers":"10207","Players":"12884","Retrieved":"2013-07-30 08:00:04"},{"Servers":"10205","Players":"10113","Retrieved":"2013-07-30 07:00:04"},{"Servers":"10200","Players":"7381","Retrieved":"2013-07-30 06:00:07"},{"Servers":"10195","Players":"6268","Retrieved":"2013-07-30 05:00:04"},{"Servers":"10302","Players":"6477","Retrieved":"2013-07-30 04:00:04"},{"Servers":"10293","Players":"7925","Retrieved":"2013-07-30 03:00:05"},{"Servers":"10288","Players":"9181","Retrieved":"2013-07-30 02:00:05"},{"Servers":"10286","Players":"10238","Retrieved":"2013-07-30 01:00:04"},{"Servers":"10291","Players":"10865","Retrieved":"2013-07-30 00:00:04"},{"Servers":"10290","Players":"11770","Retrieved":"2013-07-29 23:00:05"},{"Servers":"10283","Players":"13600","Retrieved":"2013-07-29 22:00:05"},{"Servers":"10280","Players":"16196","Retrieved":"2013-07-29 21:00:04"},{"Servers":"10274","Players":"18868","Retrieved":"2013-07-29 20:00:05"},{"Servers":"10264","Players":"19884","Retrieved":"2013-07-29 19:00:05"},{"Servers":"10250","Players":"19667","Retrieved":"2013-07-29 18:00:05"},{"Servers":"10240","Players":"18211","Retrieved":"2013-07-29 17:00:05"},{"Servers":"10230","Players":"17748","Retrieved":"2013-07-29 16:00:04"},{"Servers":"10220","Players":"17977","Retrieved":"2013-07-29 15:00:05"},{"Servers":"10211","Players":"17914","Retrieved":"2013-07-29 14:00:06"},{"Servers":"10206","Players":"16742","Retrieved":"2013-07-29 13:00:06"},{"Servers":"10189","Players":"16475","Retrieved":"2013-07-29 12:00:05"},{"Servers":"10175","Players":"16201","Retrieved":"2013-07-29 11:00:05"},{"Servers":"10163","Players":"15738","Retrieved":"2013-07-29 10:00:05"},{"Servers":"10157","Players":"14728","Retrieved":"2013-07-29 09:00:05"},{"Servers":"10201","Players":"12660","Retrieved":"2013-07-29 08:00:06"},{"Servers":"10192","Players":"10393","Retrieved":"2013-07-29 07:00:05"},{"Servers":"5000","Players":"7846","Retrieved":"2013-07-29 06:00:05"},{"Servers":"10184","Players":"6342","Retrieved":"2013-07-29 05:00:05"},{"Servers":"10294","Players":"6716","Retrieved":"2013-07-29 04:00:07"},{"Servers":"10291","Players":"7863","Retrieved":"2013-07-29 03:00:05"},{"Servers":"10289","Players":"8796","Retrieved":"2013-07-29 02:00:06"},{"Servers":"10286","Players":"9748","Retrieved":"2013-07-29 01:00:05"},{"Servers":"10281","Players":"10415","Retrieved":"2013-07-29 00:00:05"},{"Servers":"10275","Players":"11513","Retrieved":"2013-07-28 23:00:04"},{"Servers":"10271","Players":"13356","Retrieved":"2013-07-28 22:00:05"},{"Servers":"10264","Players":"16443","Retrieved":"2013-07-28 21:00:05"},{"Servers":"10255","Players":"19093","Retrieved":"2013-07-28 20:00:05"},{"Servers":"10247","Players":"19162","Retrieved":"2013-07-28 19:00:04"},{"Servers":"10238","Players":"19187","Retrieved":"2013-07-28 18:00:05"},{"Servers":"10232","Players":"17643","Retrieved":"2013-07-28 17:00:04"},{"Servers":"10226","Players":"17413","Retrieved":"2013-07-28 16:00:04"},{"Servers":"10217","Players":"16721","Retrieved":"2013-07-28 15:00:06"},{"Servers":"10204","Players":"15756","Retrieved":"2013-07-28 14:00:05"},{"Servers":"10194","Players":"14853","Retrieved":"2013-07-28 13:00:04"},{"Servers":"10181","Players":"14262","Retrieved":"2013-07-28 12:00:06"},{"Servers":"10177","Players":"13976","Retrieved":"2013-07-28 11:00:04"},{"Servers":"10167","Players":"13895","Retrieved":"2013-07-28 10:00:06"}];

// Set the dimensions of the canvas / graph
var margin = {top: 30, right: 50, bottom: 30, left: 50},
    width = 960 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

// Parse the date / time
var parseDate = d3.time.format.iso.parse;

// Set the ranges
var x = d3.time.scale()
    .range([0, width])
    ;
var y = d3.scale.linear()
    .range([height, 0])
    ;

// Define the axes
var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .ticks(12)
    //.tickFormat(d3.time.format("%H:%M"))
    ;

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

// Define the lines
var serversLine = d3.svg.line()
    .interpolate("step-before")
    .x(function(d) { return x(parseDate(d.Retrieved)); })
    .y(function(d) { return y(d.Servers); });

var playersLine = d3.svg.line()
    .interpolate("basis")
    .x(function(d) { return x(parseDate(d.Retrieved)); })
    .y(function(d) { return y(d.Players); });

// Adds the svg canvas
var chart = d3.select("body")
    .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
    .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    // Scale the range of the data
    x.domain(d3.extent(live, function(d) { return parseDate(d.Retrieved); }));
    y.domain([0, d3.max(live, function(d) { return Math.max(d.Servers, d.Players); })]);

    var xord = d3.scale.ordinal()
        .domain(d3.range(live.length))
        .rangeRoundBands([0, width], 0.05);

    // Display Bar Chart 
    chart.selectAll("container")
            .data(live)
            .enter()
            .append("rect")
            .attr("class", "bar-class")
            .attr("x", function(d) { return x(parseDate(d.Retrieved)); })
            .attr("y", function(d) { return y(d.Servers); })
            .attr("width", xord.rangeBand() )
            .attr("height", function(d) { return height - y(d.Servers); })
            ;

    chart.append("path")
        .attr("class", "players-class")
        .attr("d", playersLine(live));

    // Add the X Axis
    chart.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

    // Add the Y Axis
    chart.append("g")
        .attr("class", "y axis")
        .call(yAxis);

    d3.select("#click")
        .on("click", function() {

        // Scale the range of the data
        x.domain(d3.extent(test, function(d) { return parseDate(d.Retrieved); }));
        y.domain([0, d3.max(test, function(d) { return Math.max(d.Servers, d.Players); })]);

        var xord = d3.scale.ordinal()
            .domain(d3.range(test.length))
            .rangeRoundBands([0, width], 0.05);

        var chart = d3.select("body");

        chart.select(".players-class")
            .attr("d", playersLine(test));

        chart.select(".x.axis")
            .call(xAxis);

        chart.select(".y.axis")
            .call(yAxis);

        var bars = chart.selectAll("rect")
            .data(test);

            bars.enter()
                .append("rect")
                .attr("x", function(d) { return x(parseDate(d.Retrieved)); })
                .attr("y", function(d) { return y(d.Servers); })
                .attr("width", xord.rangeBand() )
                .attr("height", function(d) { return height - y(d.Servers); })
                ;

            bars.transition()
                .duration(750)
                .attr("x", function(d) { return x(parseDate(d.Retrieved)); })
                .attr("y", function(d) { return y(d.Servers); })
                .attr("width", xord.rangeBand() )
                .attr("height", function(d) { return height - y(d.Servers); })
                ;

            bars.exit()
                .remove();

    });

Solution

that's funny. You have the following line inside the 'click' handler:

var chart = d3.select("body");

After that you're effectively inserting the new rect elements into BODY, not SVG.

Licensed under: CC-BY-SA with attribution

Not affiliated with StackOverflow