Cannot read property 'length' of undefined - angularjs

Question

I have a problem with my angular JS function
when I first call this function, everything is good. But my next attempts cause an error and stops it from working.
My js code:
$scope.updateUptimeCalendar = function() {
$scope.loadHeatMap();
$scope.getMonthHeatMap(new Date().getFullYear(), new Date().getMonth());
};
$scope.loadHeatMapData = function (date) {
var time = date.getTime();
var isMonthLoaded = false;
var eps = 1000 * 60 * 60 * 6; // epsilont +-6 hours
angular.forEach($scope.heatMatData, function (record) {
if (!isMonthLoaded) {
if (Math.abs(record.date - time) < eps) {
isMonthLoaded = true;
}
}
});
if (!isMonthLoaded) {
$scope.getMonthHeatMap(date.getFullYear(), date.getMonth());
};
};
$scope.getMonthHeatMap = function(fullYear, month) {
$scope.setLoadingState(true);
var monthStart = new Date(Date.UTC(fullYear, month, 1));
var monthEnd;
if (month == 12) {
monthEnd = new Date(Date.UTC(fullYear + 1, 1, 1));
} else {
monthEnd = new Date(Date.UTC(fullYear, month + 1, 1));
};
monthStart = monthStart.getTime();
monthEnd = monthEnd.getTime();
var turnOnDuration;
$http.post('Statistic/GetClientStateStatisticByDays', {
clientId: $scope.$parent.clientForStatistic.ClientId,
stateId: 1,
beginPeriod: monthStart,
endPeriod: monthEnd
}).success(function(data) {
$scope.$parent.processResponse(data);
angular.forEach(data, function(record) {
turnOnDuration = record.Duration / (1000 * 60 * 60);
$scope.heatMatData.push({
date: record.AvarageTime,
value: Number((turnOnDuration).toFixed(0)),
});
});
$scope.heatMatData.sort(function(a, b) {
return a.date - b.date;
});
//todo: fixed this when try to get null data values DK
$scope.setLoadingState(false);
$scope.cal.update($scope.heatMatData);
});
};
$scope.heatMapDateParser = function (data) {
var stats = {};
for (var d in data) {
stats[data[d].date / 1000] = data[d].value;
}
return stats;
};
$scope.loadHeatMap = function () {
$('#statistic-modal-chart-container').empty();
$('#statistic-modal-chart-container-calendar').empty();
$scope.cal = new CalHeatMap();
$scope.cal.init({
data: $scope.heatMatData,
afterLoadData: $scope.heatMapDateParser,
considerMissingDataAsZero: true,
//todo: use to set visible dates interval. MR
//minDate: new Date(2014, 9),
//maxDate: new Date(),
itemSelector: "#statistic-modal-chart-container-calendar",
domain: "month",
domainLabelFormat: "%b %Y",
subDomain: "x_day",
subDomainTextFormat: "%d",
itemName: "Hour",
cellSize: 35,
range: 1,
displayLegend: true,
legend: [0, 4, 8, 12, 16, 20, 25],
legendColors: {
base: '#ededed',
empty: '#ededed',
min: '#FFFFFF',
max: '#3366FF'
},
legendHorizontalPosition: "center",
previousSelector: "#uptime-calendar-prev",
nextSelector: "#uptime-calendar-next",
afterLoadNextDomain: function (date) {
$scope.loadHeatMapData(date);
},
afterLoadPreviousDomain: function (date) {
$scope.loadHeatMapData(date);
},
itemNamespace: "animationDuration-a",
tooltip: true
});
};
If I use debug, the error occurs in this row $scope.cal.update($scope.heatMatData);
I get this error
my error:
TypeError: Cannot read property 'length' of undefined
at e (http:/Scripts/d3.min.js:3:10447)
at Array.pa.data (http://Scripts/d3.min.js:3:11196)
at Object.CalHeatMap.fill (http://Scripts/cal-heatmap.min.js:8:20667)
at http://Scripts/cal-heatmap.min.js:9:4615
at h (http:/Scripts/cal-heatmap.min.js:9:1605)
at Object.CalHeatMap.getDatas (http:/Scripts/cal-heatmap.min.js:9:1940)
at Object.CalHeatMap.update (http://Scripts/cal-heatmap.min.js:9:4537)
at http://Scripts/Controllers/statistic-ctrl.js:355:24
at http://Scripts/angular.min.js:72:45
at L (http:/Scripts/angular.min.js:99:469) angular.min.js:92
(anonymous function) angular.min.js:92
(anonymous function) angular.min.js:68
L angular.min.js:99
L angular.min.js:99
(anonymous function) angular.min.js:101
k.$eval angular.min.js:111
k.$digest angular.min.js:108
k.$apply angular.min.js:112
h angular.min.js:72
w angular.min.js:77
A.onreadystatechange
please anybody help me!

Answer 1

Put
$scope.heatMatData = [];
as first instruction