CODEWITHSUNDEEP
timehighchartsduration
user1315422
user1315422

Reputation: 47

Highcharts Line Chart Time Durations

I have just started to use Highcharts and am a little stuck.

I need to plot a line chart with People and time duration. I have edited some code i found online and have the following:

    $(function () {
    // Call Times
    $('#TotalCallDuration').highcharts({
        chart: {
            type: 'line'
        },
        title: {
            text: '',
            x: -20 //center
        },
        xAxis: {
            categories: ['Person 1','Person 2','Person 3','Person 4','Person 5','Person 6','Person 7','Person 8','Person 9','Person 10','Person 11',]
        },
        yAxis: {
            title: {
                text: 'Total Call Duration'
            },
            type: 'time',
            labels: {
                formatter: function () {
                    var time = this.value;
                    var hours1=parseInt(time/3600000);
                    var mins1=parseInt((parseInt(time%3600000))/60000);
                    return (hours1 < 10 ? '0' + hours1 : hours1) + ':' + (mins1 < 10 ? '0' + mins1 : mins1);
                }   
            }
        },
        series: [{
            data: [7464000,4327000,3388000,3611000,3261000,5740000,9433000,8591000,8114000,3059000,10866000],
            dataLabels: {
                enabled: false,
                formatter: function () {
                    var time = this.y / 1000;
                    //var time = this.y;
                    var hours1=parseInt(time/3600);
                    var mins1=parseInt((parseInt(time%3600))/60);
                    return (hours1 < 10 ? '0' + hours1 : hours1) + ':' + (mins1 < 10 ? '0' + mins1 : mins1);
                }
            },
        }]
    });
});

I have also created https://jsfiddle.net/MarcellusWallis/jnp6xodk/

However, i also want to display the seconds as at the moment im only displaying the HH:MM.

Also when i hover over the line i get the legend popup but its display in milliseconds and not HH:MM:SS

Upvotes: 0

Views: 359

Answers (1)

Kacper Madej
Kacper Madej

Reputation: 7896

To change format in yAxis labels you could use dateTimeLabelFormats and for tooltip you could use pointFormat and set your format there.

Example: https://jsfiddle.net/s6t8ghvu/

Relevant code:

yAxis: {
  title: {
    text: 'Total Call Duration'
  },
  type: 'datetime',
  dateTimeLabelFormats: {
    minute: '%H:%M:%S'
  }
},
tooltip: {
    pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y: %H:%M:%S}</b><br/>'
},

Upvotes: 2

Related Questions