javascript - How to set hAxis.viewWindow.max for a LineChart when the major axis is typeofday? - Stack Overflow

admin管理员组

文章数量:1334342

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

​

• javascript
• google-visualization

Share Improve this question Follow edited Jun 18, 2012 at 23:55 Wilerson asked Jun 14, 2012 at 0:12 WilersonWilerson 38611 gold badge55 silver badges1414 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5 +25

X 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).

本文标签： javascriptHow to set hAxisviewWindowmax for a LineChart when the major axis is typeofdayStack Overflow