Highcharts complex columnrange graph

Question

I need to create a graph to display user-entered sleep data. The user will enter a start datetime and end datetime, as well as a numeric value for quality. The graph must have the y axis as time, from 01:00 PM (min) to 12:59 PM (max). The x axis must be the dates that the sleep occurred like such: "Jan 01, 2015 - Jan 02, 2015" (that is the tick label for one 'point')(see fiddle for clarification). Lastly, the 'point' will be color-coded based on the sleep quality value. The data being used is formatted:

{  
    fromDate: "01/18/2015 22:15:00",  
    toDate: "01/19/2015 06:15:00",  
    value: 7  
}

The issue I am having is getting all of this working correctly together. It seems that with a columnrange graph I must use a category x axis. I'm afraid this isn't going to work as well as a datetime x axis would, especially with larger sets of data.

I've created a fiddle. It is on the right track of what I need but as you can see, there are a few issues: 1. The data/logic has been rigged to work for the fiddle but it will prove more difficult when working with actual datetimes. 2. Is columnrange the correct graph type to achieve what I want here? 3. How can I get the tooltip formatted with the sleep quality value and the datetime range? (I tried adding explicit categories but that messed up the x axis. [Tick labels disappeared]) 4. 'Points' aren't directly aligned with x axis tick marks (tooltips are also misaligned)

It seems that when I try to add one feature then another begins to malfunction.

http://jsfiddle.net/XBmB5/59/

Any guidance with this graph would be greatly appreciated.

Answer 1

"It seems that with a columnrange graph I must use a category x axis"

I am not sure what you mean - you can use a datetime axis for both the x and y axes in this case.

Example here:

• http://jsfiddle.net/jlbriggs/cvfoqo7r/

The important things are

1) for the y axis, since the time is all you want, you need to establish base dates, and you can add your time details to those base dates (see the curDate/prevDate stuff at the top of the example)

2) you can establish your label formatting with the dateFormat() method in the formatters for the axis labels, tooltips, dataLabels, etc

{{EDIT for questions in comments

To get the local time, set useUTC to false in the global settings:

Highcharts.setOptions({
        global:{
            useUTC: false
        }
    });

To get the legend set up the way you had it before, simply revert to the series structure you had before.

I simplified it in my example purely for my own convenience, but it won't make a difference whether you have all one series like my set up, or multiple series like your initial set up, as long as each data point is properly defined.