Gráficos fáceis de fazer com jQuery e Flot
{ Dezembro 6th, 2007 }
O jQuery muita gente já conhece. É uma biblioteca javascript, similar ao Prototype e ao mooTools, que tenho usado bastante.
O Flot é um plugin pro jQuery que facilita a criação de gráficos (veja vários exemplos mais legais que o meu na página do projeto). O interessante é que ele usa o canvas, um “novo” elemento HTML que é vetorial - uma área onde o Flash reinava absoluto até pouco tempo. Pra variar, o Internet Explorer não entende direito canvas, por isso tem uma gambiarra no código que - dizem eles - faz funcionar também no IE (Eu não descobri como fazer isso ainda…).
Peguei uns dados de uma matéria do G1 e formatei num gráfico com Flot pra testar como funciona. Dá pra perceber que ainda é versão 0.1, mas promete. Mesmo assim, foi fácil e rápido fazer este exemplo aqui.
Atualização: Foi só eu terminar de escrever que descobri que o Google lançou uma API para a produção de gráficos. Parece bem completa, tem recurso que não acaba mais. Testarei em breve.
Categories: Jornalismo, gráficos, jornalista-programador, jquery ~ No Tags ~ Trackback
6 de Dezembro de 2007 às 16:56
Pedro,
Eu nem deveria fazer parte do “grupo”, pois sou um programador lento (falta de prática é minha desculpa…), mas quantos jornalistas como nós você conhece aqui no Brasil que também programam (não vale HTML, flashzinhos e outras coisas básicas)?
Abraço!
CHARLAB
6 de Dezembro de 2007 às 17:34
Oi Charlab,
Que honra receber um comentário seu
Sei te dizer que pelo menos dois jornalistas com quem já trabalhei também gostam de ir a fundo na programação e mandam bem nas duas áreas, o Zé Lacerda e o Daniel Medeiros. Além deles não consigo lembrar de muita gente não… Acho que mais uns dois ou três conhecidos…
Sabe que eu não tinha pensado muito sobre isso ainda? Poderia ser bem proveitoso encontrar mais gente que faz a mesma coisa e trocar umas idéias.
Abraços!
27 de Dezembro de 2007 às 20:32
Caro Pedro Vc sabe me dizer como passar variáveis de um db para a função
var d2 = [[0, 5], [2, 8], [4, 5], [6, 13],[8, 5], [10, 8], [12, 5], [14, 13]] esses numeros eu gostaria de pegar de um db e passar para a variável!
obrigado
waldemar
27 de Dezembro de 2007 às 20:56
Waldemar,
Para puxar do banco de dados você precisa usar PHP, Python ou algo do tipo. Também daria pra puxar via Ajax se vc manja de Javascript. Dê mais detalhes que talvez eu consiga te ajudar melhor.
27 de Dezembro de 2007 às 21:10
Caro Pedro,
Você é rapido no gatilho! no caso eu gostaria de usar ASP, pegar as variáveis do DB eu sei, só não sei como passar para essa variável javascript!
muito obrigado!
abraços
waldemar
27 de Dezembro de 2007 às 22:35
Waldemar,
O javascript é executado no navegador, assim como o HTML. Todo código ASP é executado no servidor. Então, se você sabe jogar os valores puxados do banco pra HTML, consegue fazer a mesma coisa com javascript. Não vou me meter a te ensinar aqui pq não mexo em ASP desde 2003, mas é algo equivalente ao “echo” no PHP.
28 de Dezembro de 2007 às 16:13
Pedro,
O que eu precisava era jogar dados dentro desta variável
var d2 =[[2,100],[4,30],[8,66]];
Resolvi da seguinte maneira!
var x = 0
var x1 = 2
var x2 = 4
var y = 5
var y1 = 8
var y2 = 9
var d2 = [[x, y], [x1, y1], [x2, y2]];
Agora ficou baba!!
obrigado
waldemar
14 de Janeiro de 2008 às 22:06
Muito interessante essa biblioteca. Não conhecia. Aliás, fazia tempo que eu não entrava no teu Blog. Bastante novidade!
Abs
Daniel