Highchart: add own calculation to tooltip

Question

I want to add a grade to the tooltip which is dependent on {point.y} from the tooltip. This is my conversion function:

function getGrade(score)
{
    if(score >= 5-4/6)
        return 'A';
    if(score >= 5-4/6*2)
        return 'B';
    if(score >= 5-4/6*3)
        return 'C';
    if(score >= 5-4/6*4)
        return 'D';
    if(score >= 5-4/6*5)
        return 'E';
    if(score >= 5-4/6*6)
        return 'F';
}

This is my config for the highchart:

$(function () {

    $('#container').highcharts({

        chart: {
            polar: true,
            type: 'line'
        },

        title: {
            text: 'Budget vs spending',
            x: -80
        },

        pane: {
            size: '80%'
        },

        xAxis: {
            categories: ['Sales', 'Marketing', 'Development', 'Customer Support', 
                    'Information Technology', 'Administration'],
            tickmarkPlacement: 'on',
            lineWidth: 0
        },

        yAxis: {
            gridLineInterpolation: 'polygon',
            lineWidth: 0,
            min: 0
        },

        tooltip: {
            shared: true,
            pointFormat: '<span style="color:{series.color}">{series.name}: <b>' + getGrade('{point.y:,.0f}') + '</b> ({point.y:,.0f})<br/>'
        },

        legend: {
            align: 'right',
            verticalAlign: 'top',
            y: 70,
            layout: 'vertical'
        },

        series: [{
            name: 'Allocated Budget',
            data: [1, 1, 2, 3, 4, 5],
            pointPlacement: 'on'
        }, {
            name: 'Actual Spending',
            data: [3, 4, 3, 2, 2, 2],
            pointPlacement: 'on'
        }]

    });
});

And here the whole code http://jsfiddle.net/A2uvs/

Does anyone one what's wrong?

Thanks in advance!

Answer 1

I feel its best to use tooltip:formatter, because you can use a function. Take a look at this fiddle. It might not be exactly formatted to what you want, but I believe I have gotten you most of the way there and the rest is styling for you to decide but functionality is there.

function getGrade(score){
    if(score >= 5-4/6)
        return 'A';
    if(score >= 5-4/6*2)
        return 'B';
    if(score >= 5-4/6*3)
        return 'C';
    if(score >= 5-4/6*4)
        return 'D';
    if(score >= 5-4/6*5)
        return 'E';
    if(score >= 5-4/6*6)
        return 'F';
}

$(function(){
    $('#container').highcharts({
        chart: {
            polar: true,
            type: 'line'
        },      
        title: {
            text: 'Budget vs spending',
            x: -80
        },
        pane: {
            size: '80%'
        },
        xAxis: {
            categories: ['Sales', 'Marketing', 'Development', 'Customer Support', 'Information Technology', 'Administration'],
            tickmarkPlacement: 'on',
            lineWidth: 0
        },
        yAxis: {
            gridLineInterpolation: 'polygon',
            lineWidth: 0,
            min: 0
        },
        tooltip: {
            shared: true,
            formatter: function() {
                var s = '<b>'+ this.x +'</b>';

                $.each(this.points, function(i, point) {
                    var tempcolor = point.series.color;
                    s += '<br/>'+ '<span style="color:'+ tempcolor+'">'+point.series.name +': '+ getGrade(point.y) +'('+point.y+')'+ '</span>';
                });
                return s;
            }
        },
        legend: {
            align: 'right',
            verticalAlign: 'top',
            y: 70,
            layout: 'vertical'
        },
        series: [{
            name: 'Allocated Budget',
            data: [1, 1, 2, 3, 4, 5],
            pointPlacement: 'on'
        }, {
            name: 'Actual Spending',
            data: [3, 4, 3, 2, 2, 2],
            pointPlacement: 'on'
        }]
    });
});