Dúvida com HighCharts

[Diego]

Bom dia amigos,

Estou com um pequeno problema que não estou sabendo como resolver.

Estou utilizando o HighCharts em um projeto, onde ele lê os dados de uma tabela HTML e monta o gráfico.

Está tudo funcionando, porém com um detalhe:

Os números com que trabalho são muito grandes e ao utilizar o number_format() para exibí-los de uma forma mais amigável ao usuário, o gráfico fica "maluco" e faz uma arredondamento maluco e aí as barras do meu gráfico não condizem com a realidade dos valores exibidos.

Esclarecendo melhor:

Se o número está assim: 21059650 .. o gráfico é montado perfeitamente.

Mas quando o número está com o number_format fica da forma correta: 21.059.650 ... PORÉM o gráfico cria as barras com tamanhos errados porque ele entende o valor desta forma: 21,06 , ou seja, ele arredonda. Ele acha que o ponto é um separador decimal e não de milhão.

Como faço para corrigir isso?

--

Diego Cavalcanti

[Rubens Takiguti Ribeiro]

Diego, provavelmente o HighCharts só vai aceitar números no formato do JavaScript.

O que você pode fazer é ajustar a sua tabela, mantendo o valor formatado para pt-BR e incluindo o valor no formato do JavaScript. Esse valor no formato do JavaScript pode ficar dentro da célula da tabela, mas em uma tag <meta>, por exemplo, que é invisível. Então você ajusta o seu código para obter o valor da tag meta ao invés do conteúdo da célula da tabela.

Para o HighCharts exibir o valor formatado em pt-BR, vi que existem alguns "formatadores" passados via callback. Veja: http://api.highcharts.com/highcharts#tooltip.formatter

Rubens Takiguti Ribeiro
Bacharel em Ciência da Computação - UFLA
Zend Certified Engineer - PHP 5
http://rubsphp.blogspot.com.br/

--
============================================================
JQUERY MAGAZINE > http://www.jquerymagazine.com.br
--
PHP MAGAZINE > http://www.phpmagazine.com.br
--
LISTA NODE.JS > https://groups.google.com/group/lista-nodejs?hl=pt-br
--
AJAX-BRASIL > http://groups.google.com/group/ajax-brasil
--
PYTHON-GOOGLE > http://groups.google.com.br/group/python-google
--
DOTNET-BRASIL > http://groups.google.com.br/group/dotnet_br
============================================================

[Diego]

Obrigado pela resposta Rubens.

Quando o PHP não está com o number_format() o tooltip do gráfico é mostrado corretamente, pois o meu tooltip está assim:

tooltip: {

    formatter: function() {

           return '<b>'+ this.series.name +'</b><br/>'+

           this.y.formatNumber(2,',','.') +' '+ this.x;

    }

}

Cara, entendi o que você quis dizer. Mas como ficaria essa tag <meta> dentro da minha tabela? Eu passaria o valor em que atributo da tag <meta> ?

Sobre o javascript pra entender a tag <meta>, bastaria eu trocar essa linha:

$('th, td', tr).each( function(j) { ...}

por esta:

$('th, meta', tr).each( function(j) { ...}

É isso?

--

Diego Cavalcanti

[Jefferson Maran - contato]

fala fera se for valores pode tentar assim

number.toPrecision(x)

no javascript antes de renderizar seu grafico posta o resultado, abçs

Em 13 de novembro de 2012 09:45, Diego <dieg...@gmail.com> escreveu:

[Pablo Sanches]

Cara, tive o mesmo problema, você tem a opção de enviar os numeros para legenda pra justamento você não tentar formatar o número.

da uma olhada na documentação do plugin... Procure por plotOptions.

Em 13 de novembro de 2012 09:45, Diego <dieg...@gmail.com> escreveu:

--
============================================================
JQUERY MAGAZINE > http://www.jquerymagazine.com.br
--
PHP MAGAZINE > http://www.phpmagazine.com.br
--
LISTA NODE.JS > https://groups.google.com/group/lista-nodejs?hl=pt-br
--
AJAX-BRASIL > http://groups.google.com/group/ajax-brasil
--
PYTHON-GOOGLE > http://groups.google.com.br/group/python-google
--
DOTNET-BRASIL > http://groups.google.com.br/group/dotnet_br
============================================================

--
Att,
Pablo R. Sanches
Webmaster

[Francis Wecker]

formatar os plotOptions: http://api.highcharts.com/highcharts#plotOptions.column.dataLabels.formatter

toolTip: http://api.highcharts.com/highcharts#tooltip.formatter

Em 13 de novembro de 2012 10:07, Francis Wecker <frwe...@gmail.com> escreveu:

nas series de dados, voce deve mandar o valor real;

nos tooltips e nos plotOptions(valor emcima de cada barra) vc aplica uma funçao que formata os dados para o usuario.

Em 13 de novembro de 2012 09:45, Diego <dieg...@gmail.com> escreveu:

[Francis Wecker]

nas series de dados, voce deve mandar o valor real;

nos tooltips e nos plotOptions(valor emcima de cada barra) vc aplica uma funçao que formata os dados para o usuario.

Em 13 de novembro de 2012 09:45, Diego <dieg...@gmail.com> escreveu:

[Diego]

Obrigado pessoal, vamos as dúvidas:

Eu não devo utilizar o plotOptions, pois o meu gráfico é desse tipo:

http://www.highcharts.com/demo/column-parsed

Ou seja, existirão momentos que terão 4 barras para cada valor do eixo X, então ficará impossível do cliente ler a informação.

Eu já estou formatando a opção no ToolTip. Mas a minha tabela HTML precisa ser formatada para o formato correto.

Nao posso mostrar um valor 21059650 para o cliente, mas sim 21.059.650

O meu problema é exatamente esse: No HTML preciso mostrar o valor 21.059.650 mas o gráfico bagunça, pq ele só fica correto quando o HTML está com 21059650.

O colega Rubens entendeu o meu problema, mas não consegui fazer com a dica dele.

Lembro que a minha tabela já está formatada, e DEPOIS que o gráfico é gerado.

Vejam que no link que enviei acima, ele monta o gráfico a partir de um retorno HTML, é exatamente o que estou fazendo.

Vocês conhecem alguma forma?

--

Diego Cavalcanti

[Francis Wecker]

ah, cria um campo/span/td escondida com o valor real :)

[Diego]

Eu pensei em fazer isso, mas achei uma tremenda gambiarra (kkkkkkkkk).

Achei que existiria algo nativo no HighCharts pra contornar essa situação.

Para o Highcharts entender o span eu tenho de mudar o que no Javascript?

O meu está parecido com o existente nesse site (no botão "View Options"):

http://www.highcharts.com/demo/column-parsed

--

Diego Cavalcanti