An angular.js wrapper for Chart.js

Epochも良かったのですがAngularJSと相性の良さそうなライブラリがあったので試し。

The 38 best tools for data visualization
試してみるのはリンク先でperfect data visualization tool for hobbies and small projects と評されている Chart.js。

大体サンプル通りにやってみます。

mkdir chartjs
cd chartjs
express --view=ejs
npm install
npm install --save
npm install --save angular-chart.js

app.jsに追記

app.use(express.static(path.join(__dirname, 'node_modules')));

views/index.ejsのbodyを書き換え

  <body ng-app="app">
    <div ng-controller="BarCtrl">
      <canvas id="bar" class="chart chart-bar" chart-data="data" chart-labels="labels" chart-series="series">
      </canvas>
    </div>

    <script src="/angular/angular.min.js"></script>
    <script src="/chart.js/dist/Chart.min.js"></script>
    <script src="/angular-chart.js/dist/angular-chart.min.js"></script>
    <script>
      angular.module("app", ["chart.js"]).controller("BarCtrl", function ($scope) {
        $scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
        $scope.series = ['Series'];
        $scope.data = [
          [65, 59, 80, 81, 56, 38, 11]
        ];

        setInterval(function(){
          $scope.data = $scope.data.map(function (data) {
            return data.map(function (y) {
              y = y + Math.random() * 10 - 5;
              return parseInt(y < 0 ? 0 : y > 100 ? 100 : y);
            });
          });
          $scope.$apply();
        }, 1000);
      });
    </script>
  </body>

npm startし、http://localhost:3000/で確認。

f:id:htn_hs:20170104165225p:plain

Chart.jsクオリティのきれいなグラフが描けました。

$scope.$apply();することで自動的にデータが更新された時も値が反映され、リアルタイムにデータ更新することが出来ます。

グラフの種類が少なくても問題なければとても良さそう。

2017年1月10日 追記
directive内で表示させようとしても表示できない?

参考

AngularJS: Parent scope is not updated in directive (with isolated scope) two way binding - Stack Overflow

angular-chart.js - beautiful, reactive, responsive charts for Angular.JS using Chart.js

iot_lab/06_chartjs at master · hsgwa/iot_lab · GitHub