Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Adding new data to highchart tooltip [duplicate]

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

like image 597
NestedCodeblocksFTW Avatar asked Nov 26 '12 05:11

NestedCodeblocksFTW


1 Answers

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

like image 144
Jugal Thakkar Avatar answered Sep 27 '22 22:09

Jugal Thakkar