admin管理员组文章数量:1332107
I need to draw a chart to show the evolution of data in real time in a day. I've been playing in Google Charts Playground to see how it would be visualized, but I haven't been able to set the hAxis.viewWindow.max option, in order to make the X axis be fixed.
Here is the code I've been using to test:
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('timeofday', 'x');
data.addColumn('number', 'S0');
data.addColumn('number', 'S1');
data.addColumn('number', 'S2');
data.addRows([
[[0,0,0,0], 1, 1, 0.5],
[[1,0,0,0], 2, 0.5, 1],
[[2,0,0,0], 4, 1, 0.5],
]);
// Create and draw the visualization.
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, {curveType: "function",
width: 500, height: 400,
vAxis: {maxValue: 10},
hAxis: {maxValue: [23,59,59,0], minValue:[0,0,0,0], viewWindow:{max: [23, 59, 59, 0]}}}
);
}
The documentation claims that hAxis.viewWindow.max receives numbers, but I haven't found a way to represent the "timeofday" type as a number. Using that, the X axis goes from 0am to 2am, but I needed the axis to go until midnight.
I tried using "datetime" as the column type, with the same problem.
The sample below, using numbers, works the way I intended it to, drawing the line where my points are, but extending the grid until my max value:
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('number', 'x');
data.addColumn('number', 'S0');
data.addColumn('number', 'S1');
data.addColumn('number', 'S2');
data.addRows([
[0, 1, 1, 0.5],
[1, 2, 0.5, 1],
[2, 4, 1, 0.5],
]);
// Create and draw the visualization.
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, {curveType: "function",
width: 500, height: 400,
vAxis: {maxValue: 10},
hAxis: {maxValue: 23, minValue:0, viewWindow:{max: 23}}}
);
}
I need to draw a chart to show the evolution of data in real time in a day. I've been playing in Google Charts Playground to see how it would be visualized, but I haven't been able to set the hAxis.viewWindow.max option, in order to make the X axis be fixed.
Here is the code I've been using to test:
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('timeofday', 'x');
data.addColumn('number', 'S0');
data.addColumn('number', 'S1');
data.addColumn('number', 'S2');
data.addRows([
[[0,0,0,0], 1, 1, 0.5],
[[1,0,0,0], 2, 0.5, 1],
[[2,0,0,0], 4, 1, 0.5],
]);
// Create and draw the visualization.
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, {curveType: "function",
width: 500, height: 400,
vAxis: {maxValue: 10},
hAxis: {maxValue: [23,59,59,0], minValue:[0,0,0,0], viewWindow:{max: [23, 59, 59, 0]}}}
);
}
The documentation claims that hAxis.viewWindow.max receives numbers, but I haven't found a way to represent the "timeofday" type as a number. Using that, the X axis goes from 0am to 2am, but I needed the axis to go until midnight.
I tried using "datetime" as the column type, with the same problem.
The sample below, using numbers, works the way I intended it to, drawing the line where my points are, but extending the grid until my max value:
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('number', 'x');
data.addColumn('number', 'S0');
data.addColumn('number', 'S1');
data.addColumn('number', 'S2');
data.addRows([
[0, 1, 1, 0.5],
[1, 2, 0.5, 1],
[2, 4, 1, 0.5],
]);
// Create and draw the visualization.
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, {curveType: "function",
width: 500, height: 400,
vAxis: {maxValue: 10},
hAxis: {maxValue: 23, minValue:0, viewWindow:{max: 23}}}
);
}
Share Improve this question edited Jun 18, 2012 at 23:55 Wilerson asked Jun 14, 2012 at 0:12 WilersonWilerson 3861 gold badge5 silver badges14 bronze badges1 Answer
Reset to default 5 +25X axis will end up to your max value for it (or close in same cases - like this one). For example
in case of:
data.addRows([
[[0,0,0,0], 1, 1, 0.5],
[[1,0,0,0], 2, 0.5, 1],
]);
the x axis will end at 1:00
in case of:
data.addRows([
[[0,0,0,0], 1, 1, 0.5],
[[1,0,0,0], 2, 0.5, 1],
[[23,59,59,0], 4, 1, 0.5],
]);
it will end at 23:59:59 showing 22:00 as the last x axis label.
This means that no matter the value your define as max in hAxis, the chart runs up to the max "timeofday" value you have in your dataRows (actually the last added row).
版权声明:本文标题:javascript - How to set hAxis.viewWindow.max for a LineChart when the major axis is typeofday? - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742224340a2435818.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论