如果不是第一个,请设置日期列
Set date column if not first
可能听起来很愚蠢,但我的 csv 的第一列不是日期字段。
我可以手动编辑 CSV 以更改列顺序,然后就像一个魅力一样工作,但由于文件是自动生成的,我不能经常这样做。
如果不是第一个,有什么方法可以设置日期列吗?
编辑:这里有我的 csv 样本
Test server;Date/Time;Latency (ms);Dowload Speed (Kb/s);Upload Speed (Kb/s)
TVAlmansa S.L. (Almansa) [50.87 km];2015/07/07 11:00:31;67.94;57975;25226
Grupo TVHoradada (Pilar De La Horadada) [87.32 km];2015/07/07 12:00:32;46.11;58484;25433
Grupo TVHoradada (Pilar De La Horadada) [87.32 km];2015/07/07 13:00:31;43.75;55262;24106
TVAlmansa S.L. (Almansa) [50.87 km];2015/07/07 14:00:39;89.39;55266;12722
TVAlmansa S.L. (Almansa) [50.87 km];2015/07/07 15:00:35;69.24;56732;22550
第一步解决
正如@danvk 所说,dygraphs 似乎从 csv 文件中获取第一列作为日期参数。没有办法改变这个,我只能将csv文件加载到一个数组中,然后设置我想要显示的列。
解决方案
最后,我使用了一些基于此 post 的代码来加载和解析我的 csv 文件。这是完整的代码
//AJAX query for CSV file
var req = new XMLHttpRequest();
req.onreadystatechange = function () {
if (req.readyState == 4) {
if (req.status === 200 || // Normal http
req.status === 0) { // Chrome w/ --allow-file-access-from-files
var data = req.responseText;
drawGraph(data);
}
}
};
req.open('GET', 'bandwith_report.csv', true);
req.send(null);
//Graph draw function
var drawGraph = function(data) {
//data threatment (select columns)
var parsed_data = toArray(data);
var firstRow = parsed_data[0];
var data = parsed_data.slice(1); // Remove first element (labels)
//data display
graph = new Dygraph(
"graphdiv2", //div
data,
{
labels: firstRow
}
);
}
var toArray = function(data) {
//load lines
var lines = data.split("\n");
var arry = [];
//parse lines
for (var idx = 0; idx < lines.length; idx++) {
var line = lines[idx];
// Oftentimes there's a blank line at the end. Ignore it.
if (line.length == 0) {
continue;
}
var row = line.split(";");
// Special processing
// remove first field (including header)
row.splice(0,1);
// parse data (except header)
if (idx > 0) {
row[0] = new Date(row[0]); // Turn the string date into a Date.
// turn string into float
for (var rowIdx = 1; rowIdx < row.length; rowIdx++) {
// Turn "123" into 123.
row[rowIdx] = parseFloat(row[rowIdx]);
}
}
arry.push(row);
}
return arry;
}
没有。 dygraphs 假设第一列是独立的 (x) 轴。如果不是,那么您需要修改数据以使其成为现实。您可以在 JavaScript.
中完成此操作,而不是手动执行此操作
可能听起来很愚蠢,但我的 csv 的第一列不是日期字段。
我可以手动编辑 CSV 以更改列顺序,然后就像一个魅力一样工作,但由于文件是自动生成的,我不能经常这样做。
如果不是第一个,有什么方法可以设置日期列吗?
编辑:这里有我的 csv 样本
Test server;Date/Time;Latency (ms);Dowload Speed (Kb/s);Upload Speed (Kb/s)
TVAlmansa S.L. (Almansa) [50.87 km];2015/07/07 11:00:31;67.94;57975;25226
Grupo TVHoradada (Pilar De La Horadada) [87.32 km];2015/07/07 12:00:32;46.11;58484;25433
Grupo TVHoradada (Pilar De La Horadada) [87.32 km];2015/07/07 13:00:31;43.75;55262;24106
TVAlmansa S.L. (Almansa) [50.87 km];2015/07/07 14:00:39;89.39;55266;12722
TVAlmansa S.L. (Almansa) [50.87 km];2015/07/07 15:00:35;69.24;56732;22550
第一步解决
正如@danvk 所说,dygraphs 似乎从 csv 文件中获取第一列作为日期参数。没有办法改变这个,我只能将csv文件加载到一个数组中,然后设置我想要显示的列。
解决方案
最后,我使用了一些基于此 post 的代码来加载和解析我的 csv 文件。这是完整的代码
//AJAX query for CSV file
var req = new XMLHttpRequest();
req.onreadystatechange = function () {
if (req.readyState == 4) {
if (req.status === 200 || // Normal http
req.status === 0) { // Chrome w/ --allow-file-access-from-files
var data = req.responseText;
drawGraph(data);
}
}
};
req.open('GET', 'bandwith_report.csv', true);
req.send(null);
//Graph draw function
var drawGraph = function(data) {
//data threatment (select columns)
var parsed_data = toArray(data);
var firstRow = parsed_data[0];
var data = parsed_data.slice(1); // Remove first element (labels)
//data display
graph = new Dygraph(
"graphdiv2", //div
data,
{
labels: firstRow
}
);
}
var toArray = function(data) {
//load lines
var lines = data.split("\n");
var arry = [];
//parse lines
for (var idx = 0; idx < lines.length; idx++) {
var line = lines[idx];
// Oftentimes there's a blank line at the end. Ignore it.
if (line.length == 0) {
continue;
}
var row = line.split(";");
// Special processing
// remove first field (including header)
row.splice(0,1);
// parse data (except header)
if (idx > 0) {
row[0] = new Date(row[0]); // Turn the string date into a Date.
// turn string into float
for (var rowIdx = 1; rowIdx < row.length; rowIdx++) {
// Turn "123" into 123.
row[rowIdx] = parseFloat(row[rowIdx]);
}
}
arry.push(row);
}
return arry;
}
没有。 dygraphs 假设第一列是独立的 (x) 轴。如果不是,那么您需要修改数据以使其成为现实。您可以在 JavaScript.
中完成此操作,而不是手动执行此操作