FusionCharts feedData is not a function in AngularJS

Question

I'm using fusioncharts v3.9.0 with AngularJs v1.4.3. It works OK, but I need the charts to update in real time. In order to achieve this I followed this tutorial: feeding and retrieving data using javascript. This is my html using the fusioncharts directive:

<div fusioncharts 
  id="mychartContainer"
  chartid="mychart"
  width="99%"
  height="98%"
  type="area2d"
  datasource="{{datasource1}}",
  events="events1">
</div>

And my controller event looks like this:

var events1 = {
   "rendered": function (evt, args) {
                 evt.sender.chartInterval = setInterval(function () {
                 //Get reference to the chart using its ID
                 var chartRef = evt.sender;

                 $http.post("mypost")
                     .success(function (response) {
                         if (response.success === true) {
                            var last = response.results[0];
                            var strData = "&label=" + last.label + "&value=" + last.value;
                            chartRef.feedData(strData);
                         }
                     });
                 }, 5000);
               },
    "disposed": function (evt, arg) {
              clearInterval(evt.sender.chartInterval);
            }
}

So I'm getting an error when chartRef.feedData(strData);: TypeError: chartRef.feedData is not a function.

This is a console.log of chartRef:

Thanks in advance!

Ayan · Accepted Answer · 2016-07-28 19:41:30Z

One of the probable glitch I find,in the code shared in the question, is the chartType being mentioned, i.e. area2d. ChartType needs to be realtimearea for enabling real-time features. Few samples of real time charts using FusionCharts can be viewed here

Below is an examploratory snippet to illustrate feedData method in a real time area chart using angular-fusioncharts.

var app = angular.module('HelloApp', ["ng-fusioncharts"])
app.controller('MyController', function($scope) {
  $scope.dataSource = {
    "chart": {
      "caption": "Real-time stock price monitor",
      "subCaption": "Harry's SuperMart",
      "xAxisName": "Time",
      "yAxisName": "Stock Price",
      "refreshinterval": "2",
      "yaxisminvalue": "35",
      "yaxismaxvalue": "36",
      "numdisplaysets": "10",
      "labeldisplay": "rotate",
      "showValues": "0",
      "showRealTimeValue": "0",
      "theme": "fint"
    },
    "categories": [{
      "category": [{
        "label": "Day Start"
      }]
    }],
    "dataset": [{
      "data": [{
        "value": "35.27"
      }]
    }]
  };
  $scope.events = {
    rendered: function(e) {
      function addLeadingZero(num) {
        return (num <= 9) ? ("0" + num) : num;
      }

      function updateData() {
        var currDate = new Date(),
          label = addLeadingZero(currDate.getHours()) + ":" +
          addLeadingZero(currDate.getMinutes()) + ":" +
          addLeadingZero(currDate.getSeconds()),
          // Get random number between 35.25 & 35.75 - rounded to 2 decimal places
          randomValue = Math.floor(Math.random() * 50) / 100 + 35.25,
          // Build Data String in format &label=...&value=...
          strData = "&label=" + label + "&value=" + randomValue;
        // Feed it to chart.
        e.sender.feedData(strData);
      }

      var myVar = setInterval(function() {
        updateData();
      }, 3000);
    }
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="https://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<script src="http://fusioncharts.github.io/angular-fusioncharts/demos/js/angular-fusioncharts.min.js"></script>

<div ng-app="HelloApp" ng-controller="MyController">
  <div fusioncharts id="stockRealTimeChart" width="500" height="250" type="realtimearea" , datasource="{{dataSource}}" events="events"></div>
</div>

or play with the fiddle here

Collectives™ on Stack Overflow

FusionCharts feedData is not a function in AngularJS

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related