추가.
모양1은 그래프바가 좌측에서 숨겨진 상태에서 사용량 만큼 우측으로 나오는 방식입니다. 좌측에 넘치는 부분은 overflow:hidden;으로  숨겨진 상태이다.

모양2는 그래프바가 배경으로 깔려 있는 상태에서 백색 부분이 그래프를 완전히 덮여있는 상태에서 우측으로 사용량 만큼 폭이 줄어드는 방식이다.

두가지로 나누게된 이유는 뭐 만들때 실수 ^^;
모양1 같은 경우 좌측이 붉은색 우측이 푸른색인 그라데이션 이미지를 사용한다. 처음엔 푸른색이지만 사용할수록 좌측에 붉은색이 보이게 되는데 뭔가 안맞는다는 생각이 들어서 그라데이션 방향을 바꿔 보지만 처음 부터 붉은색이 보여서 그것도 뭔가 이상하고..
모양2 같은 경우 처음엔 푸른색이고 사용량이 증가할수록 붉은색으로 점차 바뀌게 되는 그래프 모양으로 원하던 결과를 얻을 수 있었다.

개인적으로 사용한다면 모양2를 추천하고 싶지만 처음에 만들었던 코드를 버리기 좀 그래서 냠겨둔다.

추가.
스킨폭도 1024px로 넓혔고 코드하일라이터도 수정했는데 그래도 어색하고 코드가 맘에 들지 않는군요

090411 추가.
스킨폭을 화면 전체로 넓혔습니다.