ハイチャートの列の日付のグラフ

Question

私の目標は、ユーザーの行動を追跡するグラフを作成することです。最初にログオンしたときと最後にログオンしたときをプロットする必要があります。

私がこの関数に渡すデータ（var refarray = [...data here...]）は文字列形式です。つまり、データベースから私に与えられた日付を解析して日付形式にする必要があります。あなたの下に私の試みが見えます。このチャートは、私は別のユーザーの任意の数を選択することができ、汎用性、そして私は私のhtmlページの更新ボタンをクリックすると、チャートを取得するために私の意図がある

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

（それがデータベースを照会し、データを送信しますこの機能に）。

文字列と日付変数の型がハイチャートのデータ入力として受け入れられないと思われるため、私の問題は日付変数Datと関係があると思われます。

ここには、返されたコードに含まれるエラーのスクリーンショットが含まれています。 10x2行列はほぼ同じなので、1行しか入れません。エラー＃17は、容認できないデータタイプに対応しています。

Console Results

任意の提案ですか？

UPDATE：highcharts-more.jsを追加しました。これで上記のエラーが解消されました。日付範囲はまだ少し離れています。以下は今起こっていることのイメージです。 @GrzegorzBlachlińskiと彼の提案に

Current Chart Situation

Answer 1

おかげで、私は問題を見つけ、それを解決することができました。ここで間違っていたものです：

1）私は、このファイルを含めhighcharts-more.jsをロードしませんでしたが17

2）日が1970年1月1日からのミリ秒単位であることが必要Highchartsエラーを解決しました。簡単に日付を（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;}