site logo

Element meter

Element meter, někdy zvaný gauge slouží pro grafické, analogové zobrazení jednoduché, skalární hodnoty, která se pohybuje v předem známém rozsahu. Je součástí specifikace HTML5, zobrazení zvládají browsery Chrome, Opera a Firefox. Browser IE zobrazí jen číselný údaj, který je uzavřen mezi otevírací a zavírací tag tohoto prvku. Prvek meter je zobrazen jako vodorovný, grafický sloupec, jehož délka závisí na atributu value. Je možné nastavit limity, překročení limitů vede k automatické změně barvy sloupce.

Praktické použití je pro zobrazení relevance vyhledávání, hodnocení článků. V případě intranetu je vhodné pro zobrazení výrobních, technologických a laboratorních dat. Analogové hodnoty se čtou mnohem rychleji a snižují počet chyb z přehlédnutí. Digitální hodnoty jsou sice přesné, ale jejich interpretace vyžaduje více pozornosti. Pro sledování trendu nějaké veličiny si zvolíte tabulku nebo graf?

Atributy elementu meter

atributpopis
valueSpecifikuje měřenou hodnotu.
minSpecifikuje dolní hodnotu rozsahu. Defaultní hodnota je 0.
lowSpecifikuje rozsah, který je považován jako "nízká" hodnota.
highSpecifikuje rozsah, který je považován jako "vysoká" hodnota.
maxSpecifikuje horní hodnotu rozsahu. Defaultní hodnota je 1.
optimum Specifikuje hodnotu, která je považována za optimální, nebo nejlepši. Pokud je optimum vyšší než hodnota high, je indikováno, že vyšší hodnota je lepší. Pokud je optimum nižší než low, pak nižší hodnoty jsou lepší. Když je optimum mezi low a high, hodnoty low a high jsou indikovány jako špatné.

Když vám vyhovuje defaultní rozsah 0 až 1, jedinné co musíme použít je atribut value. Když chceme použít jiný rozsah, musíme nový rozsah definovat pomocí atributů min a max. Z nových hodnot je vypočtena délka sloupce. Atributy low a high použijeme pro nastavení limitů, hodnoty vně limitů jsou pak barevně odlišeny. Podle specifikace musíme použít otevírací i zavírací tag elementu meter. Mezi těmito tágy je vhodné napsat text, který se zobrazí v prohlížeči, který tento element nepodporuje.

Popis atributu optimum je obtížně pochopitelný, ani jeho praktické testování nezlepší porozumění. Chrome a Opera, pokud je atribut vynechán uplatní defaultní hodnotu 0. Asi by bylo jednodušší přidat další atributy pro "alarmové", červené limity, tak jako je běžné v průmyslových aplikacích.

atributhodnotanastavení
low2
high7
optimum5
meter  test
value5

Praktická ukázka prvku meter  je asi lepší než slovní popis. Pomocí jezdců prvků range  nastavte kombinaci atributů a pak projeďte celý rozsah hodnot value  dolnim prvkem range a pozorujte jak se mění barva prvku. Ukázka má význam jen pro browsery, které zvládají prvky meter  i range.

Pokus použít vlastnosti CSS pro nastavení barvy sloupce či pozadí, nebo změnit barevný gradient na čistou, jednoduchou barvu nebyly úspěšné. Nepodařilo se nastavit vertikální orientaci. Celkový dojem je značně nepovedený návrh jinak potřebného tágu, především pro průmyslové aplikace.

Měřtko

Pro jakékoli vážnější využití prvku meter  chybí možnost zobrazit měřítko určující vzdálenost měřené hodnoty od limitů. Prostá změna barvy oznamující, že již došlo k překročení limitů není dostatečná a odsuzuje použití tohoto prvku pro druhořadné a méně přesné účely.

test

Na ukázce vlevo jsem se pokusil vytvořit pomocné měřítko pomocí statického obrázku na pozadí. Takové řešení má řadu nevýhod. Pro každé nastavení atributů je nutné připravit jiný obrázek a zejména různé browsery vykreslí prvek poněkud jinak a navržené měřítko není úplně přesné. Např. value=scale by mohlo vykreslit stupnici. To by ovšem vyžadovalo změnu specifikace.

Využití pro tvorbu grafů

V sekci články byla popsána řada možností jak vytvořit sloupcové grafy s využitím starších specifikací HTML. Proto mě zajímala možnost použití nového prvku pro tvorbu podobných grafů. Použitá data simulují plnění plánu výroby za několik dní. Výsledný graf je vlevo, vpravo jsou screenshoty grafu podle browserů.

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 elementu meter v různých browserech

Aby vnější rozměry prvků meter  v grafu byly stejné v obou browserech je nutné nastavit vlastnost border: 0. Vlastnost padding je nastavena tak, aby mezi jednotlivými prvky grafu vznikla oddělovací mezera 1 pixel. Ukázka části kódu pro graf následuje.

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

<body>
...
<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>
...
</div>

</body>
</html>

Nový prvek meter  zjednoduší tvorbu grafů, ale má i své nevýhody. Vodorovná orientace není pro sloupcové grafy nejvýhodnější. Přirozená orientace je svislý graf, kde výšší sloupec je chápán jako vyšší množství, vyšší teplota ap. Barva sloupce je dána implementací v browseru a není ji možné nastavit podle potřeby.

Klasické sloupcové grafy vycházejí z tagu img, kterému nastavíme CSS vlastnosti position a height, nebo width podle aktuálních hodnot z databáze provozních dat. Výpočet provede serverový skript a výsledek pošle do prohlížeče v podobě individuálního nastavení CSS vlastností pro jednotlivé sloupce. Příklady najdete na stránkách sloupcový graf pomocí DIV, nebo řádkový graf plánu výroby, případně graf pomocí Ajaxu.

updated 2011-11-26