3

This should be super simple, but I cannot figure out how JavaScript function getDate works together with Highcharts datetime on xAxis.

In my tooltip I want to display two dates in the header, like a date range for instance: 1960/1/1 - 1965/1/1.

The first date is the point.key (which is a unix timestamp) from my data set, and I know how to set that, but the second date displayed has to be {5 years plus point.key}.

Despite my limited knowledge of JavaScript I understand that JavaScript has a function:

function getdate() {
    var tt = document.getElementById('txtDate').value;

    var date = new Date(tt);
    var newdate = new Date(date);

    newdate.setDate(newdate.getDate() + 3);

    var dd = newdate.getDate();
    var mm = newdate.getMonth() + 1;
    var y = newdate.getFullYear();

    var someFormattedDate = mm + '/' + dd + '/' + y;
    document.getElementById('follow_Date').value = someFormattedDate;
}

Is there any way I can use that function in my tooltip and generate second date in

tooltip.headerFormat: '<span style="font-size: 16px">' +
                      '{point.key} - {point.key + 5 years}</span><br/>';

Here is a fiddle.

Axel
  • 3,331
  • 11
  • 35
  • 58
marialaustsen
  • 105
  • 3
  • 14
  • `point.key` has the format "1999/9/9"? – Axel Apr 23 '19 at 19:59
  • The point.key is a unix millisecond timestamp and I set the tooltip format: tooltip: { xDateFormat: '%Y/%m/%d' – marialaustsen Apr 23 '19 at 20:20
  • 1
    Did you have a look at my answer? Its not the best news, isn't it? – Axel Apr 24 '19 at 08:25
  • Yes thank you, I am trying to implement. Not quite sure how to return the string in the tooltip: please see fiddle https://jsfiddle.net/marialaustsen/w4k87jyo/ – marialaustsen Apr 24 '19 at 15:12
  • var aYearFromNow = new Date(this.x); aYearFromNow.setFullYear(aYearFromNow.getFullYear() + 5); – marialaustsen Apr 24 '19 at 15:46
  • I found a solution build on this question: https://stackoverflow.com/questions/33070428/add-year-to-todays-date – marialaustsen Apr 24 '19 at 15:54
  • Glad you did it and +1 from me! In the end -if you have a closer look- your solution pretty much reflects my answer... Why not, mark one answer as accepted, as this is the way SO works somehow (which one doesn't matter). Again: well done! – Axel Apr 24 '19 at 19:01
  • Yes true, I just didn't know how javascript new Date() object and properties works with timestamp. You put me in the right direction. Thanks ! – marialaustsen Apr 25 '19 at 08:13

2 Answers2

2
tooltip: {
    shared   : true,
    useHTML  : true,
    formatter: function() {
        var aYearFromNow = new Date(this.x);
        aYearFromNow.setFullYear(aYearFromNow.getFullYear() + 5);
        var tooltip = '<table><span style="font-size: 16px">'
                    + Highcharts.dateFormat('%e/%b/%Y', new Date(this.x)) + ' - '
                    + Highcharts.dateFormat('%e/%b/%Y', aYearFromNow)
                    + '</span><br/><tbody>';
        //loop each point in this.points
        $.each(this.points, function(i, point) {
            if (point.series.name === 'Observations') {

                tooltip += '<tr><th style="font-size: 14px; color: ' + point.series.color
                        + '">' + point.series.name + ': </th>'
                        + '<td style="font-size: 14px">' + point.y + '℃' + '</td></tr>';

            } else if (point.series.name === 'BOXPLOT') {

                const x = this.x;
                const currentData = this.series.data.find(data => data.x === x);
                const boxplotValues = currentData ? currentData.options : {};
                tooltip += `<span style="font-size: 14px; color: #aaeeee"> 
                        Max: ${boxplotValues.high.toFixed(2)}<br>
                            Q3: ${boxplotValues.q3.toFixed(2)}<br>
                            Median: ${boxplotValues.median.toFixed(2)}<br>
                            Q1: ${boxplotValues.q1.toFixed(2)}<br>
                            Low: ${boxplotValues.low.toFixed(2)}<br></span>`;

            } else {

                tooltip += '<tr><th style="font-size: 14px; color: ' + point.series.color
                        +  '">' + point.series.name + ': </th><td style="font-size: 14px">'
                        +  point.point.low + '℃ -' + point.point.high + '℃' + '</td></tr>'
                        +  '</tbody></table>';

            }
      });
      return tooltip;
    }
},
Axel
  • 3,331
  • 11
  • 35
  • 58
marialaustsen
  • 105
  • 3
  • 14
1

Is there any way I can use that function in my tooltip and generate second date in tooltip headerFormat[?]

From the specs:

headerFormat: string
The HTML of the tooltip header line. Variables are enclosed by curly brackets.[...]

As you can see tooltip.headerFormat only takes strings which are static in nature. Variables like {point.key} will be handled by search and replace mechanism. So you can not use a function for tooltip.headerFormat (what a pitty!).

If you want to use a formatter that can handle values dynamically, which means by a callback function you have to use tooltip.formatter:

formatter: Highcharts.TooltipFormatterCallbackFunction
Callback function to format the text of the tooltip from scratch.[...]

As you can see when you try tooltip.formatter for the first time it seems that you have to rewrite your tooltip code base. But that is probably because you haven't checked your prerequisite enough before starting to write. Also doing this in this answer would be just definitely too much...

The "+5 years"-portion:

var oDate = new Date( point.key );
return (5 + oDate.getFullYear()) + '/' + // add 5 years
       (1 + oDate.getMonth())    + '/' + // (January gives 0)
       oDate.getDate();

Note: The above is only true for regular years but not every year actually has 365 days
In case you want to also implement leap years in your calculation I recommend a framework like momentjs.com.

Axel
  • 3,331
  • 11
  • 35
  • 58