Exemplo de gráfico com Highcharts
524 views
Skip to first unread message
Alessandro Carvalho Coutinho
Apr 6, 2014, 7:14:10 AM4/6/14
to web2py-us...@googlegroups.com
Ola,
Conheci o web2py há menos de 1 mês, não sou programador, apesar de ser analista de sistemas. Comecei a procurar uma linguagem de programação que fosse fácil, pois o objetivo é resolver problemas e principalmente me livrar do excel, não aguento mais ver as pessoas, todas as semanas, perdendo horas tratando a informação csv, importando para o excel, filtrando, criando tabela dinâmica e gerando gráficos. Foi diante deste cenário que conheci o framework web2py e como eu já conhecia o básico de python resolvi testar.
Ok, agora segue minha primeira contribuição. Criei um db simples, no qual a pessoa cadastra o estado e o valor, estas informações são tratadas e associadas a variáveis, estas variáveis alimentam o gráfico highcharts. Caso novas informações sejam cadastradas na tabela, é só atualizar a página do browser.
Obs.: Os códigos abaixo estão funcionando, mas fiquem a vontade para critica-los, pois com certeza deve existir melhores formas. Em vez do for eu gostaria que tivesse funcionado somente com selects no DAL, mas tudo bem.
1 - Criei uma aplicação chamada: "estoque"
2 - Models:
Adicione no final do arquivo: db.py
db.define_table(
'estados',
Field('nome'),
Field('valor','integer')
)
3 - Controler:
Criei o arquivo: grafico.py com o conteudo:
# coding: utf8
def exibedados():
valoroutros = 0; valorsp = 0
rows = db(db.estados.nome!=None).select()
for row in rows:
if row.nome == "Sao Paulo":
sp = row.nome
valorsp += row.valor
else:
outros = "outros"
valoroutros += int(row.valor)
return dict(sp=sp,valorsp=valorsp,outros=outros,valoroutros=valoroutros)
4 - Na view:
Criei o arquivo: grafico/exibedados.html
{{extend 'layout.html'}}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Exemplo de gráfico de pizza utilizando o Highcharts</title>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Microcomputadores por localidade'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
series: [{
type: 'pie',
name: 'Percentual',
data: [
['{{=sp}}',{{=valorsp}}],
['{{=outros}}',{{=valoroutros}}]
]
}]
});
});
</script>
</body>
</html>
5 - Volte para o models --> Administração de Banco de Dados e crie um novo registro para: db.estados
Nome: Sao Paulo
Valor: 700
Nome: Rio de Janeiro
Valor: 300
Nome: Minas Gerais
Valor: 200
6 - Para ver o resultado acesse: http://127.0.0.1:8000/estoque/grafico/exibedados
[]s,
Alessandro
Diogo Munaro
Apr 6, 2014, 9:10:10 AM4/6/14
to web2py-us...@googlegroups.com
Muito bom Alessandro! Pode botar o app num github da vida para contribuirmos? Se precisar de ajuda fala.
--
Você recebeu essa mensagem por estar inscrito no grupo web2py-users-brazil.
Para enviar uma mensagem ao grupo, envie email a: web2py-us...@googlegroups.com
Para se desinscrever, envie email a: web2py-users-br...@googlegroups.com
Para mais opções, visite o site do grupo em: http://groups.google.com/group/web2py-users-brazil?hl=en
---
Você recebeu essa mensagem porque está inscrito no grupo quot;web2py-users-brazil" dos Grupos do Google.
Para cancelar inscrição nesse grupo e parar de receber e-mails dele, envie um e-mail para web2py-users-br...@googlegroups.com.
Para mais opções, acesse https://groups.google.com/d/optout.
Reply all
Reply to author
Forward
0 new messages