Staafdiagrammen

Op sommige websites staat een "enquête", waarmee bijvoorbeeld de mening over de website zelf wordt gepeild. De resultaten worden bijgehouden op een server. Door het aanklikken van een hyperlink worden de resultaten getoond, vaak als staafdiagram, soms als kolomdiagram.
Als je de code van zo'n diagram bekijkt blijkt er helemaal geen ingewikkelde grafische representatie te zijn, alleen maar wat kleine .GIF-bestandjes. Elk van die bestandjes bevat een plaatje van één of hooguit een paar pixels; elk plaatje bevat één kleur.

Op deze plaats wordt een idee gegeven van hoe dat wordt gedaan aan de hand van een tussenresultaat van de webpoll die ooit op deze site heeft gestaan.
De hier besproken code kun je downloaden voor eigen gebruik, inclusief de plaatjes.

Natuurlijk zou deze site niet compleet zijn als er niet een toepassing zou zijn die je zelf kunt gebruiken. Ook deze code zit in de file die je kunt downloaden.

• De volgende items worden besproken:
  1. Een voorbeeld van een Staafdiagram.
  2. Een voorbeeld van een Kolomdiagram.
  3. De HTML die hiervoor nodig is.
  4. Een toepassing om zelf te gebruiken.
   
• Een Staafdiagram bevat liggende balken, waarvan de lengte staat voor een getal. Het is betrekkelijk eenvoudig om een legenda direct bij de staven te zetten.
   
  Voorbeeld van een Staafdiagram
   
• Een Kolomdiagram bevat staande balken, waarvan de hoogte staat voor een getal. Het is moeilijk om een legenda in het diagram op te nemen. Daarbij nemen kolomdiagrammen vaak meer ruimte in dan staafdiagrammenen worden staafdiagrammen meer gebruikt dan kolomdiagrammen.
   
  Voorbeeld van een Kolomdiagram
   
• De opzet van een Staafdiagram is als volgt:
  • De hele figuur bestaat uit een tabel met twee rijen, elk met één cel.
  • De bovenste rij/cel bevat de titel.
  • De onderste rij/cel bevat zelf weer een tabel. In de bovenste rij/cel van deze tabel staat de titel van het staafdiagram (aantal "votes"); voor elke gegevensbalk is er een volgende rij.
    
  • De rijen met gegevens bestaan elk uit twee cellen, nl. één voor de legenda (mooi, leuk, enz.) en één voor de balk zelf.
    
  • Het percentage van het geheel wordt vervolgens achter de balk geschreven.
  • De balk is een figuur (.GIF), die slechts één pixel bevat. Door gebruik te maken van een vaste hoogte (heigth="15") krijgt de balk een geschikte dikte.
  • De lengte van de balk wordt ingesteld op basis van de te tonen gegevens met behulp van width="...".
   
• Het Kolomdiagram is een variatie van het Staafdiagram:
  • De gegevenstabel is iets anders opgezet. De verticale balken staan in één rij; elke balk staat apart in een cel.
  • De percentages staan in een aparte rij daaronder, elk percentage in een cel.
  • De legenda (mooi, leuk, enz.) is weggelaten.
  • Bij de images zijn de attributen height en width verwisseld.
   
• Een deel van de code staat onderaan de pagina. De volledige broncode staat in de file die je kunt downloaden.
• Om de kleuren van de balken te veranderen moet je de .GIF-bestanden veranderen. Hiertoe moet je het kleuren-palet van de achtergrond aanpassen. De plaatjes zelf bevatten slechts één bit per pixel. Dit is voor de goede functie overigens niet nodig. Elk .GIF-plaatje is bruikbaar. Voor het beste resultaat zijn ze wel zo klein mogelijk en bevatten ze dus één kleur.
   
• In de praktijk gaat het er anders aan toe dan hier wordt beschreven.:
  Als er een diagram moet worden gemaakt worden eerst de vereiste gegevens uit een database gehaald. Vervolgens wordt de HTML op de server door een speciaal programma in elkaar gezet en naar de browser gestuurd. Ook de plaatjes worden door dat programma gemaakt en naar de browser gestuurd.
  Op deze manier kun je de veranderingen in de database bijhouden en kun je dus steeds een recente grafiek laten zien.
  Dit valt echter buiten het bestek van deze pagina.
   
• Op deze plaats vind je een uitgewerkte toepassing. Je kunt zes getallen ingeven, waar na er een staafdiagram of een kolomdiagram wordt getekend. De volledige code van deze toepassing zit in de download-file.
• De toepassing maakt gebruik van verschillende technieken die elders op deze site worden beschreven. Zie onder andere:
  • Werken met getallen
  • Tekst-invoer
  • HTML met parameters
  • HTML laten genereren door JavaScript
• Druk op de onderstaande knop om de toepassing te starten.

Toepassing

Gebruik:

• De code (van de voorbeelden) staat in de <BODY> op de plaats waar de grafiek moet staan.
• De code van de toepassing is zonder meer te gebruiken, mits je je houdt aan de volgende regels:
  • De overdracht van gegevens naar het JavaScript gebeurt in een query, zie het item HTML met Parameters.
  • De titel (in de blauwe balk) is parameter tt=
  • De subtitel (vet gedrukt) is parameter stt=
  • Achtereenvolgende getallen worden opgegeven in g1, g2, g3, enz.
  • Bijbehorende legenda-teksten worden opgegeven in n1, n2, n3, enz.
  • Het type grafiek is type=s of type=k voor staafdiagram,
    resp. kolomdiagram.
     
  • In het script staan drie parameters die naar believen kunnen worden aangepast:
    • AantalBalken = 6. Dit is het grootste aantal kolommen of staven waar het script mee werkt. Merk op dat je ook plaatjes pixel-x.gif moet bijvoegen als je dit getal vergroot.
    • MaxPixel = 250. De grootste waarde in de getallen reeks wordt 250 pixels in een staafdiagram en 250/2 pixels in een kolomdiagram .
    • breedte = 15. Dit is de breedte van de balken die het script op het scherm laat zien.
• Voor een zinvolle toepassing is nog veel extra programmeerwerk nodig!

De code voor het staafdiagram ziet er als volgt uit:
(Dit is een gedeelte; de volledige code zit in de download-file)

De code voor het kolomdiagram ziet er als volgt uit:
(Dit is een gedeelte; de volledige code zit in de download-file)

Downloaden:
 
Druk op de knop:  File: voorb078.zip, 2707 bytes.

Opmerking:
 
Soms zie je geheel bijgewerkte grafieken op website staan, zoals bijvoorbeeld het verloop van aandelenkoersen. Dit soort prenten wordt door de server steeds opnieuw aangemaakt en beschikbaar gesteld aan de browser. Zie ook het item "infographics maken".