Highcharts columnrange date chart

Question

Моя цель - составить диаграмму, которая отслеживает активность пользователя. Я хочу, чтобы он отображался, когда они впервые вошли в систему, и когда они в последний раз вошли в систему.

Данные, которые я передаю в эту функцию (var refarray = [...data here...]), находятся в строковом формате, то есть мне нужно проанализировать даты, данные мне из базы данных, в формат даты, или так я думал. Ниже вы увидите мою попытку.

function hc_first_last_logon(selector, refarray){ 
var categories = []; 
var Dat = []; 

for(var i = 0; i<refarray.length; i++){ // store all user names and data 
    categories.push(refarray.name) 
    Dat.push([Date.parse(refarray.FirstLogon), Date.parse(refarray.LastLogon)]) 
} 
//console.log(Dat) returns date time objects as expected 
var def = { 
    chart: { type: 'columnrange', inverted: true }, 
    legend: { enabled: false}, 
    title:{ text: "First and Last Log-on"}, 
    xAxis:{ categories: categories, title:{text: "User"}}, 
    yAxis:{ type: 'datetime' }, 
    series:[{name: "First and Last Log-on", data: Dat}] 
}; 
var div = $('#' + selector); 
console.log(div); 
div.highcharts(def); 
return def;} 

Мой умысел на этот график, чтобы быть универсальным, что позволяет мне выбрать любое количество различных пользователей, и получить диаграмму, когда я нажимаю кнопку обновления на моем HTML-странице (он запрашивает базу данных и отправляет данные к этой функции).

Я подозреваю, что моя проблема связана с переменной даты, Dat, так как кажется, что типы переменных строки и даты не являются допустимыми входами данных для высоких диаграмм.

Приведенный снимок экрана об ошибках, которые я получаю в возвращаемом коде. Матрица 10x2 практически одинакова, поэтому я буду включать только одну строку. Ошибка № 17 соответствует неприемлемому типу данных, что подтверждает мои подозрения.

Console Results

Любые предложения?

ОБНОВЛЕНИЕ: Я включил highcharts-more.js и теперь избавился от упомянутой выше ошибки. Диапазоны дат все еще немного выключены. Ниже приведен образ того, что происходит сейчас.

Current Chart Situation

Answer 1

Благодаря @Grzegorz Blachliński и его предложения, я был в состоянии найти проблему и решить ее. Вот что пошло не так:

1) Я не сработал Highcharts-more.js В том числе этот файл разрешило ошибку Highcharts 17.

2) Дата должна быть в миллисекундах от 1.1.1970. Легко исправить, помещая даты, сгенерированные в (datevar) .getTime().

3) У меня не было форматирования всплывающей подсказки. Я скопировал один из Интернета, который выполнил эту работу, и это сработало!

Вот код для тех, кто заинтересован:

function hc_first_last_logon(selector, refarray){ 
var categories = []; 
var Dat = []; 

for(var i = 0; i<refarray.length; i++){ // store all user names and data 
    categories.push(refarray.name) 
    Dat.push([Date.parse(refarray.FirstLogon).getTime(), Date.parse(refarray.LastLogon)].getTime()) 
} 
//console.log(Dat) returns date time objects as expected 
var def = { 
    chart: { type: 'columnrange', inverted: true }, 
    legend: { enabled: false}, 
    title:{ text: "First and Last Log-on"}, 
    xAxis:{ categories: categories, title:{text: "User"}}, 
    yAxis:{ type: 'datetime' }, 
    tooltip: { 
     formatter: function() { 
      return new Date(this.point.low).toUTCString().substring(0, 22) + ' - ' + new Date(this.point.high).toUTCString().substring(0, 22) 
     } 
    }, 
    series:[{name: "First and Last Log-on", data: Dat}] 
}; 
var div = $('#' + selector); 
console.log(div); 
div.highcharts(def); 
return def;}