Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

want to sort highcharts tooltip results

I have 4 results inside my highcharts tooltip and they are not sorted they looks like this:

somerhing: 10 $
something: 18 $
something: 2 $
something: 8 $

I want to sort them from lowest $ to highest $ from 2$ to 18$ like this:

somerhing: 2 $
something: 8 $
something: 10 $
something: 18 $

Here is the highcharts loop for tooltip results:

      tooltip: {
           formatter: function() {
           var s = '<strong>something: '+ this.x +'</strong>';

           $.each(this.points, function(i, point) {
           s += '<br/>'+ point.series.name +': '+ point.y +currency;
           });

           return s;
           },

Any ideas how to sort it ?

Thanks.

like image 483
gt29 Avatar asked Jul 29 '11 01:07

gt29


People also ask

What is highchart tooltip?

The tooltip appears when hovering over a point in a series. By default the tooltip shows the values of the point and the name of the series. For the full set of options available for the tooltip, see the API reference.


2 Answers

Adding on to the above answer.

I wanted to have the default formatting of the tooltip as well. So I called tooltip.defaultFormatter.call(this, tooltip) inside the formatter callback.

Note that it is sorted in descending order. Just remove the items.reverse() if you want ascending order.

HighCharts v4.0.4

JSFiddle

function isArray(obj) {
    return Object.prototype.toString.call(obj) === '[object Array]';
}

function splat(obj) {
    return isArray(obj) ? obj : [obj];
}

$(function () {
    $('#container').highcharts({
        tooltip: {
            formatter: function (tooltip) {
                var items = this.points || splat(this),
                    series = items[0].series,
                    s;

                // sort the values
                items.sort(function(a, b){
                    return ((a.y < b.y) ? -1 : ((a.y > b.y) ? 1 : 0));
                });
                items.reverse();

                return tooltip.defaultFormatter.call(this, tooltip);
            },
            shared: true
        },
    });
});

HighCharts v3.0.2

Based on the defaultFormatter function with the above applied to it.

tooltip: {
    formatter: function (tooltip) {
        var items = this.points || splat(this),
            series = items[0].series,
            s;

        // build the header
        s = [series.tooltipHeaderFormatter(items[0])];

        // sort the values
        items.sort(function(a, b){
            return ((a.y < b.y) ? -1 : ((a.y > b.y) ? 1 : 0));
        });
        items.reverse();

        // build the values
        $.each(items, function (i, item) {
            series = item.series;
            s.push((series.tooltipFormatter && series.tooltipFormatter(item)) ||
                item.point.tooltipFormatter(series.tooltipOptions.pointFormat));
        });

        // footer
        s.push(tooltip.options.footerFormat || '');

        return s.join('');
    },
    shared: true
},
like image 54
Zren Avatar answered Oct 03 '22 10:10

Zren


Try this

tooltip: {
           formatter: function() {
           var s = '<strong>something: '+ this.x +'</strong>';

           var sortedPoints = this.points.sort(function(a, b){
                 return ((a.y < b.y) ? -1 : ((a.y > b.y) ? 1 : 0));
             });
           $.each(sortedPoints , function(i, point) {
           s += '<br/>'+ point.series.name +': '+ point.y +currency;
           });

           return s;
           },
like image 31
ShankarSangoli Avatar answered Oct 03 '22 11:10

ShankarSangoli