[英]Highcharts columnrange date chart
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. 我传入此函数的数据( var refarray = [...data here...]
)是字符串格式,这意味着我需要将从数据库中提供给我的日期解析为日期格式,或者我认为。 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). 我的意图是这个图表是多功能的,允许我选择任意数量的不同用户,并在我点击我的html页面上的刷新按钮时获取图表(它查询数据库并将数据发送到此功能)。
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. 我怀疑我的问题与日期变量Dat
,因为字符串和日期变量类型似乎不是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. 10x2矩阵几乎完全相同,所以我只包含一行。 Error #17 corresponds to unacceptable data type, which confirms my suspicions. 错误#17对应于不可接受的数据类型,这证实了我的怀疑。
Any suggestions? 有什么建议么?
UPDATE: I included highcharts-more.js, and now got rid of the error mentioned above. 更新:我包括highcharts-more.js,现在摆脱了上面提到的错误。 The date ranges are still a bit off. 日期范围仍有点偏差。 Below is an image of what's going on now. 下面是现在正在发生的事情的图像。
Thanks to @Grzegorz Blachliński and his suggestions, I was able to find the issue and resolve it. 感谢@GrzegorzBlachliński和他的建议,我能够找到问题并解决它。 Here's what went wrong: 这是出了什么问题:
1) I did not load highcharts-more.js Including this file resolved the Highcharts error 17. 1)我没有加载highcharts-more.js包含此文件解决了Highcharts错误17。
2) Date needs to be in milliseconds from 1/1/1970. 2)日期需要从1970年1月1日起以毫秒为单位。 Easy fix putting the dates generated into (datevar).getTime(). 轻松修复生成的日期(datevar).getTime()。
3) I did not have a tooltip formatter. 3)我没有工具提示格式化程序。 I copied one off the internet that got the job done, and it worked! 我复制了一个完成工作的互联网,它工作了!
Here's the code for those interested: 以下是感兴趣的人的代码:
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;}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.