Database Reference
In-Depth Information
based on the current value and the maximum observed value for this
particular metric. If the gauge was known to have a finite range, this
maximum value could be set to the top of the range instead.
Thisisthenattachedtothedataeventstoupdatethegaugebackgroundeach
time the metric itself is adjusted:
var max = 100;
$(document).on('data:'+name,function(event,data) {
if(data > max) max = data;
drawGauge(ctx,data,max,dims);
});
The end result of adding this to the original example dashboard is shown in
Figure 7.5 . Each element now has a gauge rendering behind it that updates
each time the metric changes.
Figure 7.5
Another example of using the Canvas would be to draw a more traditional
chart in the background of the metric. To mix these two types of
visualizations in the same dashboard can be accomplished with a second
mixin designed to handle charts, such as the one found in dashboard/
views/canvas_ex2.jade :
mixin metricChart(id,title,footer)
div(class="panel panel-default",id="#{id}-metric" )
if title
div.panel-heading: h3.panel-title= title
div(class="panel-body metric")
 
Search WWH ::




Custom Search