Javascript: Graphic Generator

Gráfico

Esses dias um pouco inspirado com a aula de Probabilidade e Estatística, resolvi fazer um script para gerar gráficos de barras.

Você cria um novo objeto Grafico (sem acento mesmo – new Grafico(n); ) passando o número de barras como parâmetro e então a partir dele com set’s e get’s você gera o seu gráfico.

Não vou explicar aqui linha por linha porque o código não está pequeno e também porque está bem simples de entender. Mas havendo alguma dúvida é só deixar um comentário que logo eu respondo.

Clique aqui para vê-lo funcionando.

O código que gerou o gráfico da imagem ao lado é o seguinte:

var grafico = new Grafico(11);
grafico.setSize("200px");
grafico.setTitle("Grafico de Barras");
grafico.setSource("Fonte: Fictícia");
grafico.setBarraSize(0, "80%");
grafico.setBarraLabel(0, "manga");
grafico.setBarraSize(1, "30%");
grafico.setBarraLabel(1, "banana");
grafico.setBarraSize(2, "50%");
grafico.setBarraLabel(2, "maracuja");
grafico.setBarraSize(3, "100%");
grafico.setBarraLabel(3, "melancia");
grafico.setBarraSize(4, "70%");
grafico.setBarraLabel(4, "maracuja");
grafico.setBarraSize(5, "76%");
grafico.setBarraLabel(5, "pera");
grafico.setBarraSize(6, "30%");
grafico.setBarraLabel(6, "uva");
grafico.setBarraSize(7, "47%");
grafico.setBarraLabel(7, "melao");
grafico.setBarraSize(8, "25%");
grafico.setBarraLabel(8, "laranja");
grafico.setBarraSize(9, "90%");
grafico.setBarraLabel(9, "abacaxi");
grafico.setBarraSize(10, "10%");
grafico.setBarraLabel(10, "kiwi");

[update]

Faça o download do exemplo aqui (.rar)

[/update]


		

8 thoughts on “Javascript: Graphic Generator

  1. Malinosky

    Amigo, estou vasculhando a Web em busca de alguma forma inteligente de representar gráficos dinamicamente a partir de variáveis do MS Excell. Sua solução parece simples e inteligente. Poderia dar-me mais detalhes sobre este código, pois não sou programador, sou web designer…
    Obrigado

    Responder
  2. Israel

    Oi! Fiz o que manda o figurino, mas algo não confere!
    Na tela aparecem marcadores ao lado da palavra e a barra grafica não aparece!
    O html puxa o arquivo js, mas na hora parece que fica faltando o grafico pois os links podem ser acessados

    Responder
  3. suelen

    sobre os marcadores aconteceu comigo tb, dei uma olhada nocódigo e parece-me que falta o arquivo grafico.css… poderia disponibilizar?

    Responder
  4. suelen

    Ah.. consegui pegar pelo mesmo link… obrigada… os requisitos para que seu grafico funcione é ter o .html, .js e o .css.

    Att mais.

    Responder

Deixe uma Resposta

Preencha os seus detalhes abaixo ou clique num ícone para iniciar sessão:

Logótipo da WordPress.com

Está a comentar usando a sua conta WordPress.com Terminar Sessão / Alterar )

Imagem do Twitter

Está a comentar usando a sua conta Twitter Terminar Sessão / Alterar )

Facebook photo

Está a comentar usando a sua conta Facebook Terminar Sessão / Alterar )

Google+ photo

Está a comentar usando a sua conta Google+ Terminar Sessão / Alterar )

Connecting to %s