Database Reference
In-Depth Information
Updating the Dashboard
At the moment, all of the metrics being rendered are simple counters. More
complicated graphical metrics will come later in this chapter, with the next
chapter devoted to aggregated metrics like time-series displays.
To update the counters on the dashboard, they must first be registered
with the application so they can begin to receive data. This is accomplished
through the use of so-called data attributes. Custom data attributes are
an HTML5 innovation that allows arbitrary user attributes to be bound to
various elements of the Document Object Model (DOM).
jQuery and other frameworks provide selectors to query for the presence of
a specific data element. To find all of the
data-counter
elements in the
dashboard, the query looks something like this:
$('*[data-counter]').each(function(i,elt) {
//elt is the document element
});
Because the
mixin
from the last section specifies the metric in the
data-counter
field,thisquerycanbeusedtobindthecountertoacustom
event such that it will update the counter every time the event fires. First,
select each of the counters to bind:
function bindCounters() {
$('*[data-counter]').each(function(i,elt) {
