Delivering Streaming Metrics - Real-Time Analytics - page 323

var valWidth = ctx.canvas.width/(maxValues-1);
if(values.length < 2) return;
ctx.beginPath();
ctx.moveTo(0,ctx.canvas.height);
for(var i=0;i<values.length;i++) {
ctx.lineTo(i*valWidth,ctx.canvas.height -
values[i]*valHeight);
}
ctx.lineTo(valWidth*(values.length-1),ctx.canvas.height);
ctx.fillStyle = "#ccc";
ctx.fill();
}
Finally, this draw method is executed after pushing each element onto the
data array, producing Figure 7.6 :
$('*[data-canvas-chart]').each(function(i,elt) {
fixup(elt);
var name = $(elt).attr("data-canvas-chart");
var ctx = elt.getContext("2d");
var chart = [];
var max = 100;
$(document).on('data:'+name,function(event,data) {
if(data > max) max = data;
chart.push(data);
if(chart.length > maxValues) chart.shift();
drawChart(ctx,chart,max);
});
});