Error in timeline chart bar: <text> attribute x: Expected length, “NaN”

问题

Third day I'm trying to get data from json without errors with google timeline chart. I thought it should worked, but i've got an error <text> attribute x: Expected length, "NaN".

There is a problem part <g><text text-anchor="middle" x="NaN" y="21.05" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#000000"> </text></g>

There is my chart with ajax-call to data:

var data = [];
      $.ajax({
          url: "/api/reports/6/linestatus",
          dataType: "json",
          success: function (jsonData) {
              for (var i = 0; i < jsonData.length; i++) {
                  startTime = new Date(jsonData[i].dateStart);
                  startHours = startTime.getHours();
                  startMinutes = startTime.getMinutes();
                  startSeconds = startTime.getSeconds();

                  endTime = new Date(jsonData[i].dateEnd);
                  endHours = endTime.getHours();
                  endMinutes = endTime.getMinutes();
                  endSeconds = endTime.getSeconds();
                  console.log(data);
                  data.push(
                      [jsonData[i].lineName.toString(), jsonData[i].status.toString(), new Date(0, 0, 0, startHours, startMinutes, startSeconds), new Date(0, 0, 0, endHours, endMinutes, endSeconds)]
                  );

              }
          }
      })

      dataTable.addRows(data);

My JSON data:

[{
  "lineId": 6,
  "lineName": "Line 1",
  "status": 2,
  "dateStart": "2017-08-03T15:10:20.42",
  "dateEnd": "2017-08-03T15:10:23.353"
}]

Sorry for much code. =\ Thank you.

回答1:

two things from the fiddle in the comment

(1) the syntax in the loop is invalid
nothing is being done with the array

for (var i = 0; i < 2; i++){
  [ 'Washington', new Date(), new Date() ],  // <-- ??
}

need to use addRow, or something

for (var i = 0; i < 2; i++){
  dataTable.addRow([ 'Washington', new Date(), new Date() ]);
}

(2) it may be a bug but if all the rows have equal start and end dates,
the chart will throw an error

  // dates have close if not equal times
  dataTable.addRow([ 'Washington', new Date(), new Date() ]);

see following working snippet,
added addRow and modified start date...

google.charts.load('current', {
  callback: drawChart,
  packages: ['timeline']
});

function drawChart() {
  var container = document.getElementById('timeline');
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();

  dataTable.addColumn({ type: 'string', id: 'President' });
  dataTable.addColumn({ type: 'date', id: 'Start' });
  dataTable.addColumn({ type: 'date', id: 'End' });

  for (var i = 0; i < 2; i++) {
    dataTable.addRow([
      'row ' + (i + 1),
      new Date((new Date()).getTime() - ((i + 1) * 24 * 60 * 60 * 1000)),
      new Date()
    ]);
  }

  chart.draw(dataTable);
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="timeline" style="height: 180px;"></div>
   

---

EDIT
here is a working example using similar data...

google.charts.load('current', {
  callback: drawChart,
  packages: ['timeline']
});

function drawChart() {
  var jsonData = [{
    "lineId": 1,
    "lineName": "Line 1",
    "status": 1,
    "dateStart": "2017-08-03T15:10:20.42",
    "dateEnd": "2017-08-03T15:10:23.353"
  }, {
    "lineId": 2,
    "lineName": "Line 2",
    "status": 2,
    "dateStart": "2017-08-03T15:10:30.42",
    "dateEnd": "2017-08-03T15:10:33.353"
  }, {
    "lineId": 3,
    "lineName": "Line 3",
    "status": 3,
    "dateStart": "2017-08-03T15:10:40.42",
    "dateEnd": "2017-08-03T15:10:43.353"
  }, {
    "lineId": 4,
    "lineName": "Line 4",
    "status": 4,
    "dateStart": "2017-08-03T15:10:50.42",
    "dateEnd": "2017-08-03T15:10:53.353"
  }];
  var container = document.getElementById('chart');
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();

  dataTable.addColumn({type: 'string', id: 'row'});
  dataTable.addColumn({type: 'string', id: 'bar'});
  dataTable.addColumn({type: 'date', id: 'start'});
  dataTable.addColumn({type: 'date', id: 'end'});

  for (var i = 0; i < jsonData.length; i++) {
    dataTable.addRow(
      [jsonData[i].lineName.toString(), jsonData[i].status.toString(), new Date(jsonData[i].dateStart), new Date(jsonData[i].dateEnd)]
    );
  }

  chart.draw(dataTable);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

回答2:

Main problem is inside loop.

$.ajax({
          url: "url",
          dataType: "json",
          success: function (jsonData) {
              for (var i = 0; i < jsonData.length; i++) {
                  data.push(
                       [['text', 'text', new Date(), new Date()]]
                  );
              }
          }
      })

It doesn't work if use data.push() or addRows() inside a loop. But if I put static data out of loop, it works.

回答3:

<g><text text-anchor="middle" x="NaN" y="21.05" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#000000"> </text></g>

x="NaN" Change "NaN" to a number.

来源：https://stackoverflow.com/questions/45494158/error-in-timeline-chart-bar-text-attribute-x-expected-length-nan