CODEWITHSUNDEEP
javascriptsvgd3.jsnvd3.js
fenec
fenec

Reputation: 5806

updating a line graph in d3 is not working

i am trying to update a line graph and it is not throwing any error but it is also not updating the graph.

i am deleting a point and adding a new one with an incremented rate and incremented created_at date by a second(trying to follow http://bl.ocks.org/benjchristensen/1148374)

function redrawWithoutAnimation() {

    for (var i in chart_data) {
        linedata = chart_data[i];
        //delete first element of array
        linedata.points.reverse().shift();
        //create a new point
        rate = linedata.points[0].rate + 1;
        created_at = linedata.points[0].created_at + 6000;
        new_point = {};
        new_point.rate = rate;
        new_point.created_at = created_at;
        linedata.points.push(new_point);
        console.log(linedata);

    }

    // static update without animation
    svg.selectAll("path")
        .data([linedata.points]); // set the new data
    line(linedata.points); // apply the new data values
}

redrawWithoutAnimation();
setInterval(function () {
    redrawWithoutAnimation();
}, 8000);

here is my code http://jsfiddle.net/yr2Nw/8/

Upvotes: 2

Views: 938

Answers (2)

reblace
reblace

Reputation: 4195

Working fiddle: http://jsfiddle.net/reblace/GsaGb/1

There's a few issues here...

First, you were updating all the chart_data in the for loop, but outside the loop, you were only trying to update the line still stored in the linedata variable after loop execution. You should try to avoid having variables with greater scope than they need. It can lead to bugs like this one:

svg.selectAll("path").data([linedata.points]);
line(linedata.points);

You should instead use D3's data joining to rejoin the new data to all the paths at once declaratively like so:

linesGroup.selectAll("path")
    .data(chart_data)
    .attr("d", function(d){ return line(d.points); });

What that code's doing is it's selecting the paths and then joining each of them to the chart_data elements and then binding the appropriate line generator to the "d" attribute for the appropriate path.

Then, you need to update your x axis and y axis otherwise the plot will just shoot off the drawn area. This code is updating the domains and then rebinding the axes to the dom elements so they redraw:

xAxis.scale().domain([ 
    d3.min(chart_data, function (c) { return d3.min(c.points, function (v) { return v.created_at; }); }),
    d3.max(chart_data, function (c) { return d3.max(c.points, function (v) { return v.created_at; }); })
]);

yAxis.scale().domain([
    0,
    d3.max(chart_data, function (c) { return d3.max(c.points, function (v) { return v.rate; }); })
]);

svg.select(".x.axis").call(xAxis);
svg.select(".y.axis").call(yAxis);

There were a few other bugs I fixed them in the Fiddle. For example, you need to calculate the time for the new point based on the last element in the array, not the first, otherwise the line can't interpolate properly since its no longer a continuous function... and this is a bit more concise way to do your line updates:

for (var i=0; i<chart_data.length; i++) {
    linedata = chart_data[i];
    //delete first element of array
    var removedPoint = linedata.points.shift();

    //create a new point
    var lastpoint = linedata.points[linedata.points.length-1];
    var new_point = {
        rate: removedPoint.rate,
        created_at: lastpoint.created_at + 6000
    };
    linedata.points.push(new_point);
}

Also note that you shouldn't use the for(var in) loop for Arrays, that's for iterating over the properties in an object.

There's still some issues, but I think this should help get you over the hurdle you were stuck on. Anyways, it looks cool in action!

Upvotes: 2

sam
sam

Reputation: 2486

Fine fenac.. You facing so many problems since your data is not in good format for your requirements..

as per http://bl.ocks.org/benjchristensen/1148374 The x-axis data must be (data[] (data array))

Your data is something like this

[objects,object,object] where each object holds one element of xaxis value.. so the pushing and shifting is not possible..

try to change the format of the data (linedata.points) to an array (data[]) and try it out sure it works..

You just need to put all the values in linedata.points into an array data[] and use this data[] to animate your line..

Since yours the multiline.. you need to create 2D array and must pass them accordingly...

Cheers..

I updated your jsfiddle 

setInterval(function () {
    console.log(linedata.points);
    var v = linedata.points.shift(); // remove the first element of the array
linedata.points.push(v); // add a new element to the array (we're just taking the number we just shifted off the front and appending to the end)
    redrawWithoutAnimation();
}, 3000);

http://jsfiddle.net/yr2Nw/9/

But still it wont works till you do that work...

Personal Suggestion: First Try with single line graph then go with looping for multiline...

Upvotes: 2

Related Questions