title: Real Time Bar chart using Highcharts and AngularJs
body: <p>Using a <strong>Highcharts</strong> example (<a href="https://www.highcharts.com/demo/bar-basic" rel="nofollow noreferrer">here</a>), I have loaded a bar chart in <strong>AngularJs</strong>.</p>
  
  <p>HTML code below:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-lang="en" ng-app="myModule"&gt;
  &lt;head&gt;
  &lt;meta charset="ISO-8859-1"&gt;
  &lt;script
      src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"&gt;&lt;/script&gt;
  &lt;script
      src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.7/highcharts.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.highcharts.com/modules/exporting.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.highcharts.com/modules/export-data.js"&gt;&lt;/script&gt;
  &lt;title&gt;Insert title here&lt;/title&gt;
  &lt;/head&gt;
  &lt;script&gt;
  angular.module('myModule',[])
  .controller('myController',function($q, $scope, $http){
  
      $scope.cnt = 1;
      var t = 0;
      setInterval(function(cnt){
  
          fetchData($scope.cnt).then(function(success){
  
              $scope.chartOptions={
                      chart: {
                          type: 'bar',
                          events:{
                              load:function(){
                                  var rowClass = this.series[0];
                                  console.log("rowClass : "+rowClass);
                              }
                          } 
                      },
                      title: {
                          text: 'ClassNames By Count Chart'
                      },
                      subtitle: {
                          text: 'Admin Chart'
                      },
                      xAxis: {
                          categories: $scope.rows,
                          title: {
                              text: null
                          }
                      },
                      yAxis: {
                          min: 0,
                          title: {
                              text: 'Population (millions)',
                              align: 'high'
                          },
                          labels: {
                              overflow: 'justify'
                          }
                      },
                      tooltip: {
                          valueSuffix: ' millions'
                      },
                      plotOptions: {
                          bar: {
                              dataLabels: {
                                  enabled: true
                              }
                          }
                      },
                      legend: {
                          layout: 'vertical',
                          align: 'right',
                          verticalAlign: 'top',
                          x: -40,
                          y: 80,
                          floating: true,
                          borderWidth: 1,
                          backgroundColor: ((Highcharts.theme &amp;&amp; Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
                          shadow: true
                      },
                      credits: {
                          enabled: false
                      },
                      series: [{
                          name: 'Year 1800',
                          data: (function(){
                              var data = [];
                              var i;
                              console.log("In Series function() : $scope.num : "+$scope.num );    //Update is being done propertly
                              for(i=1;i&lt;4;i=i+1){
                                  data.push($scope.num[i]);
                              }
                              return data;
                          }())
                      }, {    
                          name: 'Year 1900',
                          data: [133, 156, 947, 408, 6]
                      }, {
                          name: 'Year 2000',
                          data: [814, 841, 3714, 727, 31]
                      }, {
                          name: 'Year 2016',
                          data: [1216, 1001, 4436, 738, 40]
                      }]
              };
  
              if(t==0){
                  t = t+1;
                  Highcharts.chart('container',$scope.chartOptions);
              }
          },function(error){
              console.log("in error functio : "+error);
          });
      },2000);
  
      var cnt = 0;
      var str = "str";
      setInterval(function(){
          str = str+cnt;
          cnt++;
          $http({
              method: "GET",
              url : "http://localhost:8080/hello/"+str+"/3"
          }).then(function success(data){
          }, function error(data){
              console.log("error "+data.data);
          });
      },5000);
  
      var fetchData = function(cnt){
          $scope.cnt = $scope.cnt+1;
  
          var deferred = $q.defer();
  
              $http({
                  method : "GET",
                  url : "http://localhost:8080/hello"
              }).then(function mySuccess(response) {
                  $scope.myRes = response.data;
                  $scope.rows = $scope.myRes;
                  var i;
                  $scope.num = [];
                  for(i=0;i&lt;4;i=i+1){
                      $scope.num.push(++cnt*110);
                  }
  
                  deferred.resolve();
              }, function myError(response) {
                  console.log("error");
                  $scope.myRes = response;
                  deferred.reject();
              });
  
          return deferred.promise;
      };  
  
  });
  
  &lt;/script&gt;
  &lt;body ng-controller="myController"&gt;
      &lt;hcbar options="chartOptions"&gt;&lt;/hcbar&gt;
      &lt;div id="container"&gt;&lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Now I require to load the bar counts in the chart to be loaded dynamically that is as the count is updated in Database the new values have to be reflected in the chart <strong>(Real Time Data)</strong></p>
  
  <p>You will see I ahve written the <strong>data : function</strong> in my file which updates the data array in a loop:</p>
  
  <pre><code>series: [{
      name: 'Year 1800',
      data: (function(){
          var data = [];
          var i;
          console.log("In Series function() : $scope.num : "+$scope.num );    //Update is being done propertly
          for(i=1;i&lt;4;i=i+1){
              da.push($scope.num[i]);
          }
          returndata;
      }())
  },
  </code></pre>
  
  <p>The updated values are correctly printed in console but are <strong>NOT BEING REFLECTED IN THE CHART BAR!</strong></p>
  
  <p>I know there is this function <strong>addPoint()</strong> which adds a point to the array. But here I do not want a new Object in the <strong>series</strong> array but the updated values in the <strong>series[0].data</strong> array!</p>
  
  <p>How can this be accomplished?</p>