O webu
JS grafy na webu

Chceme-li stránku oživit nějakým grafem místo nudného výpisu čísel, existují různé možnosti.

  1. Vygenerovat obrázek grafu na straně serveru.
  2. Nakreslit graf v HTML a CSS. Pro sloupcové grafy je to docela jednoduché. I komplikovanější grafy je možné nakreslit po kouskách spousty pár-pixelovými elementy (ukázka).
  3. Použít hotové JS řešení, kterému se jen předhodí data a o vykreslení grafu je postaráno.

Existují různá hotová řešení, která působivě vypadající graf včetně animace dokáží po předání dat vytvořit. Většinou se používá SVG nebo <canvas>.

Chart.js

Graf v Chart.js

Umožňuje grafy rozanimovat, když se na ně odroluje.

Web

Google Charts

Graf v Google Charts

Komplexní nástroj Googlu se spousty možnostmi.

Web

Chartmander

Graf v Chartmander

  • animace,
  • popisky,
  • používá <canvas>

Web

Highcharts

Graf v Chartmander

  • Používá SVG,
  • hodně pokročilý nástroj, který nabízí graf snad na všechno,
  • umí i vytvářet graf přímo z HTML tabulky,
  • pro nekomerční weby zdarma.

Web Dema

Brace Charts

Graf s použitím Brace Charts

  • Jednoduché grafy, které se dají vyvářet prostým připojením obrázku a předáním parametrů do jeho URL.
  • Výsledné obrázky jsou v SVG.
  • 10 000 zobrazení je zdarma.

Web

C3.js

Různé typy grafů si je možné prohlédnout na stránce příkladů.

Graf s použitím C3.js

Web

CHARTIST.JS

Responsivní SVG grafy s možností CSS animací.

Graf s použitím CHARTIST

Web

MetricsGraphics.js

Knihovna využívající D3 je vhodná pro presentaci dat závislých na čase.

MetricsGraphics.js

Web

ECharts

Grafy pro velká data. Funguje od IE 6.

ECharts

Web

Odkazy jinam