Highcharts中的工具提示

Question

I've a function which draws a column charts. I want to add extra information to the tooltip.

Here is my function

function arm_bar_graph(result){

    $('#arms_graph').highcharts({
        chart: {
            type: 'column',
            backgroundColor : '#fafafa',
            height : 300,
        },
        title: {
            text: 'Load Per Arm / Open Shipments'
        },
        subtitle: {
            text: ''
        },
        xAxis: {
            categories: result[0],
            labels: {
                    rotation: -45,
                    align: 'right',
                    style: {
                        fontSize: '13px',
                        fontFamily: 'Verdana, sans-serif'
                    }
                }
        },
        yAxis: {
            min: 0,
            title: {
                text: ''
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y}</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        credits: {
            enabled: false
        },
        series: [{
            data: result[1],
            name : 'Open Shipments',
        },
        ]
    });
}

result is

[
    [
        u'Arm1',
        u'Arm10',
        u'Arm2',
        u'Arm3',
        u'Arm4',
        u'Arm5',
        u'Arm6',
        u'Arm7',
        u'Arm8',
        u'Arm9'
    ],
    [
        10,
        8,
        9,
        7,
        6,
        5,
        4,
        3,
        2,
        1
    ],
    {
        u'Arm10': {
            'bags_closed_per_arm': 0,
            'total_pptls_per_arm': 40,
            'last_bagged_on_arm_time': 'NoBagsclosedinthisinterval.',
            'total_shipments_per_arm': 0,
            'bags_open_per_arm': 0,
            'last_packet_scan_arm_time': 'NoShipmentscannedonthisarm.'
        },
        u'Arm8': {
            'bags_closed_per_arm': 0,
            'total_pptls_per_arm': 24,
            'last_bagged_on_arm_time': 'NoBagsclosedinthisinterval.',
            'total_shipments_per_arm': 0,
            'bags_open_per_arm': 0,
            'last_packet_scan_arm_time': 'NoShipmentscannedonthisarm.'
        },
        u'Arm9': {
            'bags_closed_per_arm': 0,
            'total_pptls_per_arm': 19,
            'last_bagged_on_arm_time': 'NoBagsclosedinthisinterval.',
            'total_shipments_per_arm': 0,
            'bags_open_per_arm': 0,
            'last_packet_scan_arm_time': 'NoShipmentscannedonthisarm.'
        },
        u'Arm6': {
            'bags_closed_per_arm': 0,
            'total_pptls_per_arm': 0,
            'last_bagged_on_arm_time': 'NoBagsclosedinthisinterval.',
            'total_shipments_per_arm': 0,
            'bags_open_per_arm': 0,
            'last_packet_scan_arm_time': '1970-01-0100: 00: 00+00: 00'
        },
        u'Arm7': {
            'bags_closed_per_arm': 0,
            'total_pptls_per_arm': 22,
            'last_bagged_on_arm_time': 'NoBagsclosedinthisinterval.',
            'total_shipments_per_arm': 0,
            'bags_open_per_arm': 0,
            'last_packet_scan_arm_time': 'NoShipmentscannedonthisarm.'
        },
        u'Arm4': {
            'bags_closed_per_arm': 0,
            'total_pptls_per_arm': 0,
            'last_bagged_on_arm_time': 'NoBagsclosedinthisinterval.',
            'total_shipments_per_arm': 0,
            'bags_open_per_arm': 0,
            'last_packet_scan_arm_time': '1970-01-0100: 00: 00+00: 00'
        },
        u'Arm5': {
            'bags_closed_per_arm': 0,
            'total_pptls_per_arm': 24,
            'last_bagged_on_arm_time': 'NoBagsclosedinthisinterval.',
            'total_shipments_per_arm': 0,
            'bags_open_per_arm': 0,
            'last_packet_scan_arm_time': 'NoShipmentscannedonthisarm.'
        },
        u'Arm2': {
            'bags_closed_per_arm': 0,
            'total_pptls_per_arm': 10,
            'last_bagged_on_arm_time': 'NoBagsclosedinthisinterval.',
            'total_shipments_per_arm': 0,
            'bags_open_per_arm': 0,
            'last_packet_scan_arm_time': 'NoShipmentscannedonthisarm.'
        },
        u'Arm3': {
            'bags_closed_per_arm': 0,
            'total_pptls_per_arm': 24,
            'last_bagged_on_arm_time': 'NoBagsclosedinthisinterval.',
            'total_shipments_per_arm': 0,
            'bags_open_per_arm': 0,
            'last_packet_scan_arm_time': 'NoShipmentscannedonthisarm.'
        },
        u'Arm1': {
            'bags_closed_per_arm': 0,
            'total_pptls_per_arm': 40,
            'last_bagged_on_arm_time': 'NoBagsclosedinthisinterval.',
            'total_shipments_per_arm': 0,
            'bags_open_per_arm': 0,
            'last_packet_scan_arm_time': 'NoShipmentscannedonthisarm.'
        }
    }
]

I want to add more information to the tooltip which is contained in the dictionary provided in result. How can I do that? Currently the tooltip shows the Y-axis value ,ie result[1] values.

How do I add values from the dictionary as well?

Answer 1

you can do it using tooltip.formatter callback

ToolTip formatter callback code:

tooltip: {
     formatter: function() {
          return 'The value for <b>' + this.x + '</b> is <b>' + this.y + '</b>, in series '+ this.series.name;
     }
}

REF: http://api.highcharts.com/highcharts#tooltip.formatter

WORKING DEMO ON JSFIDDLE

Happy Coding :)

Answer 2

From following the @dreamweiver example http://api.highcharts.com/highcharts#tooltip.formatter

I needed the following as my this.x was displaying as a huge number eg 1395187200000 now displays happily as Thursday, Feb 06, 2014

Highcharts.dateFormat('%A, %b %e, %Y', this.x)