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.