Highcharts Demo

author(s): Torstein Hønsi

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 300px; min-width: 300px"></div>

JavaScript

$(function () {
    
    $('#container').highcharts({
        chart: {
            type: 'scatter'
        },
        title: {
            text: 'Scatter chart with shared tooltip demo'
        },
        subtitle: {
            text: 'On point mouse over or mouse out, the values corresponding points should show in tooltip.'
        },

        tooltip: {
            enabled: true,
            shared: true, // wont work for scatter
            formatter: function(args) {
                var this_point_index = this.series.data.indexOf( this.point );
                var this_series_index = this.series.index;
                var that_series_index = this.series.index == 0 ? 1 : 0; // assuming 2 series
                var that_series = args.chart.series[that_series_index];
                var that_point = that_series.data[this_point_index];
                return 'Client: ' + this.point.name +
                    '<br/>Client Health: ' + this.x +
                    '<br/>' + this.series.name + ' Bandwidth: ' + this.y + 'Kbps' +
                    '<br/>' + that_series.name + ' Bandwidth: ' + that_point.y + 'Kbps';
            }
        },
        
        series: [{
            name: 'Channel 1',
            data: [{name: 'client1', x: 10, y: 34}, {name: 'client2', x: 25, y: 56}, {name: 'client3', x: 40, y: 432}, {name: 'client4', x: 82, y: 234}, {name: 'client5', x: 95, y: 73}]
        }, {
            name: 'Channel 2',
            data: [{name: 'client1', x: 10, y: 53}, {name: 'client2', x: 25, y: 63}, {name: 'client3', x: 40, y: 12}, {name: 'client4', x: 82, y: 73}, {name: 'client5', x: 95, y: 235}]
        }]
    });
});