Currently in the process of developing an angular directive for displaying real-time charts. Below is the code snippet that encompasses everything, including link: function() { }, within the directive.
Here's the code for a static directive that functions flawlessly:
angular.module('app').directive("flotChartRealtime", [
function() {
return {
restrict: "AE",
link: function(scope, ele) {
var realTimedata,
realTimedata2,
totalPoints,
getSeriesObj,
getRandomData,
getRandomData2,
updateInterval,
plot,
update;
// Rest of the code...
Now, moving on to my code with an HTTP request that doesn't seem to work as expected:
getSeriesObj = function () {
return [{
data: getRandomData(function(res) {
console.log(res); // The array result from the http call is logged here but not returned to 'data'
return res;
}),
lines: {
show: true,
lineWidth: 1,
fill: true,
fillColor: {
colors: [{
opacity: 0
}, {
opacity: 1
}]
},
steps: false
},
shadowSize: 0
}, {
// More code...
Issue:
When attempting to use the following code:
update = function () {
//console.log(getSeriesObj());
plot.setData(getSeriesObj()); // The '.data' property becomes undefined
plot.draw();
setTimeout(update, updateInterval);
}
The `getSeriesObj()` function returns an array of objects but the `data` property ends up being `undefined`. What could be causing this?
How can I go about resolving this issue?
Note: This situation differs significantly from this particular question.