Database Reference
In-Depth Information
Next, a curved path is drawn to represent the time series held in the
data
variable:
var line = d3.svg.line().interpolate("basis")
.x(function(d,i) { return x(i); })
.y(function(d,i) { return y(d.y); });
var path =
g.append("g").append("path").data([data]).attr("class","line");
Every time an event arrives, the
data
variable is first updated. Then the line
is redrawn, and, finally, the first element of
data
is removed. The reason
the line is redrawn first is because changing the first element modifies the
control point of the line. By hiding this first element behind the y-axis, the
change is not noticeable to the user:
function update() {
g.select(".line").attr("d",line);
}
var i = 0;
$(document).on('data:unsigned',function(event,y) {
data.push({x:i,y:y});
update();
if(data.length > size+2) data.shift();
i++;
});
High-Speed Canvas Charts
The approach used thus far works well when the real-time updates of the
time series are quick, but not that quick. The usual time frame for updates
coming across the wire for a specific metric are usually 10 seconds to a
minute. Updating at the rate of once a second or less becomes problematic
in large systems due to limitations in Scalable Vector Graphics (SVG)
rendering performance.
One alternative would be to render into a Canvas element instead of trying
to use SVG. Canvas elements generally render somewhat faster than their
SVG counterparts, but the styling is not flexible. Instead, standard SVG
