Grafio de Barras com CSS e PHP

Front-end
,
#1

Olá, estou treinando, e gostaria de criar um gráfico de barras simples com CSS e PHP, tipo, eu tenho uma tabela onde eu salvo alternativas A,B,C,D e E, e eu pretendo selecionar todas as alternativas A, e atribuir o número de As ao tamanho de uma DIV em porcentagem, do B, do C e assim por diante para criar um gráfico… No momento tenho um código, de como criar o gráfico com CSS, mas não está funcionando
Estou querendo fazer sem bibliotecas…

O que está errado?

<html>
<head>
<meta charset="UTF-8" />
<title>Grafico de Barras com CSS e PHP</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<?php $i = ""; $width = "";
  // definindo porcentagem
  $width1 = '30%';
  $width2 = '40%';
  $width3 = '70%';
  $width4 = '60%';
  $total  = 4; // total de barras
?>
<div id="box">
  <p>Porcentagem da Alternativs</p>
  <?
    for($i=1;$i <= $total;$i++){
    $width = ${'width' . $i};
  ?>
    <div id="barras">
          <div class="barra<?=$i?>" style="width:<?=$width ?>" ><?=$width ?></div>
    </div>
  <? } ?>
</div>
</body>
</html>

style.css
#box{
  width:500px;
  height:60px;
  margin-left:10px;
  font-family:Verdana;
  font-size:14px;
}
#barras{
  width:430px;
  height:30px;
  float:left;
  margin: 2px 0;
}
.barra1, .barra2, .barra3, .barra4{     
  color:#FFF;
  padding-left:10px;
  height:30px;
  line-height:30px;
}
.barra1{ background-color: #00DD00; }
.barra2{ background-color: #DDDDDD; }
.barra3{ background-color: #FF5500; }
.barra4{ background-color: #045633; }

Alguém me da alguma dica de como consertar?