Time format with Highcharts

Question

I'm using Highcharts to display some charts for my project.

But I have some problems to display a Basic Bar charts with only TIME (not the date) on Yaxis. I searched some solutions but I didn't find the good one. Currently, I put data in milliseconds.

But it gives me this result : http://s14.postimg.org/z4vissaht/Capture_d_cran_2013_05_31_21_24_01.png

As you can see, it says me "Invalid Date" and milliseconds are display but I would like it to be "00:00:00". In the bottom of the chart, time is in the good format but it resets every 24hours whereas I don't want it. If milliseconds makes 62:00:00, I want it to be displayed like that.

I really need help, I don't know how to do that.

There is my jQuery code :

$('#chartTimeSpent').highcharts({
            chart: {
                renderTo : 'chartTimeSpent',
                type: 'bar'
            },
            title: {
                text: 'Time spent per technicians ' + dateInterval
            },

            xAxis: {
                categories: [ 'Department','Department','Department','Department','Department','Department','Department','Department','Department','Department','Department','Department', ],
                title: {
                    text: null
                }
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Time (hours)',
                    align: 'high'
                },
                labels: {
                    overflow: 'justify'
                },
                type: 'datetime',

                dateTimeLabelFormats : {
                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'
            }
            },
            tooltip: {
                formatter: function() {
                    return ''+
                        "" +
                        'Time: '+ Highcharts.dateFormat('%H:%M:%S', this.x);
                }
            },
            plotOptions: {
                bar: {
                    dataLabels: {
                        enabled: true
                    }
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -100,
                y: 100,
                floating: true,
                borderWidth: 1,
                backgroundColor: '#FFFFFF',
                shadow: true
            },
            credits: {
                enabled: false
            },
            series: [

                {name: 'Someone',
                     data: [300000 ,0,6720000 ,6600000 ,11400000 ,1500000 ,900000 ,0,0,300000 ,0,0, ] },{name: 'Someone',
                     data: [2100000 ,1800000 ,1200000 ,3300000 ,60600000 ,0,13920000 ,5400000 ,18900000 ,300000 ,0,0, ] },{name: 'Someone',
                     data: [9840000 ,223380000 ,300000 ,3120000 ,8760000 ,2460000 ,9300000 ,2820000 ,3960000 ,1320000 ,900000 ,540000 , ] },            ]
        });

EDITED : last jsFiddle

Answer 1

EDIT Based on desired outcome: Your main issue is is that you have a lot of js errors (extra commas, etc). Fixed those. Now, the reason why your chart is not showing (as far as I can tell) is that your chart.title is expecting a var to be appending to it (text: 'Time spent per technicians ' + dateInterval) and at least in the jsFiddle and example code you give you do not define it.

I have updated a new jsFiddle with what I think it is you want. Note that the values in your table list do not match the javascript times in your series data.

Your data does not contain any time values. You are going to either include that in your data series as [[time1, value], [time2, value]...] or you are going to need to assign a starting position for the xAxis (pointStart) and also tell it what to each data point increment is (pointInterval) - assuming your data is separated in time uniformly - like this:

plotOptions: {
            series: {
                pointStart: Date.UTC(2010, 0, 1),
                pointInterval: 24 * 3600 * 1000 // one day
            }
        },

Highly recommended you read the API documentation found here.

Edited answer:

You have much other stuff that is wrong with your chart here: Your yAxis cannot be of type: 'datetime'. Even though you think the times are plotted on the yAxis because this is a BAR chart it is still the xAxis. Remove the type and dateTimeLabelFormats items from the yAxis and put in the xAxis instead.

Remove the categories: section for your xAxix. You cannot mix datetime and categories.

You have extra commas in the series data point list and an extra comma after the last series item.

You need to assign the plotOptions in the series section.

Please see here for example. I would recommend jsFiddle or any other "live" javascript service to test your code.

This is to show the time as just straight hours:minutes without concern for day part: Remove the type: 'datetime' and the label formatter stuff for house/min/sec etc. Add the following -

labels: {
            overflow: 'justify',
            formatter: function () {
                var seconds = (this.value / 1000) | 0;
                this.value -= seconds * 1000;

                var minutes = (seconds / 60) | 0;
                seconds -= minutes * 60;

                var hours = (minutes / 60) | 0;
                minutes -= hours * 60;
                return hours;
            }
        }

To handle the dataLabels we need to do some other reformatting. Now, take this with a grain of salt as I am not a js expert and I am sure this is overly verbose and can be done with a simple method.

formatter: function () {
                    if (this.y === 0) {
                        return 0;
                    }
                    else {
                    var hours = (((this.y / 1000) / 60) / 60).toFixed(2);
                    var hourPortion = hours.toString().split(".")[0];
                    var minPortion = hours.toString().split(".")[1];
                    var minPortionUsed = (parseInt(hours.toString().split(".")[1]) * 0.6).toFixed(0);
                        if (minPortionUsed < 10) {
                            minPortionUsed = '0' + minPortionUsed.toString();
                        }
                    return hourPortion + ':' + minPortionUsed;
                    }
                }

See this updated example.