Highcharts columnrange date chart

时间:2016-07-11 22:41:35

标签: javascript charts highcharts

My goal is to make a chart that tracks user activity. I want it to plot when they first logged on, and when they last logged on.

The data I pass into this function (var refarray = [...data here...]) is in string format, meaning I need to parse the dates given to me from the database into a date format, or so I thought. Below you will see my attempt.

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

My intent is for this chart to be versatile, allowing me to choose any number of different users, and get the chart when I click a refresh button on my html page (it queries the database and sends the data to this function).

I suspect that my issue has to do with the date variable, Dat, as it appears that the string and date variable types are not acceptable data inputs for highcharts.

Here's an included screen shot of the errors that I am getting in the returned code. The 10x2 matrix is pretty much all the same, so I'll only include one row. Error #17 corresponds to unacceptable data type, which confirms my suspicions.

Console Results

Any suggestions?

UPDATE: I included highcharts-more.js, and now got rid of the error mentioned above. The date ranges are still a bit off. Below is an image of what's going on now.

Current Chart Situation

1 个答案:

答案 0 :(得分:0)

感谢@GrzegorzBlachliński和他的建议,我能够找到问题并解决它。这是出了什么问题:

1)我没有加载highcharts-more.js包含此文件解决了Highcharts错误17。

2)日期需要从1970年1月1日起以毫秒为单位。轻松修复生成日期(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;}