How to create a dynamic bar chart in d3.js?

Question

Here is a fiddle for full app: http://jsfiddle.net/RG4Eg/3/

enter image description here

Here is the javascript:

var HU = (function() {

    var data = [
        {"time": "13:24:20", "level_1": "5553", "level_2": "4682", "level_3": "1005"},
        {"time": "14:24:20", "level_1": "6553", "level_2": "5682", "level_3": "2005"},
        {"time": "15:24:20", "level_1": "7553", "level_2": "6682", "level_3": "3005"},
        {"time": "16:24:20", "level_1": "8553", "level_2": "7682", "level_3": "3131"},
        {"time": "17:24:20", "level_1": "9953", "level_2": "5500", "level_3": "5005"},
        {"time": "18:24:20", "level_1": "8565", "level_2": "7682", "level_3": "6005"},
        {"time": "19:24:20", "level_1": "7753", "level_2": "4546", "level_3": "4405"}
    ];

    init = function() {

        var margin = {
                top: 10, 
                right: 10, 
                bottom: 30, 
                left: 50
            },
            width = 950 - margin.left - margin.right,
            height = 500 - margin.top - margin.bottom;

            var parseDate = d3.time.format("%H:%M:%S").parse;

            var x = d3.time.scale()
                .domain(d3.extent(data, function(d) { return parseDate(d.time); }))
                .range([0, width]);

            var y = d3.scale.linear()
                .domain([0, d3.max(data, function(d) { return d.level_1; })])
                .range([height, 0]);

            var xAxis = d3.svg.axis()
                .scale(x)
                .orient("bottom")
                .tickFormat(d3.time.format(("%H:%M:%S")));

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

            var svg = d3.select("#chart")
                .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 + ")");

            svg.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0, " + height + ")")
                .call(xAxis);

            svg.append("g")
                .attr("class", "y axis")
                .call(yAxis);

            var bars = svg.selectAll("rect")
                .data(data)
                .enter();
            bars.append("rect")
                .attr("x", function(d) { return x(parseDate(d.time)); })
                .attr("y", function(d) { return y(d.level_1); })
                .attr("width", 15)
                .attr("height", function(d) { return height - y(d.level_1); })
                .style("fill", "steelblue");
            bars.append("rect")
                .attr("x", function(d) { return x(parseDate(d.time)); })
                .attr("y", function(d) { return y(d.level_2); })
                .attr("width", 15)
                .attr("height", function(d) { return height - y(d.level_2); })
                .style("fill", "green");
            bars.append("rect")
                .attr("x", function(d) { return x(parseDate(d.time)); })
                .attr("y", function(d) { return y(d.level_3); })
                .attr("width", 15)
                .attr("height", function(d) { return height - y(d.level_3); })
                .style("fill", "red");

            };

    return {
        init: init
    };

})();

HU.init();

As each second ticks, I need the column furthest left should add a new data point pushing previous data points to the right.

I also want to make a dynamic change to data itself for each second, such as:

each level_1 datapoint = current level_1 val + (random value between +7% and -7% of current level_1 val)
each level_2 random 10-30% off that value
each level_3 random 10-30% off the level_2 value

How could I accomplish that?

@Lars Kotthoff: I have made some changes: jsfiddle.net/RG4Eg/6. For some reason though not all redrawLevel_N functions get triggered. How could I also make it triggered for 60 seconds, like to call those functions 60 times in a minute? Thanks in advance. — Kanan Farzali
– Kanan Farzali, Commented Oct 6, 2013 at 20:05

Phuoc Do · Accepted Answer · 2013-10-07 05:35:09Z

1

You can use setInterval(function, period) to perform drawing of each level. You can do something like this:

drawLevel = function(level) {
  var random;

  svg.selectAll("rect")
    .data(data)
    .transition()
    .duration(1000)
    .attr("y", function(d) { 
        var min = d.level[level] - (d.level[level-1] * 0.03);
        var max = d.level[level] - (d.level[level-1] * 0.01);
        random = Math.floor(Math.random() * (max - min + 1) + min);

        return height - y(random) - .5; 
    })
    .attr("height", function(d) { 
        return y(random); 
    });
}

drawLevel(1);
var l = 2;
setInterval(function() {
  drawLevel(l);
  l = l + 1;
}, 1000);

Here's an example with setInterval().

http://vida.io/documents/kZ2RzrYwZyvWTny2X

answered Oct 7, 2013 at 5:35

Phuoc Do

1,34410 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Worm Over a year ago

I can't see content of the link. Could you please post it somewhere like JSFiddle? Cheers

Collectives™ on Stack Overflow

How to create a dynamic bar chart in d3.js?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related