Why is the line chart not updating the data points?

Hi,

I don't know too much about Angular-nvd3 nor Javascript but I managed to do a basic line chart using this example as the basic code:

https://github.com/krispo/angular-nvd3/blob/gh-pages/js/lineChart.js

I want to update (don't want to refresh) the chart every second for 10 seconds but the only dot plotted is the last one:

I don't know why the previous points aren't plotted and I can't use a

                    $scope.api.update();

after the

        $scope.data = dataGen(genHHMMSS);

because I get the following error:

TypeError: Cannot read property 'update' of undefined

Could anyone help me?

Thanks a lot

HTML:

<!DOCTYPE html>
<html ng-app="app">
<head>

<meta charset="utf-8">  <!-- it's important for d3.js -->

<script src="C:/..../AppData/Roaming/npm/node_modules/angular/angular.js"></script>
<script src="C:/..../AppData/Roaming/npm/node_modules/d3/dist/d3.js"></script>
<script src="C:/..../AppData/Roaming/npm/node_modules/nvd3/build/nv.d3.js"></script> <!-- or use another assembly -->
<script src="C:/..../AppData/Roaming/npm/node_modules/angular-nvd3/dist/angular-nvd3.js"></script>
<link rel="stylesheet" href="C:/..../AppData/Roaming/npm/node_modules/nvd3/build/nv.d3.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.5/nv.d3.min.js"></script>

</head>
<body ng-controller="lineChartController">

 <nvd3 options="options"
      data="data"
      config="config"
      events="events"
      api="api"
      on-ready="callback"></nvd3>

<script src="C:/..../graph_update.js"></script>

</body>
</html>

JavaScript:

'use strict';

var app = angular.module('app', ['nvd3']);

    app.controller('lineChartController', function($scope){

$scope.config = {
    visible: true, // default: true
    extended: false, // default: false
    disabled: false, // default: false
    refreshDataOnly: true, // default: true
    deepWatchOptions: true, // default: true
    deepWatchData: true, // default: true
    deepWatchDataDepth: 2, // default: 2
    debounce: 10 // default: 10
};

        $scope.options = {
            chart: {
                type: 'lineChart',
                height: 450,
                margin : {
                    top: 20,
                    right: 20,
                    bottom: 40,
                    left: 55
                },
                x: function(d){ return d.x; },
                y: function(d){ return d.y; },
                useInteractiveGuideline: true,
                dispatch: {
                    stateChange: function(e){ console.log("stateChange"); },
                    changeState: function(e){ console.log("changeState"); },
                    tooltipShow: function(e){ console.log("tooltipShow"); },
                    tooltipHide: function(e){ console.log("tooltipHide"); }
                },
                xAxis: {
                    axisLabel: 'Time (ms)'
                },
                yAxis: {
                    axisLabel: 'Voltage (v)',
                    tickFormat: function(d){
                        return d3.format('.02f')(d);
                    },
                    axisLabelDistance: -10
                },
                callback: function(chart){
                    console.log("!!! lineChart callback !!!");
                }
            },
            title: {
                enable: true,
                text: 'Title for Line Chart'
            },
            subtitle: {
                enable: true,
                text: 'Subtitle for simple line chart. Lorem ipsum dolor sit amet, at eam blandit sadipscing, vim adhuc sanctus disputando ex, cu usu affert alienum urbanitas.',
                css: {
                    'text-align': 'center',
                    'margin': '10px 13px 0px 7px'
                }
            },
            caption: {
                enable: true,
                html: '<b>Figure 1.</b> Lorem ipsum dolor sit amet, at eam blandit sadipscing, <span style="text-decoration: underline;">vim adhuc sanctus disputando ex</span>, cu usu affert alienum urbanitas. <i>Cum in purto erat, mea ne nominavi persecuti reformidans.</i> Docendi blandit abhorreant ea has, minim tantas alterum pro eu. <span style="color: darkred;">Exerci graeci ad vix, elit tacimates ea duo</span>. Id mel eruditi fuisset. Stet vidit patrioque in pro, eum ex veri verterem abhorreant, id unum oportere intellegam nec<sup>[1, <a href="https://github.com/krispo/angular-nvd3" target="_blank">2</a>, 3]</sup>.',
                css: {
                    'text-align': 'justify',
                    'margin': '10px 13px 0px 7px'
                }

            }
        };

        for (var i = 0; i < 10; i++) {

            var genDate = Date();
            var genHHMMSS = genDate.substring(16,18)+genDate.substring(19,21)+genDate.substring(22,24);

            console.log(genHHMMSS);

            $scope.data = dataGen(genHHMMSS);
            //$scope.api.update();

            do {
                var curDate = Date();
                var curHHMMSS = curDate.substring(16,18)+curDate.substring(19,21)+curDate.substring(22,24);
            }
            while(genDate == curDate);      
        };  

        /*Random Data Generator */
        function dataGen(x_time) {      

            var point = [];

            //Data is represented as an array of {x,y} pairs.
            point.push({x: x_time, y: Math.random()});     

            //Line chart data should be sent as an array of series objects.
            return [
                {
                    values: point,      //values - represents the array of {x,y} data points
                    key: 'Sine Wave', //key  - the name of the series.
                    color: '#ff7f0e'  //color - optional: choose your own line color.
                }
            ];

        };

    })

krispo / angular-nvd3

Why is the line chart not updating the data points? #745