Home/ Questions/Q 7984051
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T11:08:44+00:00

I’m trying to plot a time series for the last 2 hours, just a

  • 0

I’m trying to plot a time series for the last 2 hours, just a bunch of points with a timestamp and a value. e.g. {time: 1234234553, value: 34}

When a new point arrives I push it onto the end of a list data

and replot everything in the list:

function redraw() 
{
    var TS = new Date().getTime(); // current time stamp
    var T = (60*60*2*1000); // last two hours

    chart.selectAll("rect")
     .data(data)
   .enter().append("rect")
     .attr("x", function(d, i)   { return x(d.time - TS + T); })
     .attr("y", function(d)      { return H - y(d.value); })
     .attr("width", function(d)  { return 2; })
     .attr("height", function(d) { return y(d.value); });
}

But unforunately the point appears on the left of the plot instead of the right and when I look at the source in Firebug for the SVG the entry has a weird x value:

<rect x="function (){}" y="354.9553019925952" width="2" height="45.044698007404804"/>

Can anyone help? Do I need to remove all the plotted data and re-plot it?

Appendix:

In case you need to see x() and y()

var T = (60*60*2*1000); // 1 hurs

var x = d3.scale.linear()
        .domain([0, T])
        .range([0, W]);

var y = d3.scale.linear()
        .domain([d3.min(data, function(d) { return d.value; }), 10])
        .range([0, H]);
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here is a link to step-by-step tutorial how to make your plot.

    Part I, Part II (I guess you read it)

    I think that new rect can go on the left only if you give wrong “x” position.

    This return x(d.time - TS + T); looks fine.
    So I think, problem somewhere in d.time & TS.

    Are you shure that you have timestamps with the same TZ? Difference in 2hr will give such effect. Or may be the “New Point” is not very recent.

    • 0