Alterando o HighCharts (gerador de gráficos)

[Pedro H. Martins]

Fala galera,

é o seguinte... estou usando o HighCharts (gerador de gráficos)

em uns relatórios do meu sistema.

Só que o gráfico que ele me dá, por padrão quando eu passo o mouse

em uma barra, ele exibe o nome e as coordenadas,

que são respectivamentes os objetos name, x e y

Estou tentando fazer com que quando eu passe o mouse, apareça mais

uma informação personalizada, que eu mesmo colocarei.

Não consegui fazer funcionar da forma que tentei, então vou postar aqui

mesmo da forma errada, pois com certeza vendo a forma errada quem

souber utilizar o HighCharts vai entender o que eu estou pretendendo fazer e pode me ajudar:

$(function () {

var chart;

$(document).ready(function() {

chart = new Highcharts.Chart({

chart: {

renderTo: 'container',

type: 'line',

marginRight: 130,

marginBottom: 25

},

title: {

text: 'Monthly Average Temperature',

x: -20 //center

},

subtitle: {

text: 'Source: WorldClimate.com',

x: -20

},

xAxis: {

categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',

'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

},

yAxis: {

title: {

text: 'Temperature (°C)'

},

plotLines: [{

value: 0,

width: 1,

color: '#808080'

}]

},

tooltip: {

formatter: function() {

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

this.x +': '+ this.y +'°C'+

this.series.dados;

}

},

legend: {

layout: 'vertical',

align: 'right',

verticalAlign: 'top',

x: -10,

y: 100,

borderWidth: 0

},

series: [{

name: 'Tokyo',

dados: 'Teste',

data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]

}, {

name: 'New York',

dados: 'Teste',

data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]

}, {

name: 'Berlin',

dados: 'Teste',

data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]

}, {

name: 'London',

dados: 'Teste',

data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]

}]

});

});

});

O que está em vermelho é o que eu quero inserir,

O que está em cinza é o que já funciona perfeitamente e é nativo do sistema HighCharts!!

O erro que está dando é que exibe "UNDEFINED", por não estar resgatando o valor de

this.series.dados, que eu apliquei como 'Teste".

Sei que tá bem complexo a duvida... mas qm já usou e puder me ajudar... agradeço!

Valeu

Editado Maio 22, 2012 por Pedro H. Martins

[fiote]

Pedro, você está assumindo que o HighCharts pega tudo que é passado dentro do vetor series e salva para ser usado no display.

Conforme você mesmo reparou, não parece ser o caso. Você poderia tentar alterar o javascript do HighCharts, mas o código é bem extenso e não sei se você vai conseguir (eu tentei aqui e não consegui, lol). Porééééém, dá pra dar um migué no script =P

Você já sabe que ele entende o parâmetro "name", então você poder usar isso a seu favor.

Ao invés de fazer:

name: 'Tokyo'

Você pode fazer:

name: {'nome':'Tokyo', 'dados':'Extra', 'outroDado':'Super'}

E aí, na método tooltip, ao invés de usar:

return '<b>'+ this.series.name +'</b><br/>'+ this.x +': '+ this.y +'°C'+ this.series.dados

Você pode mudar para:

return '<b>'+ this.series.name.nome +'</b><br/>'+ this.x +': '+ this.y +'°C'+ this.series.name.dados

;)