Eine weitere Frage ist, wie kann ich diesen Code mehrfach auf meiner Seite einbinden ohne dass sich die Grafen überlagern.
Das ist einfach: Packe jeden Balken in einen div mit der Breite 100% (des umgebenden Elements) In dem div bringe auch alles übrige unter (Abstände, Informationen...)
Aber wie bekomm ich es hin, dass der eine sich nach links und der andere sich nach rechts entwickelt?
Balken mit positiven Werten bekommen eine Position left:50%.
Balken mit negativen Werten bekommen eine Position left:50% und ein negatives margin-left in der kalkulierten Breite des Balkens (N px).
Du kannst natürlich auch css3 und calc benutzen:
Balken mit negativen Werten bekommen dann eine Position left:calc(50% - N px) die kalkulierte Breite mit with: N px