Tooltip stacked column with 3 values array

Question

I have a json code like this

[[1385420403000,9.86,6.91],[1385506802000,11.89,6.57],[1385593203000,14.11,10.58],[1385679602000,9.1,8.9],[1385766003000,13.59,7.53],[1385852402000,10.68,6.69],[1385938803000,11.03,10.52],[1386025202000,11.16,8.18],[1386111603000,12,5.76]]

I want to display the 3rd value (this.z) on tooltip with highstock. This is my code to select data for the stacked column.

var date = [],
        hp = [],
        hc = [],
    datalength = data.length;
    for (i = 0; i < datalength; i ++) {
        date.push([
            data[i][0], // the date
        ]);
        hp.push([
            data[i][0], // the date
            data[i][1], // hp
        ]);
        hc.push ([
        data[i][0], // the date
        data[i][2], //hc
        ])     
    }

My tooltip :

tooltip: {
    backgroundColor: 'rgba(0, 0, 0, 0.75)',
    style: {
    color: '#F0F0F0'
    },
    formatter: function() {return ' ' +
Highcharts.dateFormat('%A %d %b %Y', this.x) +""+'<br />'+
'HP : ' + this.y + " kwh"+'<br />' +
'Prix HP : ' + Highcharts.numberFormat((this.y*0.1467),2)+" €" +'<br />'+
'HC : ' + this.z + " kwh"+'<br />' +
'Prix HC: ' + Highcharts.numberFormat((this.z*0.1002),2)+" €"+'<br />' +
'Prix total : ' + Highcharts.numberFormat(((this.y*0.1467)+(this.z*0.1002)),2)+" €";

}, }, And the series :

series: [{
            type: 'column',
            name: 'HP',
            data: hp,
            },{
            type: 'column',
            name: 'HC',
            data: hc,
            }]

this.z is undefined. How can i replace it ?

`z` is not what highcharts understands. It is your convention, you can attach the z value as an additional data and use it for tooltip like in this question http://stackoverflow.com/questions/8514457/set-additional-data-to-highcharts-series — Jugal Thakkar, Dec 25 '13 at 11:56

score 0 · Answer 1 · answered Dec 04 '13 at 20:59

To do this you would need to make a 3D set of data such that hp would look like:

{
type: 'column',
name: 'HP',
data: [
     {x:1385420403000, y:9.86, note:6.91},
     {x:1385506802000, y:11.89, note:6.57},
     {x:1385593203000, y:14.11, note:10.58},
     ....
     ]
}

To do that you would set you hp filler loop to look something like:

hp.push([
    data[i][0], // the date
    data[i][1], // hp
    data[i][2]  // the note item.
]);

If you look at your hp.push code you have a dangling comma and you are never actually looking at the 3rd element in your array. Then in your tooltip you would reference this.note.

Tooltip stacked column with 3 values array

1 Answers1