enviar resultado de una consulta a una tabla html

[josegaitan123]

buenas tardes
Estoy necesitando ayuda en lo siguiente.

Tengo una consulta php de operaciones por mes, necesito filtrarla por mes, esta debe mostrarme los registros y generar un gráfico de barra con el valor de las dos ultimas columnas.

Tengo el siguiente codigo PHP

Código PHP:

  <?php 
include '../conexion/conexion.php'; 
//evitar Sql inyection 
 
$periodo=htmlentities($_POST['periodo']); 
$ano=date('Y'); 
if ($periodo!=''){ 
 $sel=$con->query("SELECT control.idproyecto, 
                              proyecto.nombre_proyecto,                         
                              sum(cec) as cec, 
                              sum(ces) as ces 
                              FROM control 
                              INNER JOIN proyecto on control.idproyecto=proyecto.id 
                              WHERE mes=$periodo AND ano=$ano 
                              GROUP BY (control.idproyecto)"); 
 
 
 
 
if (mysqli_num_rows($sel)==0){ 
    echo '<h4 style="color:green"><center>¡Consulta no arroj&oacute; resultado..!</center><h4>'; 
 
}else{ 
 while($f=$sel->fetch_assoc()){  
 $med=round(($f['cec']/$f['ces'])*100);  
 echo ' <tr> 
       <td><input type=text class=form-control value='.$f['nombre_proyecto'].' style="width:180px"></td> 
       <td><input type=text class=form-control value='.$f['cec'].' style="width:95px"></td> 
       <td><input type=text class=form-control value='.$f['ces'].' style="width:95px"></td> 
       <td><input type=text class=form-control value='.$med.'%'.' style="width:100px"></td> 
       <td><input type=text class=form-control value='."100%".'    style="width:100px"></td> 
       </tr> 
       '; 
  } 
  $con->close(); 
} 
}else{ 
      echo '<h4 style="color:red"><center>Seleccione Periodo..!</center><h4>'; 
} 
 
 
 ?>   

Codigo JQUERY

Código Javascript:

$('#periodo').change(function(){
    $.post('calcular_cce.php',{
        periodo:$('#periodo').val(),
        
        beforeSend: function(){
        $('#resultado').html('<img scr="../img/loader.gif"');
        }
    },   function(respuesta){
         $('#resultado').html(respuesta);   
 
 
});
});
 

CODIGO HTML

Código HTML:

<select name="periodo" id="periodo" class="form-control">
    <option value=""> Seleccione </option>
    <option value="01">ENERO</option>
    <option value="02">FEBRERO</option>
    <option value="03">MARZO</option>
    <option value="04">ABRIL</option>
    <option value="05">MAYO</option>
    <option value="06">JUNIO</option>
    <option value="07">JULIO</option>
    <option value="08">AGOSTO</option>
    <option value="09">SEPTIEMBRE</option>
    <option value="10">OCTUBRE</option>
    <option value="11">NOVIEMBRE</option>
    <option value="12">DICIEMBRE</option>
    </select>  
 <div id="resultado">
</div>
 

Los resultado se muestran pero se ven de una forma no muy esteticos las columnas se ven desajustadas

[Alexis88]

Para que obtengas un resultado mejor, te recomiendo usar una librería de gráficos, como Google Charts. Como está construida en JavaScript, te convendría solicitar los datos mediante AJAX y con ellos elaborar los gráficos, tal y como se muestra en el ejemplo del enlace adjunto.