Grafy na stránkách a PHP – jqPlot

Nadřazená kategorie: Programování

Často potřebujeme na stránkách zobrazit různé grafy a je potřeba zvolit vhodné řešení. Na výběr máme v podstatě dva způsoby. Buď graf vytvoříme pomocí PHP to formou obrázku nebo pomocí obrázku tentokrát vytvořeného pomocí Javascriptu. A teď se podíváme na jednotliví možnosti a jejich vzájemné výhody a nevýhody. Malinko předběhnu a rovnou napíšu že obvykle používám projekt jqPlot, ale o tom až dále.

1) grafy pomocí PHP

Při vytváření máme v podstatě jen jednu možnost jak vytvořit graf a to je sestavit obrázek. Projekty, které jsem na webu našel a zkoušel jsou takto postavené. V podstatě ani jiná možnost není, jelikož PHP běží na serveru. Liší se jen způsobem v kterém místě a jak je vytvořen obrázek. Buď je volána funkcemi která vygeneruje soubor s grafem a ten je prezentován, nebo je obrázek načítán z jiné adresy, kde je skript, který vygeneruje pomocí hlaviček obrázek přímo pro prohlížeč.

2) grafy pomocí Javascriptu

V případě Javascriptu je obrázek vytvořen pomocí obrázků a CSS stylů.

Shrňme si tedy hlavní rozdíly:

Výhody a nevýhody PHP:

+ graf můžeme vytvořit v okamžiku kdy zpracováváme data

+ graf (obrázek) bude vždy zobrazen

+ pomocí stylů jde měnit jeho vzhled

+ širší nabídka hotových projektů

+ nezávislost na klientském prohlížeči

– nutnost mít přístupné správné grafické knihovny

– s obrázkem se již dále nedá pracovat (např. zoom)

Výhody a nevýhody JS:

+ vyšší nabídka funkcí pro práci s grafem jako například zoom

– data potřeba zpracovat na začátku stránky (začlenění JS do struktury stránek)

– Javascript nemusí být na všech prohlížečích zapnutý

– menší nabídka svobodných projektů

– zavilosti na verzi stránek

– závis lot na klientském prohlížeči a jeho nastavení

Jak je vidět výhodnější se jeví použití PHP v případech kdy nepotřebujeme další funkce jako je již výše zmiňovaný zoom . Přesto osobně nejraději používám projekt jqPlot (více na samotných stránkách), který je jednak možné použít i v komerčním prostředí a nabízí velký prostor pro tvorbu grafů. Dále není závislý na použití HTML5, jelikož Windows XP s vestavením prohlížečem IE8 tento formát nezvládají navíc jeho implementace není složitá viz následující ukázka pro vložení koláčového grafu:

  1. začlenění do stránek

    <link rel=“stylesheet“ type=“text/css“ href=“/jquery.jqplot.css“ />

    /jquery.jqplot.min.js

  2. vložení jednotlivých modulů, které budeme potřebovat pro vykreslení grafu

    /jqplot.barRenderer.min.js

    /jqplot.categoryAxisRenderer.min.js

    /jqplot.canvasOverlay.min.js

    /jqplot.pieRenderer.min.js

    /jqplot.donutRenderer.min.js

  3. vložení dat a vykreslení grafu

    $(document).ready(function(){

    var data = [ [80], [120]];

    plot3 = $.jqplot(‚id_div_pro graf‘, [data],{

    grid: {

    drawGridLines: false,

    background: ‚white‘,

    borderColor: ‚white‘,

    shadow: false, borderWidth:0

    },

    ….