Delivering Streaming Metrics - Real-Time Analytics - page 322

div(class="canvas-wrap")
canvas(data-canvas-chart="#{id}")
div(class="value-wrap")
h1(data-counter="#{id}")= "--"
h4
span.glyphicon(data-direction="#{id}")
span(data-change="#{id}")= ""
if footer
div.panel-footer= footer
Using this new mixin , the first row of metrics can be converted to the
“chart” mode instead of the “gauge” mode, as in the dashboard/views/
canvas_ex2.jade example:
block content
div(class="container")
div.page-header: h1 Canvas Example 2
div(class="row")
div(class="col-lg-3")
+metricChart("first","Metric 1","My First
Metric")
div(class="col-lg-3")
+metricChart("second","Metric 2","Another
Metric")
div(class="col-lg-6")
+metricChart("third","Metric 3","A Bigger One")
Attaching a different data element to the chart canvases allows them to
be selected and associated with a different drawing method. In this case,
the rendering creates a simple area chart by creating an array of the last
maxValues data elements to be emitted for each counter, as implemented
in dashboard/public/javascripts/canvas.js :
var maxValues = 20;
function drawChart(ctx,values,max) {
//Clear the gauage
ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
var valHeight = ctx.canvas.height/max;