Hey there, I'm relatively new to stackoverflow, django, and highcharts so please bear with me if I make any mistakes.
Currently, I'm working on displaying time and dates in highcharts and came across a small issue. Everything looks fine on the chart like this:
https://i.sstatic.net/6hALh.png
However, when I hover over a point on the chart, it displays a different value. It looks something like this: https://i.sstatic.net/WUr2p.png
I would like the focus to display as HH:MM:SS instead of showing the total amount of microseconds. What changes do I need to make for this to happen?
Here is the code snippet 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 require more code, data, or information, feel free to let me know. Appreciate any help in advance!