Gráficos de barra em um site

Question

Eu sou de nenhuma maneira um web designer, então eu gostaria de ajuda detalhada quanto você está disposto a dar.

Eu gostaria de fazer um site que que rastreia alguns dados que entram usando um gráfico de barras de 0-100%. Eu digite o número máximo o gráfico poderia ir e, em seguida, algum ponto de dados seria atualizado ocasionalmente, o que o gráfico de barras conclusão iria reflectir.

Como eu iria fazer isso?

Eu sei HTML básico e PHP, mas não usado tanto em um tempo muito longo.

Answer 1

Eu acho que a maioria das sugestões são um exagero. Não há necessidade de ter uma biblioteca extra / dependência quando tudo que você precisa é de alguns gráficos de barras simples. Plain HTML / CSS deve fazer ...

PS: exemplo de código rápida, só testei no 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>

Você pode alterar a largura das barras individuais facilmente com javascript (apenas alterar a largura).

Answer 2

Eu sei que você disse que você é novo, mas você deve dar uma olhada na API do Google visualização. Tem algumas coisas boas para fazer o tipo de coisa que você pode querer.
http://code.google.com/apis/visualization/

Answer 3

Há duas maneiras que você poderia resolver o problema; gerar o gráfico no backend (provavelmente usando PHP no seu caso) ou fazê-lo no lado do cliente usando javascript.

Eu não sei as especificidades de fazê-lo em PHP, como eu realmente não sei o idioma, mas tenho certeza que há um monte de informações lá fora, na geração de gráficos em PHP.

Para a abordagem javascript, eu usei tanto flot (para jQuery) e flotr (para protótipo) antes. Eu gosto deles muito, e há alguma boa documentação e exemplos para ambas as bibliotecas sobre como gerar todos os tipos de gráficos, incluindo gráficos de barras.