Geração de gráfico com node.js

[Osvaldo Zonetti]

Alguém já precisou servir gráficos estáticos direto do node? Se sim, qual lib/pacote recomenda? Estou fazendo uma pesquisa e não estou encontrando algo que seja bom o suficiente.

O próprio Highcharts não possui uma ferramenta para gerar backend, ele utiliza o phantomjs para renderizar no backend, porém como o gráfico se torna estático os recursos de visualização se perdem e não fica muito usual: http://export.highcharts.com/demo

Mesmo problema ocorre com o pacote quiche, que encapsula o Google Charts: https://github.com/ryanrolds/quiche.

[Alain Mouette]

Por definição gráficos estáticos são apenas uma imagem, geralmente .png. e portanto não tem nenhum recurso...

Talvez então você precise de algo não estático?

OBS, também estou interessado em gráficos dinamicos ;-)

Alain Mouette
=== Projetos especiais: <http://lnkd.in/dEu8cNq> ===

--
Você recebeu essa mensagem porque está inscrito no grupo "Node.js Brasil" dos Grupos do Google.
Para cancelar inscrição nesse grupo e parar de receber e-mails dele, envie um e-mail para nodebr+un...@googlegroups.com.
Para mais opções, acesse https://groups.google.com/d/optout.

[principe...@gmail.com]

d3?

[Osvaldo Zonetti]

Não me expressei direito :)

Preciso gerar gráficos como imagens estáticas mesmo, porém, as libs que citei ao fazerem isso acabam perdendo informações importantes do gráfico, como os valores dos registros, pois só são exibidos na "versão dinâmica" (clientside). Preciso de uma lib que gere gráficos estáticos como imagens porém exibindo e mantendo toda a informação.

[felipe huggler]

Grava no content type da imagem os dados

Em 25/05/2015 18:59, "Osvaldo Zonetti" <zon...@gmail.com> escreveu:

Não me expressei direito :)

Preciso gerar gráficos como imagens estáticas mesmo, porém, as libs que citei ao fazerem isso acabam perdendo informações importantes do gráfico, como os valores dos registros, pois só são exibidos na "versão dinâmica" (clientside). Preciso de uma lib que gere gráficos estáticos como imagens porém exibindo e mantendo toda a informação.

--

[principe...@gmail.com]

Nao tem como criar uma tabela com os dados ao lado do grafico e gerar a imaem depos?

[Filipe Sguarizi Panceri]

Ainda não entendi o problema... Desculpe a burrice, mas não da pra gerar a imagem e armazenar ela??

Filipe Sguarizi Panceri

[Osvaldo Zonetti]

Acho que é o jeito Igor.

[principe...@gmail.com]

Entao, vou alem, sugiro a criar o grafico e a coloca-lo num pdf junto com a tabela de dados, assim a apresentacao do mesmo fica mais visualmente elegante

--

[Gustavo Duarte]

Ola Osvaldo,

Acho que o node-canvas é sua melhor opção:

https://github.com/Automattic/node-canvas

É uma implementação server-side do HTML5 canvas. Dai você pode criar a imagem como quiser, e depois salvá-la no formato gráfico da sua escolha.

Outra possibilidade seria usar algo tipo phantom js para desenhar num headless browser e salvar o arquivo com output.

Espero que ajude,

Gustavo

--

[Alain]

Eu tambem nao entendi, parece ate uma contradição, que ele quer uma imagem estática mas com caracteristicas dinâmicas

Enviado através do AquaMail para Android
http://www.aqua-mail.com

[Gustavo Duarte]

Hmmm, agora fiquei curioso, reli a thread com calma.

Acho que a idéia é algo tipo "highcharts no servidor" mesmo, como o Osvaldo falou na msg inicial.

Estou imaginando que o objetivo é gerar uma chart no servidor que é servida como gráfico pro browser (tipo PNG mesmo), ao invés de desenhada no browser, mas que mantém um certo nível de dinamismo (tipo click handlers, por exemplo). Osvaldo, é por ai?

Um componente que já usei que faz isso foi o ChartDirector (http://www.advsofteng.com/), que gerava uma imagem estática para o browser + um HTML image map que mantinha um nível decente de dinamismo na UI. Mas isso foi em tipo 2009, quando tínhamos que lidar com IE 6 ou pior.

Mas imagino que dependendo do volume de dados ou complexidade dos cálculos, ainda faça sentido desenhar a chart server side, e ainda assim querer um certo dinamismo na UI.

[Guilherme Souza]

Resumindo, ele quer servir graficos via imagem, png, jog wtever ..

O problema é que as libs que fazem isso ocultam alguns dados.

Como ele faz pra exportar esses graficos com todos os digitos/porcentagens/etc ? 

Fim 

[Thiago Rodrigues]

Pelo que entendi, o problema de utilizar o PhantomJS é porque o gráfico client-side tem informações que só aparecem com interação do usuário, tipo um mouse-over ou algo do tipo. Então quando usa o phantomjs essas informações não vem.

Sendo assim, acredito que o seu problema ao utilizar o PhantomJS é em relação ao formato do gráfico que está exibindo. Ou seja, se você escolher utilizar um gráfico que já venha com essas informações exibidas no client, sem precisar de interação do usuário você vai ter a imagem que precisa exportada pelo Phantom.

Independente da Lib JS que usar pra gerar o gráfico, você pode utilizar a mesma técnica pra gerar a imagem usando o PhantomJs.

[ ]'s

Thiago Rodrigues
thiag...@gmail.com | github.com/trsouz
(21) 99735-3901 | (22) 99255-9856

[Bernardo Vieira]

No highcharts você pode configurar a exibição de labels com valores de forma estática, eg: http://www.highcharts.com/demo/line-labels. Tenho certeza que outras libs devem fornecer funcionalidade similar. Com o gráfico devidamente configurado o phantomjs cuida do resto direitinho. Não?

[Osvaldo Zonetti]

Exato Thiago. Jeito vai ser tentar gerar o highcharts com os dados expostos, apesar que não tive muito sucesso testando a demo deles com o server java que faz isso.

On Monday, May 25, 2015 at 2:58:58 PM UTC-3, Osvaldo Zonetti wrote: