Tentokrát si ukážeme, jak s pomocí vynikající knihovny JpGraph vytvořit vskutku profesionální sloupcové grafy zachycující různé statistické veličiny, v našem případě to bude hodinová a denní návštěvnost sledovaných stránek.

Knihovna JpGraph a její instalace byla popisována v článku Profesionální grafy v PHP snadno a rychle. V tomto článku vám předvedu dva sloupcové grafy, které jsem se snažil vytvořit tak, aby na nich bylo dobře vidět, co všechno můžete měnit a nastavovat podle vlastních potřeb a uvážení. (K dispozici je vám i ukázka aplikace, měřící statistiky přístupů stránek http://www.czechia.cz/help/, ovšem bez zde popisovaných grafů.)

Grafy budeme vkládat do souboru stat.php prostřednictvím elementu <img>. V parametru „sql_access_date“ budeme předávat období, pro které se bude graf vytvářet.

// graf
echo ‚<p><img src=“hourly.php?from_date=‘ . urlencode($from_date) . ‚&to_date=‘ . urlencode($to_date) . ‚“ alt=“Hodinová statistika“ /></p>‘;

JpGraph pracuje standardně s kódováním ISO-8859-2, takže pokud chceme psát česky a používat jiné kódování (například Win-1250), musíme použít nějakou převodní funkci, třeba tu, která se objevila v přechozí verzi článku. Myslím ale, že lepší bude použít přímo kódování ISO-8859-2.

Hodinová návštěvnost (hourly.php)

Výsledkem našeho snažení bude například takovýto graf:

Hodinová návštěvnost
Hodinová návštěvnost (plná velikost, cca 7 kB)

Skripty pro jednotlivé grafy budou ve zvláštních souborech umístěných standardně v témže adresáři jako ostatní soubory této aplikace. Pro statistiku hodinové návštěvnosti to je soubor hourly.php. Vzhledem k tomu, že vytvoření grafu je dostatečně okomentováno přímo ve skriptu, nebudu se zde příliš rozepisovat. Navíc manipulace s knihovnou JpGraph je natolik intuitivní a relativně jednoduchá, že se s ní naučíte pracovat během několika desítek minut.

require „./config.php“;  // konfigurace
require „./db.php“;  // pripojeni k databazi
// nacteni souboru nutnych pro vytvoreni grafu
require jpGraph_Path . ‚/src/jpgraph.php‘;
require jpGraph_Path . ‚/src/jpgraph_bar.php‘;
if(isset($_GET[‚from_date‘]) and isset($_GET[‚to_date‘])) {
  $from_date = addslashes(urldecode($_GET[‚from_date‘]));
  $to_date = addslashes(urldecode($_GET[‚to_date‘]));
  
  // omezeni statistiky na urcite obdobi
  $sql_access_date = „access_date >= ‚$from_date‘ AND access_date <= ‚$to_date 23:59:59′“;
  // data pro osu Y
  for ($i=0;$i<=23;$i++) {
    $query = mysql_query(„SELECT count(*) FROM access WHERE HOUR(access_date) = ‚$i‘ AND $sql_access_date“);
    $result = mysql_fetch_array($query);
    $data[] = $result[„count(*)“]; // pocet pristupu v jednotlivych hodinach
  }
  // graf (velikost) a merítko
  $graph = new Graph(535,250);
  $graph->SetScale(‚textlin‘);
  $graph->img->SetMargin(45,30,25,40);  // velikost okraju
  $graph->SetColor(‚aliceblue‘);  // barva pozadi grafu
  $graph->SetMarginColor(‚gray9‘);  // barva okraje grafu
  $graph->SetFrame(); // oramovani
  $graph->yaxis->scale->SetGrace(15); // nastaveni meritka osy Y
  // titulek a nazvy os
  $graph->title->Set(‚Hodinová návštěvnost‘);
  $graph->xaxis->title->Set(‚Hodina‘);
  $graph->yaxis->title->Set(‚Počet přístupů‘);
  // nastavení fontu titulku a nazvu os
  $graph->title->SetFont(FF_FONT2,FS_BOLD);
  $graph->yaxis->title->SetFont(FF_FONT1,FS_BOLD);
  $graph->xaxis->title->SetFont(FF_FONT1,FS_BOLD);
  // sloupcovy graf
  $bplot = new BarPlot($data);
  
  $bplot->SetFillColor(‚deepskyblue‘); // barva sloupcu
  $bplot->SetShadow(‚black‘,2,2);  // stin sloupcu
  
  // format, font, barva a uhel popisku u sloupcu
  $bplot->value->SetFormat(‚%d‘);
  $bplot->value->SetFont(FF_FONT1,FS_NORMAL);
  $bplot->value->SetColor(‚blue‘);
  $bplot->value->SetAngle(90);
  $bplot->value->Show();
  
  // pridej sloupcovy graf
  $graph->Add($bplot);
  
  // zobraz graf
  $graph->Stroke();
}

Denní návštěvnost (daily.php)

Výsledkem našeho snažení bude tentokrát následující graf:

Denní návštěvnost

Postup při tvorbě grafu denní návštěvnosti je identický předchozímu, použijeme pouze odlišný název pro soubor se skriptem, hourly.php.

require ‚./config.php‘;  // konfigurace
require ‚./db.php‘;  // pripojeni k databazi
// nacteni souboru nutnych pro vytvoreni grafu
require jpGraph_Path . ‚/src/jpgraph.php‘;
require jpGraph_Path . ‚/src/jpgraph_bar.php‘;
if(isset($_GET[‚from_date‘]) and isset($_GET[‚to_date‘])) {
  $from_date = urldecode($_GET[‚from_date‘]);
  $to_date = urldecode($_GET[‚to_date‘]);
  // omezeni statistiky na urcite obdobi
  $sql_access_date = „access_date >= ‚$from_date‘ AND access_date <= ‚$to_date 23:59:59′“;
  // data pro osu Y
  for($i = 0; $i <= 6; $i++) {
    $query = mysql_query(„SELECT count(*) FROM access WHERE WEEKDAY(access_date) = ‚$i‘ AND $sql_access_date“);
    $result = mysql_fetch_array($query);
    $datay[] = $result[„count(*)“];  // pocet pristupu v jednotlivych dnech
  }
  // data pro osu X
  $datax = array(‚Pondělí‘, ‚Úterý‘, ‚Středa‘, ‚Čtvrtek‘, ‚Pátek‘, ‚Sobota‘, ‚Neděle‘);
  // graf (velikost) a meritko
  $graph = new Graph(400,200);
  $graph->SetScale(‚textlin‘);
  $graph->img->SetMargin(40,20,30,30);  // velikost okraju
  $graph->SetMarginColor(‚oldlace‘);  // barva pozadí grafu
  $graph->SetShadow();  // stin grafu
  // nastaveni titulku (font, barva)
  $graph->title->Set(‚Denní návštěvnost‘);
  $graph->title->SetFont(FF_FONT2,FS_BOLD);
  $graph->title->SetColor(‚darkred‘);
  // nastavení fontu u obou os
  $graph->xaxis->SetFont(FF_FONT1,FS_NORMAL);
  $graph->yaxis->SetFont(FF_FONT1,FS_NORMAL,10);
  // popisky na ose X
  $graph->xaxis->SetTickLabels($datax);
  // sloupcovy graf
  $bplot = new BarPlot($datay);
  $bplot->SetWidth(0.6);  // sirka sloupcu
  $bplot->SetFillGradient(‚gold4′,’gold2‘,GRAD_HOR);  // nastaveni barevneho prechodu u sloupcu
  $bplot->SetColor(‚navy‘);  // barva ramecku sloupcu
  // pridej sloupcovy graf
  $graph->Add($bplot);
  // zobraz graf
  $graph->Stroke();
}

Pozn. red.: Tento článek vyšel poprvé 17. 9. 2002. Původní verze článku a k němu vedené diskuse jsou vám k dispozici v ZIP archivech.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.

Žádný příspěvek v diskuzi

Odpovědět