Los gráficos de barras en un sitio web

Question

Estoy de ninguna manera un diseñador de páginas web, así que me gustaría ayuda lo más detallado que está dispuesto a dar.

Me gustaría hacer un sitio web que rastrea que algunos datos que ingresa mediante un gráfico de barras de 0-100%. Me entro el número máximo la gráfica podría ir a algún momento y luego los datos se actualizarán ocasionalmente, lo que reflejaría el gráfico de barras finalización.

¿Cómo voy a ir haciendo esto?

Yo sé HTML básico y PHP, pero no lo he utilizado, ya sea en un tiempo muy largo.

Answer 1

Creo que la mayoría de las sugerencias son una exageración. No es necesario tener una biblioteca / dependencia adicional cuando todo lo que necesita es algo de gráficos de barras simples. HTML plano / CSS debe hacer ...

PS: ejemplo de código rápido, solamente probado en Firefox 3.x

<style type="text/css">
.bar
{
    background-color: green;
    position: relative;
    height: 16px;
    margin-top: 8px;
    margin-bottom: 8px; 
}
</style>

<div id="barcontainer" style="width:200px;">
    <div id="bar1" class="bar" style="width:43%;"></div>
    <div id="bar2" class="bar" style="width:12%;"></div>
    <div id="bar3" class="bar" style="width:76%;"></div>
    <div id="bar4" class="bar" style="width:100%;"></div>
</div>

Puede cambiar el ancho de las barras individuales fácilmente con javascript (sólo cambia el ancho).

Answer 2

Sé que usted ha dicho que es nuevo, pero usted debe echar un vistazo a la API de visualización de Google. Tiene algunas cosas buenas para hacer el tipo de cosas es posible que desee.
http://code.google.com/apis/visualization/

Answer 3

Hay dos maneras que usted puede hacer frente a este problema; generar el gráfico en el backend (probablemente usando PHP en su caso) o hacerlo en el lado del cliente usando JavaScript.

No estoy seguro de los detalles de hacerlo en PHP, ya que no se sabe muy bien el idioma, pero estoy seguro de que hay una gran cantidad de información que hay en la generación de gráficos en PHP.

Para el enfoque Javascript, que he usado tanto flot (por jQuery) y flotr (por prototipo) antes. Me gustan mucho, y hay algo de buena documentación y ejemplos para ambas bibliotecas sobre cómo generar todo tipo de gráficos, incluyendo gráficos de barras.