CSS – Bar grafiek

bar icon
Ik had het idee om een “dynamische” grafische Grafiek (Bar) te gebruiken met maar liefst 1 bestand om in te laden, die tevens compatibel is met alle browsers en mobiele apparaten, en dit te gebruiken op een Arduino Ethernet Shield, jQuery en Bootstrap zijn daarmee te zwaar om te laden via de Arduino (veel code nodig om de cascade aan bestanden te laden vanaf de SD kaart)

Dus kwam ik op het idee om een CSS script te gebruiken, na wat googlen stuitte ik op deze simpele CSS Bar.

Voor mijn eigen voorbeeld heb ik de code aangepast en de waarden van de Bars uit de CSS gehaald en in de HTML opbouw gestopt, op deze manier hoef je maar 1 keer het CSS bestand in te laden en via een microcontroller kun je de waarden in de HTML opbouw stoppen.

CSS Bar voorbeeld

Het CSS bestand (voor kleuren en vormgeving):

Het HTML bestand:

Grafiek met een as

Ik had het idee om een as aan de Bar grafiek toe te voegen ik kwam deze tutorial tegen, ik heb hier en daar wat aanpassingen gemaakt:

CSS Bar voorbeeld 02

Het CSS bestand (voor kleuren en vormgeving):

Het HTML bestand:

Top