CODEWITHSUNDEEP
highcharts
Dan
Dan

Reputation: 29

Hours: Mintues: Seconds in HighCharts Bargraph

I am trying to graph the length of times that each employee spends on the phone in a bargraph using Highcharts. I am not getting any errors, but the graph is not drawing. Any advice moving forward would be greatly appreciated.

<script type="text/javascript">
<!-- create the highcharts object -->

$(function () {
        $('#container').highcharts({



            chart: {
                type: 'column',
             backgroundColor: 'transparent'
            },
            title: {
                text: ''
            },

            xAxis: {
                categories: ['May 2013', 'June 2013', 'July 2013', 'August 2013', 'September 2013', 'October 2013', 'November 2013', 'December 2013', 'January 2014', 'February 2014', 'March 2014', 'April 2014', ]
            },
            yAxis: {
            // 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'
            },
                title: {
                    text: 'Time Spent on Phone'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y} calls</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: [
            { name: 'Michelle', data: ["02:19:36", "02:37:26", "01:57:27", "02:23:49", "02:10:49", "02:32:33", "02:16:10", "01:25:01", "00:50:49", "0", "0", "0", ] },{ name: 'Kim', data: ["04:53:56", "09:21:07", "10:32:46", "10:30:21", "09:15:12", "09:15:57", "06:19:16", "08:59:23", "06:11:48", "0", "0", "0", ] },{ name: 'Katie', data: ["0", "0", "0", "0", "0", "0", "0", "08:00:14", "03:59:01", "0", "0", "0", ] },            ]
        });
    });
</script>
</div>

Upvotes: 0

Views: 948

Answers (1)

wergeld
wergeld

Reputation: 14442

You need to set your yAxis.type: 'datetime' and you need to format your series.data to be a valid time javascript time. Currently you have yAxis set to just be values (default) and your data is actually a string ("02:19:36" for example). This needs to be converted to a javascript time.

Edit - example of Date.UTC().

To convert your first entry for 'Michelle' use: Date.UTC(0, 0, 0, 2, 19, 36)

Since you dont care about year/month/day but the function requires year and month I just set them to 0. Replace all your string dates such that yourdata` looks like:

data: [Date.UTC(0, 0, 0, 2, 19, 36), Date.UTC(....), etc]

Here is an updated fiddle with just one set of data. Noticed I changed series type to 'line. The 'column' type was acting funny.

Fixed the 'column' type issue but setting arbitrary yAxis min year/month/day and setting the data points to use that same value so that the only difference is the time.

Upvotes: 2

Related Questions