Is there a way to change the display value in series using highcharts

Viewed 56

I am quite new to stackoverflow, django and highcharts so I apologies for any inconvenience.

So I am currently working with displaying time and dates in highcharts when I noticed a small problem. When looking at the chart everything looks fine like this.

https://i.stack.imgur.com/6hALh.png

But when I hover my mouse about a point on the chart it shows a different value. It looks like this https://i.stack.imgur.com/WUr2p.png

I would like so that when focusing on a point it will display as HH:MM:SS like it does on the side instead of the total amount of microseconds. What do I need to change to make it happen?

Here is the code for the chart

    <script>
                                $(function () {
                                $('#container').highcharts({
                                    chart:
                                    {
                                        type: 'line'
                                    },
                                    title:
                                    {
                                        text: 'Time worked by {{user_to_show}}'
                                    },
                                    xAxis:
                                    {
                                        categories: {{dates|safe}}
                                    },
                                    yAxis:
                                    [{
                                        title:
                                        {
                                            text: ''
                                        },
                                        gridLineWidth: 1,
                                        type: 'datetime', //y-axis will be in milliseconds
                                        dateTimeLabelFormats:
                                        { //force all formats to be hour:minute:second
                                                second: '%H:%M:%S',
                                                minute: '%H:%M:%S',
                                                hour: '%H:%M:%S',
                                                day: '%H:%M:%S',
                                                week: '%H:%M:%S',
                                                month: '%H:%M:%S',
                                                year: '%H:%M:%S'
                                        },
                                        opposite: true
                                    }],
                                    plotOptions:
                                    {
                                        series:
                                        {
                                            dataLabels:
                                            {
                                                enabled: true,
                                                formatter: function()
                                                {
                                                    if( this.series.index == 0 )
                                                    {
                                                        return secondsTimeSpanToHMS(this.y/1000) ;
                                                    }
                                                    else
                                                    {
                                                        return this.y;
                                                    }
                                                }
                                            }
                                        }
                                    },
                                    series:
                                    [{
                                        name: 'Time',
                                        yAxis: 0,
                                        data: {{time|safe}}
                                    }]
                                });
                            });

                        function secondsTimeSpanToHMS(s) {
                            var h = Math.floor(s / 3600); //Get whole hours
                            s -= h * 3600;
                            var m = Math.floor(s / 60); //Get remaining minutes
                            s -= m * 60;
                            return h + ":" + (m < 10 ? '0' + m : m) + ":" + (s < 10 ? '0' + s : s); //zero padding on minutes and seconds
                        }
 </script>

If you would like more code, data or information please tell me. Thanks in advance for anyone that replies.

1 Answers

I was able to find a solution to my problem. Had to add:

tooltip:
                                {
                                        formatter: function ()
                                        {
                                            var text = this.x + ': ' + secondsTimeSpanToHMS(this.y/1000);
                                            return text;
                                        }
                                },

and it gave this result: enter image description here

(Would mark this post as answered but stackoverflow wont let me do it until 2 days)

Related