Graf pro zobrazení průměru/rozptylu

Někdy potřebujeme zobrazit tisíce hodnot na malé ploše. V takovém případě budeme muset použít metody statistiky. Vymezený rosah dat rozdělíme na úseky a v každém úseku spočteme průměr a rozptyl (Standard Deviation, STD, sigma). Tyto dvě statistické veličiny mohou nahradit stovky naměřených hodnot.

Popsaná metoda je použita v intranetové aplikaci Váha výrobku a aplikaci Měření rozměrů. V druhé ukázce chybí zmínka o tomto grafu, což nyní napravíme.

screenshot intranetové aplikace Měření rozměrů

Na screenshotu z aplikace Měření rozměrů vidíme historii devíti vybraných rozměrů. Každý sloupec reprezentuje soubor dat za 10 minut (obvykle asi 100 hodnot), pro ten je spočten průměr a rozptyl.

V horní a střední části screenshotu můžeme vidět hodnoty, které mají průměr blízko požadované hodnotě, ale mají velký rozptyl. Jeden červený sloupec dokonce označuje překročení limitů a v tomto intervalu bylo pravděpodobně několik kusů vyřazeno z důvodu mimolimitního rozměru.

Ve spodní části vidíme velmi stabilní hodnoty. Průměrné hodnoty jsou vzdálené od žádané hodnoty (střední čára), při nízké hodnotě rozptylu se všechny hodnoty pohodlně vejdou do limitů (červené čáry).

 

Z prostřední části screenshotu si uděláme příklad pro zobrazení průměru a rozptylu současně v jednom grafu. Připravíme si obrázek pozadí s vyznačenými limity a žádanou hodnotou. Vzdálenost limitů a žádané hodnoty bude naše grafické měřítko. Další dva obrázky budou pro kreslení sloupcového grafu. Zvolíme výplň tak, aby ve středu byla tmavá barva (bude označovat průměr), k okrajům bude barva světlejší. Gradient by měl napodobit Gaussovu křivku, v příkladu je použit gradient lineární.

Při změně výšky sloupce browser přepočítá původní rozměry obrázku tak, že nový obrázek zůstává symetrický (tmavá je stále ve středu), i když se poněkud zhorší kvalita gradientu.

Pro kreslení grafu musíme stanovit pozice top a height každého sloupce. Algoritmus výpočtu nebudu uvádět. Jen připomenu, že výška sloupce je 6*STD (±3*STD), v tomto rozmezí by se měly teoreticky nacházet všechny hodnoty výchozího datového souboru. Jednotky průměru a rozptylu musíme po přepočtu na pixely zaokrouhlit na celá čísla a výsledky bychom měli testovat na překročení grafického měřítka. Dále je zde použit test na překročení limitů, který nastaví barvu sloupce (červená by měla vyžadovat regulační zásah).


<style type="text/css">
.cbg {width: 158px; height: 120px; background-image: url(/at/files/STDbg.png);}
.con {position: relative; width: 12px; height: 120px; float: left;}
.bar {position: absolute; width: 11px; left: 0; border: 0;}
</style>

<body>

<div class="cbg">

<div class="con" title=" 06:50, avg=54 ">
<img class="bar" src="/at/files/STDbarGray.png" style="top:17px; height:42px;">
</div>

<div class="con" title=" 07:00, avg=70 ">
<img class="bar" src="/at/files/STDbarRed.png"  style="top:10px; height:42px;">
</div>

...
</div>

</body>

Pro kreslení grafu definujeme CSS třídy. cbg bude třída pro kontejner celého grafu a bude kreslit jeho pozadí. con bude kontejner pro jeden sloupec grafu, bar pak třída pro grafický prvek kreslící sloupec. Kontejneru nastavíme pozici relative, abychom uvnitř mohli pozicovat grafický prvek absolutně. Postup je stejný jako při kreslení sloupcového grafu <div>.

V tomto příkladu je použita jiná technika zobrazení číselných dat. Místo funkce onMouseOver je použit atribut title v kontejneru. Serverový skript zde zapisuje čas měření a průměrnou hodnotu. Není to tak efektní metoda jako v minulém příkladu, zato je jednodušší.

Jistě by bylo možné provádět výplň sloupcového grafu jinak (SVG, VML, MS filtry). Uvedený způsob je jednoduchý a univerzální i když je viditelný rozdíl v kvalitě sloupce zobrazeného v původní a změněné výšce.

updated 14.05.2006