site logo

Element meter

Element meter, sometimes called gauge is used for graphics, analog like display of simple scalar value. The measured value should be in the known range. Meter element is displayed as a horizontal, a graphic bar, whose length depends on the attribute value. You can set limits, and overrun the limits invokes the change of bar color. The element meter is part of HTML5 specification, and can be handled by Chrome, Opera and Firefox browsers. Browser IE displays the text that is enclosed between the opening and closing tag of this element.

Practical use of meter  element is to show the relevance of search, rating of articles. In case of the intranet is suitable for display of production, technological and laboratory data. The analog values are read much faster and reduce the number of errors of oversight. Digital values are indeed more accurate, but their interpretation requires more attention. Do you choose a table or graph to watch the trend of any variable?

Atributes of element meter

valueSpecifies the "measured" value.
minSpecifies the lower bound of the range. Default is 0.
lowSpecifies the range that is considered to be a "low" value.
highSpecifies the range that is considered to be a "high" value.
maxSpecifies the upper bound of the range. Default is 1.
optimumSpecifies the value that is considered to be the "optimum", or best, value. If this value is higher than the "high" value then it indicates that the higher the value, the better. If it's lower than the "low" mark then it indicates that lower values are better. If it is in between then it indicates that neither high nor low values are good.

When the default range of 0 to 1 is suitable, the only one attribute value have to be specified. When another range is required, attributes min and max have to be specified in addition. The bar length is calculated according to these attributes. Attributes low and high are used to set the limits, when value reachesthe limit, color of bar is changed. According to the specification opening and closing tag of element meter have to be used. Between these tags should be written text that appears in browsers that does not support this element yet.

Attribute optimum is hard to understand. Description, nor practical testing do not improve understanding. After all, Opera does not use this attribute. In Chrome if omitted, the default value of 0 is applied. It would be preferable to add another "alarm" red limits, as is common in industrial applications.

meter  test

Live demonstration of meter  element is probably better than verbal description. Use the sliders to set a combination of attributes and then go through the whole area of value  by lower range element and watch how the color of bar is changed. Behaviour in the Opera browser is simple, is affected only by setting the attributes of low and high. In Chrome attribute optimum is implemented and its settings outside of the limits may cause color change to red. Example above has meaning only for Chrome and Opera browsers, which support the elements meter  and range.


For any serious use of meter  element there is missing the opportunity to view the scale to determine the distance of the measured value and the limits. A simple color change indicating that limits has already been run over is not sufficient, and declasses the usage of this element for second rate and less precise purposes.


The meter  example on left is appended with scale. The scale is created with help of static background image. Such a solution has several drawbacks. For each set of attributes it is necessary to prepare another image. Because each browser renders element slightly different, proposed scale does not fit quite perfect. It would be nice to have possibility specify e.g. value=scale to render scale of meter element.

Bar graph and meter element

Section articles describes several options how to create bar graphs using older HTML specifications. So I was interested in possibility of using a new element meter  for the creation of similar graph. Applied data simulate the performance of the production plan in a few days. The resulting graph is left on the right are screenshots of the graph by browsers.

112.0% 98.4% 97.7% 99.3% 108.2% 95.3% 98.3% 97.9% 100.1% 106.0% 108.4% 105.9% 97.1% 99.3% 102.9% 104.7%
screenshot of element meter in various browsers

To keep unified size of elements across both browsers CSS property border: 0 has to be set. Unfortunately this setting will change the look of element in Opera. Padding property is set so that the single elements in the chart are separated by gap of 1 pixel. Sample code for the graph follow.

<style type="text/css">
meter {height: 10px; width: 200px; border: 0; margin: 1px 0 0 0;}

<meter value=112.0 min=0 max=120 low=100 high=120" optimum=110>112.0</meter>
<meter value= 98.4 min=0 max=120 low=100 high=120" optimum=110> 98.4</meter>
<meter value= 97.7 min=0 max=120 low=100 high=120" optimum=110> 97.7</meter>
<meter value= 99.3 min=0 max=120 low=100 high=120" optimum=110> 99.3</meter>


The new element meter  simplifies charting, but also has its disadvantages. Horizontal orientation is not the best bar graphs. The natural orientation is a vertical graph, where the higher the column is seen as a higher number, the higher the temperature, etc. Bar color is set by browser implementations, and it is not possible to adjust color as needed.

Classic bar graphs are based on the img  tag, where the CSS property position  and height  or width  are set according to the current values from the database of operational data. The properties are calculated by server script and sent to the browser as inline CSS code for each bar of graph. Examples can be found on pages bar graph with help of DIV, or line graph of production plan, or real time bar graph with help of Ajax.

updated 2011-11-30