CSS - Bar grafiek

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.

Het CSS bestand (voor kleuren en vormgeving):

.bargraph {
  list-style: none;
  padding-top: 20px;
}

ul.bargraph li {
  height: 30px;
  color: white;
  text-align: left;
  font-style: italic;
  font-weight: bolder;
  font-size: 14px;
  line-height: 35px;
  padding: 0px 20px;
  margin-bottom: 5px;
}
	
ul.bargraph li.dieprood {
background: #ED1C24;
}
 
ul.bargraph li.roodroze {
background: #EF465B;
}
 
ul.bargraph li.roze {
background: #E55A6B;
}
 
ul.bargraph li.oranjerood {
background: #E28159;
}
 
ul.bargraph li.oranje {
background: #F99C1C;
}
 
ul.bargraph li.geel {
background: #F4D41E;
}
 
ul.bargraph li.groen {
background: #97B546;
}
 
ul.bargraph li.lichtgroen {
background: #36B669;
}
 
ul.bargraph li.groenblauw {
background: #42BDA5;
}
 
ul.bargraph li.blauw {
background: #00AEEF;
}

.bargraph {

list-style: none;

padding-top: 20px;

}

ul.bargraph li {

height: 30px;

color: white;

text-align: left;

font-style: italic;

font-weight: bolder;

font-size: 14px;

line-height: 35px;

padding: 0px 20px;

margin-bottom: 5px;

}

ul.bargraph li.dieprood {

background: #ED1C24;

}

ul.bargraph li.roodroze {

background: #EF465B;

}

ul.bargraph li.roze {

background: #E55A6B;

}

ul.bargraph li.oranjerood {

background: #E28159;

}

ul.bargraph li.oranje {

background: #F99C1C;

}

ul.bargraph li.geel {

background: #F4D41E;

}

ul.bargraph li.groen {

background: #97B546;

}

ul.bargraph li.lichtgroen {

background: #36B669;

}

ul.bargraph li.groenblauw {

background: #42BDA5;

}

ul.bargraph li.blauw {

background: #00AEEF;

}

Het HTML bestand:

<head>
<link rel="stylesheet" type="text/css" href="CSS Bar voorbeeld.css">
</head>
<html>
<ul class="bargraph" style="width: 800px" >
    <li class="dieprood" style="width: 400px">Dieprood</li>
    <li class="roodroze" Style="width: 450px">Rood-Roze</li>
    <li class="roze" style="width: 500px">Roze</li>
    <li class="oranjerood" style="width: 650px">Oranje-Rood</li>
    <li class="oranje" style="width: 700px">Oranje</li>
    <li class="geel" style="width: 800px">Geel</li>
    <li class="groen" style="width: 700px">Groen</li>
    <li class="lichtgroen" style="width: 600px">Lichtgroen</li>
    <li class="groenblauw" style="width: 500px">Groen-Blauw</li>
    <li class="blauw" style="width: 400px">Blauw</li>
</ul>
</html>

<head>

</head>

<html>

<li class="dieprood" style="width: 400px">Dieprood</li>

<li class="oranjerood" style="width: 650px">Oranje-Rood</li>

<li class="oranje" style="width: 700px">Oranje</li>

<li class="groen" style="width: 700px">Groen</li>

<li class="lichtgroen" style="width: 600px">Lichtgroen</li>

<li class="groenblauw" style="width: 500px">Groen-Blauw</li>

<li class="blauw" style="width: 400px">Blauw</li>

</ul>

</html>

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:

Het CSS bestand (voor kleuren en vormgeving):

.bargraph {
  list-style: none;
  padding-top: 20px;
  width: 600px;
}
ul.bargraph li {
  height: 30px;
  color: white;
  text-align: left;
  font-style: italic;
  font-weight: bolder;
  font-size: 14px;
  line-height: 35px;
  padding: 0px 20px;
  margin-bottom: 5px;
}
	
span {
  position: absolute;
  display: block;
  height: 20px;
  width: 1px;
  background: black;
}

h1 {
  font-size: 150%;
  padding-left: 40px;
  text-shadow: 2px 1px #E28159;
}

ul.bargraph li.dieprood {
background: #ED1C24;
}
 
ul.bargraph li.roodroze {
background: #EF465B;
}
 
ul.bargraph li.roze {
background: #E55A6B;
}
 
ul.bargraph li.oranjerood {
background: #E28159;
}
 
ul.bargraph li.oranje {
background: #F99C1C;
}
 
ul.bargraph li.geel {
background: #F4D41E;
}
 
ul.bargraph li.groen {
background: #97B546;
}
 
ul.bargraph li.lightgroen {
background: #36B669;
}
 
ul.bargraph li.groenblauw {
background: #42BDA5;
}
 
ul.bargraph li.blauw {
background: #00AEEF;
}

.bargraph {

list-style: none;

padding-top: 20px;

width: 600px;

}

ul.bargraph li {

height: 30px;

color: white;

text-align: left;

font-style: italic;

font-weight: bolder;

font-size: 14px;

line-height: 35px;

padding: 0px 20px;

margin-bottom: 5px;

}

span {

position: absolute;

display: block;

height: 20px;

width: 1px;

background: black;

}

h1 {

font-size: 150%;

padding-left: 40px;

text-shadow: 2px 1px #E28159;

}