CODEWITHSUNDEEP
jqueryhighcharts
Aknorw
Aknorw

Reputation: 5

Format tooltip according to series in Highcharts

I'm using Highcharts to create charts for a web application. I have to display a chart with 2 yAxis : first one for decimals, and second one for hours.

To display hours, I've converted my date in seconds, put them in several series, then used this script to format the hours :

function secondsTimeSpanToHMS(s) {
var h = Math.floor(s / 3600);
s -= h * 3600;
var m = Math.floor(s / 60);
s -= m * 60;
return h + ":" + (m < 10 ? '0' + m : m) + ":" + (s < 10 ? '0' + s : s);
}

...
labels: {
  formatter: function () {
    return secondsTimeSpanToHMS(this.value);
  }
}

This axis and my series are displayed well, but now I'm struggling to display a shared tooltip, as I have other axes which are decimals.

Here's my code for the tooltip :

tooltip: {
  enabled:true,
  shared: true,
  formatter:function(){
    var s = '<b>'+ this.x +'</b>';
    $.each(this.points, function(i, point) {
      s += '<br/>'+ point.series.name +': '+secondsTimeSpanToHMS(point.y);
    });
  return s;
  }
}

The problem is my decimal series are converted to HMS. I don't know how to select only several series and format them, and let other series displayed the way they are written in my series.

Here's the fiddle I used. Series 1,2,3,4,5 are hour-based, and C1,C2 are decimal.

http://jsfiddle.net/wrnk/JdktQ/

Upvotes: 0

Views: 432

Answers (1)

Rob Schmuecker
Rob Schmuecker

Reputation: 8954

You can specify a custom object in your series data such as: (note mytype is just an example, it could be partyTime or anything else for that matter)

{
            name: '5',
            type: 'column',
            yAxis: 1,
            data: [17211, 22057, 18981, 16758, 2429]
        }, {
            name: 'C1',
            data: [10.69, 10.1, 9.79, 11.42, 14.61],
            color: '#000000',
            mytype: 'decimal' //<---- Here
        }, {
            name: 'C2',
            data: [4.11, 3.88, 3.77, 4.2, 4.55],
            color: '#000000',
            mytype: 'decimal' //<---- Here
        }

and then test for that in your formatter:

$.each(this.points, function (i, point) {
                    var mytype = point.series.userOptions.mytype;
                    console.log(mytype);
                    if (mytype == 'decimal') {
                        s += '<br/>' + point.series.name + ': ' + point.y;
                    } else {
                        s += '<br/>' + point.series.name + ': ' + secondsTimeSpanToHMS(point.y);
                    }
                });

Working demo here: http://jsfiddle.net/robschmuecker/3fTCq/

Upvotes: 1

Related Questions