CODEWITHSUNDEEP
javascriptgoogle-visualization
Wilerson
Wilerson

Reputation: 386

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

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

​

Upvotes: 10

Views: 6503

Answers (1)

user1088520
user1088520

Reputation:

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

Upvotes: 5

Related Questions