Dotaz: grafy na webu

[Pfemir]

Dobry den, rad bych na svem webserveru zobrazoval grafy. Zkousel jsem Highcharts, jsou pekne, propracovane, hlavne tvorba grafu je pomerne jednoducha (i ja jsem to pochopil), ale pro vetsi objem dat nepouzitelne. Ja bych potreboval do jednoho grafu zobrazit 8 prubehu, pricemz kazdy ma cca 7000 bodu. V cem to nejlepe udelat? Hlavne aby to bylo jednoduche na naprogramovani, jsem v teto oblasti zacatecnik.

Dekuji.

Odpovědi

[H0ax]

RRDtool

[ubuntak]

+1
jen doplnim http://www.root.cz/clanky/prechadzame-na-rrdtool/

[Pfemir]

Díky za reakci, díval jsem se na ty články, ale vypadá to hodně složitě (aspoň pro mě). Zatím jsem ani nepochopil jak do toho dostat data. Dalo by se, kromě toho rrdToolu, použít ještě něco jiného?

[kulichs]

skus grafy.zaachi.com

[poky74]

Pokud jsi začátečník tak určitě mrkni na google charts.

Kdysi jsem potřeboval rychle na web nahodit několik grafů a na tohle jsem narazil. Funguje to tak že předáš v url body a nastavení grafu a vrátí ti to obrázek, původně jsem to zamýšlel provizorně, než udělám "pořádné grafy", ale začalo se mi to líbit a už jsem to tam nechal.

S rychlostí jsem neměl problém.

[chrono]

Pri 56000 bodoch to, podľa mňa, bude dosť pomalé (odoslať tak veľké množstvo dát Googlu môže trvať pomerne dlho).

[Pfemir]

To je nepoužitelné. Zkoušel jsem Highcharts, což něco podobného. Zkoušel jsem vykreslit cca 1000 bodů a úplně mi zkolabovalo PC. Firefox vytěžoval CPU na 100%, musel jsem ho odstřelit.

[chrono]

gRaphaël si skúšal? Napr. v ukážke Line Charts je graf s 10000 bodmi a Firefox to prežije.

[Pfemir]

Ty s tím gRaphaelem máš nějaké zkušenosti? Se mi zatím žádný graf nedaří zobrazit.

[chrono]

Jednoduchý graf (vlastne ich tam je 8 a každý ma 7000 bodov) môže vyzerať napr. takto:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
<head>
	<title>graf</title> 
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<style>
		#graf {
			width: 640px;
			height: 320px;
		}
	</style>
	<script src="http://raphaeljs.com/raphael.js" type="text/javascript" charset="utf-8"></script>
	<script src="http://g.raphaeljs.com/g.raphael.js" type="text/javascript" charset="utf-8"></script>
	<script src="http://g.raphaeljs.com/g.line.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" charset="utf-8">
window.onload = function () {
	var r = Raphael("graf");
	var x = [], y = [];
	
	for (var j = 0; j < 8; j++) {
		y[j] = [];
	}

	for (var i = 0; i < 7000; i++) {
		x[i] = i * 10;
		for (var j = 1; j < 8; j++) {
			y[j][i] = (y[j][i - 1] || j*20) + (Math.random() * 7) - (3 - j*0.15);
		}
		y[0][i] = 5000;
	}
	
	r.g.linechart(10, 10, 620, 300, x, y, {shade: true, width: 1});
};
	</script>
</head>
<body>
	<div id="graf"></div>
</body>
</html>

[Pfemir]

Tak já nevím. Mě to hodí pouze bílou obrazovku a když se podívám do Firebugeru tak tam mám 4 chyby. 3x Raphael is not defined a pak hlavně NetworkError: 403 Forbidden - http://raphaeljs.com/raphael.js, ale to nemám tušení proč. Tobě to jede normálně, ty se tam dostaneš?

[chrono]

Stiahni si tie 3 odkazované knižnice a zmeň v tom html kóde adresy (a áno, mne to funguje).

[Pfemir]

Ano, teď už to kreslí. Zkusím nastudovat ten kód, jak tam dostat svoje data. Ještě jedna otázka. Umí to i interaktivní grafy? Tím myslím, že když si stoupnu na některý průběh, tak jestli mi to ukáže hodnotu.

[chrono]

Áno, na tej stránke s ukážkou je aj jeden interaktívny graf, ale dosť pochybujem, že to pri 7000 bodoch bude použiteľné (keďže vzdialenosť medzi bodmi bude extrémne malá).

[Pfemir]

Zatím děkuji za pomoc. BTW, odkud jsi stáhl ten příklad? Dá se získat více příkladů, např. na ten interaktivní graf?

[chrono]

Ku knižnici gRaphaël nie je dostupná žiadna dokumentácia (okrem tých pár ukážok).

Inak možno by si sa mohol pozrieť na flot. Keď si pozrieš ukážky tak zistíš, že to vie robiť presne to čo potrebuješ (aj keď tam nie je ukážka, ktorá by robila všetko súčasne je veľmi pravdepodobné, že by sa to, čo potrebuješ dalo urobiť). Ak to budeš skúšať, možno by si mal stiahnuť kód z ich SVN, pretože najnovšie súbory na stiahnutie sú už dosť staré).

[Pfemir]

Díky, já teď zkouším ten Time series, Zoomable a vypadá to, že to šlape. Asi ten line-ajax nebyla zrovna dobrá volba. Dokonce to i zoomuje, což je paráda. Ještě aby to umělo zobrazit víc průhěhu a nemá to chybu. Velice ti děkuji za pomoc.

[chrono]

Určite sa pozri na príklady k tej knižnici flot (asi najväčšia výhoda oproti Highcharts JS je to, že pri grafe sa môže zobrazovať náhľad na celý priebeh, niečo také ako je pri tomto príklade).

[chrono]

Inak pri Highcharts JS graf Time series, Zoomable obsahuje viac ako 1000 bodov a funguje celkom normálne. Naozaj potrebuješ mať naraz zobrazených 8*7000 bodov?

PS: Highcharts JS má vyberanie bodu, pre ktorý sa majú ukázať nejaké detaily, vyriešené oveľa lepšie ako gRaphaël.

[Pfemir]

V Highcharts jsem zkoušel line-ajax a jednak se to strašně dlouho vykreslovalo a když jsem vlez do grafu, aby mi to ukázalo nějakou aktuální hodnotu, tak mi vytuhl firefox. Jinak Highcharts se mi velice líbí. Co se týká počtu bodů, jde o to, že chci zobrazovat denní grafy a jednodenní měření má cca 7000 bodu. Nemusí být zobrazeny všechny, ale nevím jak udělat nějaký smysluplný výběr. Ono by nejlepší bylo udělat nějaký zoom a posun, ale na to si už vůbec netroufám.

[MaSo]

všeobecně zoom a posun bych vyřešil, pokud mám pole čísel (bodů), v tvém případě 7000/den a chci zobrazit (zoom) 1h tak jednoduše 7000/24 => 291 budů (čísel). Budeš tedy posílat do grafu jen 291 bodů. A posun, to už musíš jen přičíst číslo, odkud budeš chtít zobrazovat (např od 02h do 03h, tak 291 (jelikož je toto počet bodů/h) krát 2 (od 2. hodiny) => 291*2=582), tedy např. budeš zobrazovat od pozice 582 až 872 (tj. 291 bodů).
No, snad jsem nějak pomohl/nakopl, jinak grafy zatím nedělám, tak si to musíš nějak sám dopatlat do té své situace

PS: doporučil bych na den použít 7200 bodů (při 5 bodech/min.), je to lépe dělitelné (/24 a pak /60 -> minutové grafy) a vychází 5 bodů na minutu, tedy měření každých 12s