HTML5 és CSS3 programozás

HTML Táblázatok, ábrázoljuk grafikonon

by · Published · Updated

Ebben a részben, megnézzük, hogyan tudjuk a táblázatunkból kinyerni az adatokat és hogyan tudunk belőlük szép grafikonokat készíteni, előre felhívnám a figyelmeteket, hogy ez nem igazán igazodik a HTML5-höz. Ez a verzió amit itt bemutatok, nem egy új technika, de hamarosan kiadják a canvas-os megoldást is. Egyelőre a böngészők felkészültsége miatt, az alábbi változat használatát javaslom.

Eddig a honlapunkon a dinamikus adatábrázolást csak a Flash segítségével tudtuk megvalósítani. (Voltak különböző hegesztési és kazánkovácsolási eljárások, amivel megoldható, de szép csak a Flash segítségével volt, így én azokat nem tekintem megoldásnak.) Nézzük mire lesz szükségünk, hogy elkészítsük az első grafikonunkat.

1. Lépés a szükséges JavaScript és CSS fájlok leszedése

Először is szedjétek le ezt a szépséget: http://code.google.com/p/dwpe/downloads/list (ez egy nagyszerű kis javascript +css -es open license-es kiegészítés, érdemes mélyebben bele túrni!) Vagy az általam már előkészített célfájlokat. Ezután kezdődhet a táblázat kreálás.

2. Lépés készítsünk egy táblázatot.

Vágjunk is bele és készítsünk egy táblázatot, tegyünk bele tetszőleges adatokat. Nálam a példa fájl, látogatottsági adatokból fog állni. Valahogy így néz ki:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>HTML5 Grafikon</title>
</head>

<body>
<table>
<caption>Látogatók számának alakulása</caption>

<thead>
<tr>
<td></td>
<th scope="col">Január</th>
<th scope="col">Február</th>
<th scope="col">Március</th>
<th scope="col">Április</th>
<th scope="col">Május</th>
</tr>
</thead>

<tbody>
<tr>
<th scope="row">Összes látogató</th>
<td>5213</td>
<td>11090</td>
<td>13690</td>
<td>10210</td>
<td>9471</td>
</tr>

<tr>
<th scope="row">Visszatérő</th>
<td>1138</td>
<td>2540</td>
<td>4131</td>
<td>4388</td>
<td>3971</td>
</tr>

<tr>
<th scope="row">Új Látogató</th>
<td>4075</td>
<td>8550</td>
<td>9559</td>
<td>5822</td>
<td>5500</td>
</tr>
</tbody>
</table>
</body>

</html>

Demo itt.

Táblázat

Táblázat

Ha most megnézed a fájlt, akkor láthatod, hogy hogy néz ki!
Annyira nem vészes, mondhatnánk. De mindjárt szebb lesz.

3. Lépés, adjuk hozzá a leszedett fájlokat

A HTML fájlunk fejlécébe tegyük a következőket.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>HTML5 Grafikon</title>

<link href="basic.css" type="text/css" rel="stylesheet" />
<link href="visualize.css" type="text/css" rel="stylesheet" />
<link href="visualize-light.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="visualize.js"></script>
</head>
...

Demo itt.

CSS-el kezelt táblázat

CSS-el kezelt táblázat

Már most szebb lett a táblázatunk, pedig igazából még nem is csináltunk vele semmit. Aki valóban szép táblázatot szeretne csinálni, annak már ez is elégséges lehet, de mi most ne elégedjünk meg ezzel, tegyük hozzá a beígért grafikont is!

4. Lépés, következzék a Grafikon!

Utolsó lépésként inicializáljuk a visualize.js-t.! A fejlécbe még kerüljön bele a következő rész:


<script type="text/javascript">
$(function(){
$('table').visualize({type: 'line'});
});
</script>

A végeredményt itt megtekintheted.

  • type: Lehet: ‘bar’, ‘area’, ‘pie’, ‘line’. Az alapbeállítás: ‘bar’.

Remélem segített azoknak, akik táblázatokkal és grafikonokkal bajlódnak a weboldalukon.

Forrás:

http://code.google.com/p/dwpe/downloads/list

Creative Commons Licenc
HTML Táblázatok, ábrázoljuk grafikonon  a Creative Commons Nevezd meg! – Ne add el! – Így add tovább! 2.5 Magyarország Licenc alatt van.

Permissions beyond the scope of this license may be available at https://html5.ugyesen.com.

Tags:

You may also like...