Highcharts tool-tip show extra data

Question

I am trying to add data to my tool-tips in highcharts. I import data with CSV, but for this code I put the data in a var. Normally my data is formatted by: Name, startDate, EndDate in the CSV. Now I want to attempt to use: Name, startDate, endDate, eventType, unitType.

I am trying to figure out how to get my data eventType and unitType to display in the tool-tips. I did try to push data to the series.data.composition, but I guess I was doing wrong!

As a bonus, dates that are just 1 day wide do not appear to show, but they are there, just too thin to see, anyone know of a solution? I hacked around the theme for some time, but did not seem to help.

Here is my JSFiddle code.

var options = {
    chart: {
        zoomType: 'y',
        borderWidth: '0',
        borderRadius: '15',
        renderTo: 'container',
        inverted: true,
        backgroundColor: {
            linearGradient: [0, 0, 500, 500],
            stops: [
                [0, 'rgb(44, 44, 58)'],
                [1, 'rgb(62, 62, 62)']
            ]
        },
        plotBackgroundColor: 'rgba(255, 255, 255, .9)'
    },
    tooltip: {
        useHTML: true,
        formatter: function () {
            var point = this.point;
            return '<table><tr>' + point.category + '</tr><tr><td style="color:#00CC00">Start:</td><td style="text-align: right">' + Highcharts.dateFormat('%b %e, %Y', point.low) + '</td></tr><tr><td style="color:#FF0000">Finish:</td><td>' + Highcharts.dateFormat('%b %e, %Y', point.high) + '</td></tr><tr><td>Unit:</td> <td></tr></table>'
        }
    },
    subtitle: {
        text: 'MTC'
    },
    credits: {
        text: 'MTC',
        href: 'myLink'
    },
    legend: {
        enabled: true
    },
    title: {
        text: 'Calendar'
    },
    xAxis: {
        categories: []
    },
    plotOptions: {
        series: {
            grouping: false
        }
    },
    yAxis: {
        type: 'datetime',
        minRange: 0,
        startOnTick: false,
        endOnTick: false,
        title: {
            text: 'yAxis'
        }
    },
    series: []
},
categories = [];;


var data = "Soldier 1,12/1/2013,12/10/2013,Training 1,Unit 1,4/8/2014,4/10/2014,Training 3,Unit 7\nSoldier 2,4/15/2013,4/18/2013,Training 2,Unit 2,4/20/2014,4/23/2014,Training 4,Unit 8\nSoldier 3,6/3/2013,6/3/2013,Training 31,Unit 3,8/12/2014,8/13/2014,Training 66,Unit 9,6/15/2013,6/22/2013,Train 92,Unit 44\nSoldier 4,10/10/2013,10/12/2013,Training 9,Unit 4,10/13/2013,10/19/2013,Training 6,Unit 10\nSoldier 5,9/20/2013,9/24/2013,Training 5,Unit 5";
var lines = data.split('\n');

$.each(lines, function (lineNo, line) {
    var items = line.split(','),
        iLen = items.length,
        series = {
            type: 'columnrange',
            data: [],
            name: items[0],
            composition: []
        };

    categories.push(items[0]);
    for (var i = 1; i < iLen; i += 2) {
        var from = (new Date(items[i])).getTime(),
            to = (new Date(items[i + 1])).getTime();
        if (!isNaN(from) && !isNaN(to)) {
            series.data.push([lineNo, from, to]);
        }
    };
    options.series.push(series);
});

options.xAxis.categories = categories;

var chart = new Highcharts.Chart(options);

Did you try this: http://stackoverflow.com/questions/16093870/attach-arbitrary-data-to-highcharts-data-points — Jack.R.Abbit, Sep 20 '13 at 16:54

score 1 · Accepted Answer · answered Sep 20 '13 at 21:02

Your fiddle with new data push and formatter: http://jsfiddle.net/WXLaN/2/

Key thing to note is the data push loop:

for (var i = 1; i < iLen; i += 4) {
    var from = (new Date(items[i])).getTime(),
        to = (new Date(items[i + 1])).getTime();
    var point = {
        x: lineNo,
        low: from,
        high: to,
        event: (items[i + 2]),
        unit: (items[i + 3])
    };
    if (!isNaN(from) && !isNaN(to)) {
        series.data.push(point);
    }
};

Because the data lines are now 4 blocks of data, the inc was set to 4. In order to use the custom data fields, you need to push in an object with the required info and the additional info. Your required info is the X, low & high. The extra info is the event & unit. All of these things are available in the formatter in the point.options object and referenced by the same same you give them in the data push loop.

Thanks Jack. Really appreciated. I banged my head trying to learn JS for this damn calendar, but guys like you make it a lot easier than it could be! — D_M, Sep 20 '13 at 22:02

Highcharts tool-tip show extra data

1 Answers1