title: NVD3 line chart with realtime data
body: <p>I have a really simple line chart written using NVD3.js.  I've written a simple redraw based on timer, pulled from examples I've seen, but I get the error </p>
  
  <p>Uncaught TypeError: Cannot read property 'y' of undefined </p>
  
  <p>The JS is </p>
  
  <pre><code>    var data = [{
          "key": "Long",
          "values": getData()
      }];
      var chart;
  
      nv.addGraph(function () {
            chart = nv.models.cumulativeLineChart()
                        .x(function (d) { return d[0] })
                        .y(function (d) { return d[1] / 100 })
                        .color(d3.scale.category10().range());
  
          chart.xAxis
              .tickFormat(function (d) {
                  return d3.time.format('%x')(new Date(d))
              });
  
          chart.yAxis
              .tickFormat(d3.format(',.1%'));
  
          d3.select('#chart svg')
              .datum(data)
              .transition().duration(500)
              .call(chart);
  
          nv.utils.windowResize(chart.update);
  
          return chart;
      });
  
  
      function redraw() {
          d3.select('#chart svg')
              .datum(data)
            .transition().duration(500)
              .call(chart);
      }
  
      function getData() {
          var arr = [];
          var theDate = new Date(2012, 01, 01, 0, 0, 0, 0);
          for (var x = 0; x &lt; 30; x++) {
              arr.push([theDate.getTime(), Math.random() * 10]);
              theDate.setDate(theDate.getDate() + 1);
          }
          return arr;
      }
  
      setInterval(function () {
          var long = data[0].values;
          var next = new Date(long[long.length - 1][0]);
          next.setMonth(next.getMonth() + 1)
          long.shift();
          long.push([next.getTime(), Math.random() * 100]);
          redraw();
      }, 1500);
  </code></pre>