Cubism own datasource issues

Question

TLDR: Why is there a pause before the page updates, resulting in a small white gap in the graph?

• http://jsbin.com/ABoLaya/1

I recently discovered cubism and was blown away. So I decided my raspberry pi could use some monitoring. I am also new to javascript and all web-related stuff in general, so bear with me.

My own datasource consists of a redis database and webdis which I use to get the data in json format. In redis I store a combination of timestamp and value (timestamp:value) every second, in my example the used physical memory.

So when I query webdis like this:

http://192.168.0.3:7379/zrangebyscore/used_phymem/1382269532/1382269532

I get back this: {"zrangebyscore":["435265536:1382269532"]}

So this part is working great. In another answer here on stackoverflow Mike Bostock explained how Cubism queries for data: Using Other Data Sources for cubism.js. In short there is an initial query for 1440 datapoints (the whole window) and after that only queries for the last 7 datapoints. I logged how Cubism behaves in my code:

http://192.168.0.3:7379/zrangebyscore/used_phymem/1382268969/1382270409 1440 values
http://192.168.0.3:7379/zrangebyscore/used_phymem/1382270398/1382270410 12 values
http://192.168.0.3:7379/zrangebyscore/used_phymem/1382270398/1382270411 13 values
http://192.168.0.3:7379/zrangebyscore/used_phymem/1382270398/1382270412 14 values
http://192.168.0.3:7379/zrangebyscore/used_phymem/1382270398/1382270413 15 values
http://192.168.0.3:7379/zrangebyscore/used_phymem/1382270398/1382270414 16 values
http://192.168.0.3:7379/zrangebyscore/used_phymem/1382270408/1382270415 7 values

As you can see, there is an initial query for 1440 values. But after that there are some queries that I don't understand, before the mentioned queries for 7 datapoints start. Why does cubism query for 12,13,14,15,16 values, all with the same start time?

The result looks like this (notice the gap to the right):

I cannot figure out why there is that window of missing data...

This is my function to query the data:

function getData(metric) {
return context.metric(function(start, stop, step, callback) {
    var values = [];
    start = +start, stop = +stop;

    d3.json("http://192.168.0.3:7379/zrangebyscore/"+metric+"/"+(start/1000) +"/"+ (stop/1000), function(json_data) {
        entries = json_data.zrangebyscore;
        entries.forEach(function(e) {
            values.push(scale(e.split(":")[0]));
        });
        callback(null, values = values.slice(-context.size()));
    });      
}, name);
}

And this is the rest of the code:

var metrics = [ "used_phymem" ];

var context = cubism.context()
    .serverDelay(10 * 1000)
    .step(1 * 1000)
    .size(1440);

var scale = d3.scale.linear()
    .domain([0, 459505664])
    .range([10, 100]);

d3.select("#demo").selectAll(".axis")
    .data(["top", "bottom"])
    .enter().append("div")
    .attr("class", function(d) { return d + " axis"; })
    .each(function(d) { d3.select(this).call(context.axis().ticks(12).orient(d)); });

d3.select("body").append("div")
    .attr("class", "rule")
    .call(context.rule());

d3.select("body").selectAll(".horizon")
    .data(metrics.map(getData))
    .enter().insert("div", ".bottom")
    .attr("class", "horizon")
    .call(context.horizon()
    .extent([0, 100]));

context.on("focus", function(i) {
  d3.selectAll(".value").style("right", i == null ? null : context.size() - i + "px");
});

UPDATE:

I added an example on jsbin that uses random numbers instead of my json data:

http://jsbin.com/ABoLaya/1/

When the page loads, the graph is full of values (as expected), then for a second nothing happens. After that the graph updates every second, but between the initial data, and the rest of the data is a gap.

Answer 1

The cause of the problem appears to be a delay/clock skew on the server. If you add a client delay of 1 second, everything works fine (see http://jsbin.com/iYuceku/1/edit).