Crear gráficos/charts en html (multilenguaje)

Si bien éste concepto que te presentamos puede parecer simple, tiene gran cantidad de aplicaciones para distintas aplicaciones de múltiples lenguajes, basándonos siempre en HTML, y en éste caso daremos ejemplos de uso para JavaScript y PHP.
Lo que vamos a hacer, será crear la maquetación gráfica de barras sencilla en HTML, para que luego la puedas generar dinámicamente en JavaScript ó PHP, básicamente cualquier lenguaje, hasta puedes expotar un gráfico en HTML desde C++.

html simple charts

Trabajo finalizado:

23

37

56

18

Queda a tu gusto la personalización de los estilos css del gráfico, aqui te damos una guía para que se vea correctamente.
Código CSS

<style type='text/css'>
#contenedor{
    height:300px;
    background-color:#E4E4E4;
    border:1px solid #ADADAD;
}
#columna{
    background-color:#ecf0f3;
    height:100%;
    position:relative;
    float:left;
    margin: 0 1.1% 0 1.1%;
}
#columna:hover #inferior{
    background-color:#01a187;
}
#superior{
    position:relative;
    top:0px;
    width:100%;
    z-index:1;
}
#inferior{
    position:relative;
    bottom:0px;
    background-color:#01bd9c;
    width:100%;
    z-index:1;
    border:1px solid #01a187;
    transition-duration:0.3s;
}
#datos{
    color: #005648;
    position: absolute;
    font-size: 16px;
    z-index: 2;
    text-align: left;
    margin-left: 50%;
    left: -9px;
    bottom: 20px;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
</style>

Caso de uso con JavaScript:
Para éste ejemplo tomamos un JSON y graficamos su contenido con gráfico de barras HTML, recuerda incluir en el archivo .html los estilos css.
Si no usas un JSON, puedes pasarle a la función graficar tu propio Array, pero recuerda modificar los atributos que para el ejemplo usamos "cant" y "titulo".

<script type="text/javascript">
var V=[{cant:23,titulo:'descrip_1'},{cant:37,titulo:'descrip_2'},{cant:56,titulo:'descrip_3'},{cant:18,titulo:'descrip_4'}];
function Graficar(vector){
    //retorna código html de la gráfica de los datos del vector
    max=vector[0].cant;
    //especificar el margin entre columnas del css
    margin=2.2;
    var output="";
    for (var i = 1; i < vector.length; i++) {
        if(vector[i].cant>max){max=vector[i].cant}
    }
    output='<div id="contenedor">'
    for (var i = 0; i < vector.length; i++) {
    output+='<div id="columna"style="width:'+((100-vector.length*margin)/vector.length)+'%;"title="'+vector[i].titulo+'">'
        output+='<div id="superior"style="height:'+(100-((vector[i].cant*100)/max))+'%"></div>'
        output+='<div id="inferior"style="height:'+((vector[i].cant*100)/max)+'%">'
            output+='<div id="datos">'+vector[i].cant+'</div>'
        output+='</div>'
    output+='</div>'
    }
    output+='</div>'
    return output;

}
document.write(Graficar(V));
</script>

Caso de uso con PHP:
Ahora vamos a usar el mismo algoritmo que usamos en javascript pero modificado para php, recuerda incluir los estilos css.
Para éste ejemplo tomamos un JSON y lo parseamos a un array de PHP con json_decode().

<?php
$V=json_decode('[{"cant":23,"titulo":"descrip_1"},{"cant":37,"titulo":"descrip_2"},{"cant":56,"titulo":"descrip_3"},{"cant":18,"titulo":"descrip_4"}]',true);
function Graficar($vector){
    //retorna código html de la gráfica de los datos del vector
    $max=$vector[0]['cant'];
    //especificar el margin entre columnas del css
    $margin=2.2;
    for ($i = 1; $i < count($vector); $i++) {
        if($vector[$i]['cant']>$max){$max=$vector[$i]['cant'];}
    }
    echo '<div id="contenedor">';
    for ($i = 0; $i < count($vector); $i++) {
    echo'<div id="columna"style="width:'.((100-count($vector)*$margin)/count($vector)).'%;"title="'.$vector[$i]['titulo'].'">';
        echo '<div id="superior"style="height:'.(100-(($vector[$i]['cant']*100)/$max)).'%"></div>';
        echo '<div id="inferior"style="height:'.(($vector[$i]['cant']*100)/$max).'%">';
            echo '<div id="datos">'.$vector[$i]['cant'].'</div>';
        echo '</div>';
    echo '</div>';
    }
    echo '</div>';
}

Graficar($V);
?>

Espero, haya sido de ayuda, mucha suerte con tu proyecto.