RealTime chart using nvd3 says NoData Available

Question

I am getting the realtime data using socket.io and binding the data using angularjs. The data gets displayed sometimes, otherwise it displays an error saying No Data available.

Here is the HTML:

 <div ng-if="tab.displayType == 'info'">
          <div ng-repeat="content in tab.contents">
            <div ng-if="content.displayType == 'chart'">
                  <form name="userForm">
                    <h1>{{content.name}}</h1>                     
                      <div ng-if="displayData["TotalMemory"]">
                          <nvd3-line-chart
                                    data="displayData["TotalMemory"]"
                                    id="chart-{{tab.displayId}}-{{content.name}}"
                                    height="300"
                                    showXAxis="true"
                                    showYAxis="true"
                                    tooltips="true"
                                    interactive="true"
                                    useInteractiveGuideline="true"
                                   >
                                <svg></svg>
                            </nvd3-line-chart>
                        </div>
                    </form>                   
            </div>
          </div>
      </div>

App.js

               for (var datum in data){
                countxx++;
                if ($scope.displayData[datum]){
                    var valueObj = $scope.displayData[datum][0];
                    if (valueObj.key){
                        if (valueObj.values.length > 10) valueObj.values.splice(0, 1); 
                        valueObj.values.push([countxx++, data[datum]]);
                    }
                }
            }
             Object.keys($scope.displayData).forEach(function(key) {
                  if (!key) {
                     delete $scope.displayData[key];
                     }
                }); 
            console.log(angular.toJson($scope.displayData));
            console.log($scope.displayData);

The data keeps updates on the app.js, here is the sample Data,

{"TotalMemory":[{"key":"TotalMemory","values":[[82,10]]}],"Freememory":[{"key":"Freememory","values":[[85,10]]}],"BufferSize":[{"key":"BufferSize","values":[[87,10]]}],"TotalSwapMemory":[{"key":"TotalSwapMemory","values":[[89,10]]}],"UsedSwapMemory":[{"key":"UsedSwapMemory","values":[[91,10]]}],"FeeSwapMemory":[{"key":"FeeSwapMemory","values":[[93,10]]}]}

Answer 1

This is the underlying NVD3 source conditions that determine when the noData message is displayed:

// Display noData message if there's nothing to show.
if (!data || !data.length || !data.filter(function(d) { return d.values.length }).length) {...}

Either

1. There is no data array of series to display.
2. There is a data array, but it is empty.
3. There is a non-empty array of series, but all the series have empty 'values' arrays (no data-points).

Try checking the data you get back before passing it to the chart model.