Highcharts columnrange date chart

Question

Mein Ziel ist es, ein Diagramm zu erstellen, das die Benutzeraktivität verfolgt. Ich möchte, dass sie plotten, wenn sie sich zum ersten Mal angemeldet haben und wann sie sich zuletzt angemeldet haben.

Die Daten, die ich in diese Funktion (var refarray = [...data here...]) übergebe, sind im String-Format, was bedeutet, dass ich die Daten aus der Datenbank in ein Datumsformat analysieren muss, dachte ich. Unten sehen Sie meinen Versuch.

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;} 

Meine Absicht ist für dieses Diagramm vielseitig zu sein, so dass ich eine beliebige Anzahl von verschiedenen Benutzern zu wählen, und das Diagramm, wenn ich einen Refresh-Button auf meiner HTML-Seite klicken (es die Datenbank abfragt und die Daten sendet zu dieser Funktion).

Ich vermute, dass mein Problem mit der Datumsvariable Dat zu tun hat, da es scheint, dass die Variablentypen String und Datum keine akzeptablen Dateneingaben für Highcharts sind.

Hier ist ein Screenshot der Fehler, die ich im zurückgegebenen Code erhalte. Die 10x2-Matrix ist ziemlich gleich, also werde ich nur eine Zeile einbeziehen. Fehler Nr. 17 entspricht einem inakzeptablen Datentyp, der meinen Verdacht bestätigt.

Console Results

Irgendwelche Vorschläge?

UPDATE: Ich habe highcharts-more.js aufgenommen und jetzt den oben genannten Fehler behoben. Die Datumsbereiche sind immer noch ein bisschen aus. Unten ist ein Bild von dem, was gerade passiert.

Current Chart Situation

Answer 1

Dank @Grzegorz Blachliński und seine Vorschläge, ich war in der Lage, das Problem zu finden und zu beheben. Hier ist, was schief gelaufen ist:

1) Ich habe nicht geladen werden highcharts-more.js Einschließlich dieser Datei behoben den Fehler Highcharts 17.

2) Datum in Millisekunden ab 1.1.1970 sein muss. Einfaches Fixieren der generierten Daten in (datevar) .getTime().

3) Ich hatte keinen Tooltip-Formatierer. Ich habe eine aus dem Internet kopiert, die den Job erledigt hat, und es hat funktioniert!

Hier ist der Code für die Interessenten:

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;}