Jugal | Complex tooltip | Highchart & Highstock

http://stackoverflow.com/questions/13559006/adding-new-data-to-highchart-tooltip Jugal Thakkar http://jugal.me/

by Jugal Thakkar

HTML

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js" ></script>
<script type="text/javascript" src="http://code.jugal.me/js/jugalsLib.js" ></script>
<script type="text/javascript" src="http://code.highcharts.com/stock/highstock.src.js" ></script>
<script type="text/javascript" src="http://code.highcharts.com/stock/modules/exporting.src.js" ></script>

<div id="container"></div>

CSS

#container{
    min-width:500px;
}

JavaScript

var chartingOptions = {
    tooltip: {
        shared: true,
        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;
        }
    },
    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']}
        ]
    }]

};

chartingOptions = $.extend({}, jugalsLib.getBasicChartOptions(), chartingOptions);
var chart = new Highcharts.StockChart(chartingOptions);