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?