angular-chart.js realtime data

Question

I´m using https://github.com/jtblin/angular-chart.js (and angular 1.5 components) and trying to simulate "realtime data"

  <canvas id="base" class="chart-line"
    chart-data="$ctrl.realTimeClicks"
    chart-labels="$ctrl.domains"
    chart-colors="$ctrl.colors"
    chart-dataset-override="$ctrl.realTimeClicksOptions">
  </canvas>

and in the component

  this.realTimeClicks = [];
  setInterval( function() {
    var random = ( Math.floor( ( Math.random() * 10 ) + 1 ) );
    this.realTimeClicks.push(random);
  }, 2000 );

But I get "Cannot read property 'push' of undefined"

The structure of the initial data in $scope.graph.data (array of arrays) and the data you want to push (just a number) is not the same, so the graph will not update. If you log out $scope.graph.data in the interval, you can see that the data is being pushed in the array. — Kenneth Van den Berghe
– Kenneth Van den Berghe, Commented Sep 9, 2016 at 11:26
@KennethVandenBerghe note to self: dont post questions when you have to pick up kids at daycare in 3 min ;).. updated now — Mackelito
– Mackelito, Commented Sep 9, 2016 at 12:52

fen89 · Accepted Answer · 2016-09-09 11:56:42Z

I used your codepen, following is working for me (quick and dirty).

But it looks like Stackoverflow can't run this snipped without error on the frame - if I copy all to a codepen it's working..

angular.module("ionicApp", ['ionic', 'chart.js'])
  .controller("RadarCtrl", function($scope, $interval) {
    $scope.i = 0;
    $scope.graph = {};

    $scope.graph.labels = [];
    $scope.graph.data = [];

    $scope.update = function() {
      var random = (Math.floor((Math.random() * 10) + 1));
      $scope.graph.data.push(random);
      $scope.graph.labels.push($scope.i++);
    }
    $interval($scope.update, 2000);

  });

body {
  cursor: url('http://ionicframework.com/img/finger.png'), auto;
}
p {
  text-align: center;
  margin-bottom: 40px !important;
}

<html ng-app="ionicApp">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <title>Graphs with Ionic</title>
  <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
  <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.js"></script>
  <script src="https://cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js"></script>

</head>

<body ng-controller="RadarCtrl">
  <ion-header-bar class="bar-positive">
    <h1 class="title">Ionic Graphs</h1>
  </ion-header-bar>
  <ion-content>
    <h1>Simple Line chart for Ionic: {{graph.data}}</h1>
    <canvas id="bar" class="chart chart-line" chart-data="graph.data" chart-labels="graph.labels"></canvas>
  </ion-content>

</body>

</html>

Mackelito · Accepted Answer · 2016-09-10 11:02:49Z

1

Almost to ashamed to admit it but the problem for me was actually just as simple as using:

self = this;

answered Sep 10, 2016 at 11:02

Mackelito

4,4616 gold badges43 silver badges81 bronze badges

Collectives™ on Stack Overflow

angular-chart.js realtime data

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related