Adding new data to highchart tooltip

Question

Possible Duplicate:
Set Additional Data to highcharts series

So I have this graph: http://jsfiddle.net/Gg3ZL/

And I want to replace in the tooltip where it currently says "Total Players Online" with new data from another

Array= ['PlayerX, PlayerY, PlayerZ', 'Player1, Player2, Player3'];

etc

So that it matches with the very first result in the first series data entry....

Even better if I didn't have to replace the "Total Players Online: " and instead just had another new entry in the tooltip like "Who's Online: ".

Basically mouse over an entry and see which players were online at that particular time on the tooltip.

Thanks for any help

You want to show all N no. of Player named in the tooltip. What if you have 50 names ? Tool tip size will be much more. — Hardik Mishra, Nov 26 '12 at 07:08
Yeh there that, and not to mention the amount of data for it all overtime... but that part wouldn't be viewed public and the result selection would be smaller. And for the tooltip size well I'd just use a smaller font. — NestedCodeblocksFTW, Nov 26 '12 at 07:38
@HardikMishra yes the tooltip may bloat a lot, but I think now highcharts allows a completely HTMLly tooltip so you can have things like scrollbar and all, PS: not tried it myself yet — Jugal Thakkar, Nov 26 '12 at 11:24
Zooming is just one of the ways, with css and javascript, better visualizations like pagination,etc can be achieved if showing the players' list is a must use case — Jugal Thakkar, Nov 26 '12 at 11:31

score 17 · Accepted Answer · answered Nov 26 '12 at 11:21

You can attach the additional data with each point in the series.data as follows

series: [{
    name: 'Series 1',
    data: [{
        y: 2,
        players: ['a', 'b']},
    {
        y: 3,
        players: ['a', 'b', 'c']},
    {
        y: 2,
        players: ['x', 'y']},
    {
        y: 4,
        players: ['a', 'b', 'c', 'd']}
    ]
}]

Now in the tooltip.formatter you can consume the additional data as follows

formatter: function() {
    var result = '<b>' + Highcharts.dateFormat('%A, %b %e, %Y', this.x) + '</b>';
    $.each(this.points, function(i, datum) {
        result += '<br />' + datum.y + ' players online';
        $.each(datum.point.players, function() {
            result += '<br/>' + this;
        });
    });
    return result;
}

Complex tooltip | Highchart & Highstock @ jsFiddle

Adding new data to highchart tooltip

1 Answers1