Vertikalni grafikoni

Koristeći sličan način prikaza popisa kao što je onaj prezentiran u prethodnoj lekciji možemo postići prezentaciju stupčastih grafikona kao u sljedećem prikazu.

• Crtanje grafikona je najkorisnije kad se obavlja s podacima koji se prikupljaju nakon stvaranja stranice (na primjer rezultati anketa), što znači da uključuje sredstva koja vam u ovoj fazi učenja vjerojatno nisu na raspolaganju. Unatoč tome, predlažemo da i ovaj primjer pratite konstruirajući vlastiti primjer jednak ili sličan primjeru iz sljedećih nekoliko lekcija.

Prvo ćemo definirati okvir za prikaz grafikona. Grafikon prikazujemo u sloju koji je definiran sljedećim stilom:

Pozadina sloja definirana je sličicom veličine 1x10 piksela. Na vrhu sličice, inače svijetlo sive boje, nalazi se jedan piksel tamne boje. Koristeći ovakvu sličicu za pozadinu, nizanjem dobijemo linije udaljene 10 piksela. Ovdje je prikazana ta sličica uvećana četiri puta:

Izgled okvira za grafikon možete vidjeti na sljedećem prikazu:

Trake grafikona definiramo kao popis s vrijednostima. Popis je definiran sljedećim CSS-om:

Primjećujete sljedeće:

• elementi popisa #graf ul li definirani su apsolutnim položajem. Tako smo postigli fleksibilnost pomicanja, jer svakom pojedinom elementu popisa možemo odrediti zaseban položaj.
• text-align ima vrijednost center, tako da se brojke nađu na sredini trake.
• background-color postavlja boju trake.
• bottom – pozicionira (smješta) trake na dno okvira u kojem se nalazi popis.

Osim dodavanja samog popisa u HTML kôd, potrebno je postaviti položaj, te definirati visinu pojedine trake. To radimo sljedećim kôdom:

U linijskom stilu dodano je svojstvo left, čime se postavlja pomak od lijeve granice sloja, i svojstvo height, kojim se definira visina pojedine trake. Visina u pikselima odgovara njenoj vrijednosti. Konačan izgled grafikona nalazi se u lekciji Stupčasti grafikoni.