Reading Time: 3 minutes

I’ve really been interested recently in figuring out how to use HTML5 to create graphs and visualized data. I haven’t quite figured it out, but in the course of things, I stumbled upon the meter element and the range input. So whether we want to show whether we’ve reached the necessary signatures on our petition to consider Breaking Dawn a banned book, or we want to resize the content on a page, I think there’s some practical use. So here’s a little explanation of a JSFiddle I set up to play with them.

Semantics first

Keeping in line with the new sectioning elements I’m considering each graph a unique collection of information. So for that, each whole graph or meter is in an article. HTML5 also allows a new set of headings per sectioning element, so that’s why you see an H1 in the article.

Signatures until Twilight is outlawed

The Meter tag:

So, now that I’ve got my semantic stuff set up, I’m starting off with meter. The purpose of meter is to be a scalar gauge; it’s meant to be an element that says “how much”. It could be part of an application where we might need to indicate inventory, donations needed to get rid of Wikipedia banners, bandwidth, disk space, or awesomeness/ suckitude of a movie based on votes.

I’ll warn you, too. I don’t think meterhas wide support across multiple modern browsers. So Chrome only!

Meter Attributes

• Min and Max are completely arbitrary limits of your meter.
• Low and High are a wee bit interesting. If you’re in Chrome, your fill color is green — but if the value is in the low/high range, then the fill color is yellow. So use Low and high to indicate proximity to a limit.
• value is what determines how much of our meter gets filled. You could have the max and min set in the HTML, but it’s expected that you’ll use a scripting language to change value. Value can be any real number that’s between your max and min.

Scale of Suckitude

	
a broken dyson vaccuum
	
Twilight

So, with the meter, your end result is this:

Scale of Suckitude

• a broken dyson vaccuum
• Twilight

Uses of Meter

I would see the meter working well in web-based applications. The fact that we don’t have many style controls doesn’t make it something that’s meant for impressing any VPs of Marketing. What’s useful is that we can show “how much” — with attributes we can easily manipulate with JavaScript rather than stupid CSS tricks.

A quick way to demo meter

For simplicity sake, you can use the new input type range and sprinkle in a dab o’ jQuery to play with it. I can’t think of any practical reason to tie range directly to meter, outside of trying to demo the two. It’s just easy that they both have min and max attributes.

The Range input:

With a whole bucket of input types, I mention range because it’s a bit like the interactive counterpart of meter; it’s how we would capture scalar data (without using a boatload of jQuery).

Just like with meter, it takes these new attributes of min and max. Another attribute you should add is step. Step lets you set the level of granularity with any positive integer that’s greater than zero. So,be mindful of the purpose of the data for this one. You might step in whole numbers for setting a quantity or maybe a survey. You could step in tenths (.1) if you wanted to resize an object.

Your style opportunities with this are about as robust as they are with meter. The best that I can tell, you can’t control the shape of the knob, the color or feel of the slide, or the background. And watch out for older browsers; it will get rendered as an old, crusty input.

So, leading to the demo, I’ve added two jQuery functions that run on the change() event. I’m a big fan of using ems for every part of a design; so the first function changes the font-size for the container. Since all the child elements were sized with em, the whole thing resizes proportionately (this could be a nifty way to zoom in and out on a page). The fiddle contains another function which ties the meter to the input, but I don’t really consider that having a practical usage in the real world.

$('[name="resize"]').change(function(event){
    var size = $(this).val();
    size = size +"em";
    $('article.meter.graph').css("font-size", size);
});