読者です 読者をやめる 読者になる 読者になる

気ままにIoTメモ

Iotに関わること関わらないこと備忘録

An angular.js wrapper for Chart.js

にいがた暮らしIoTアイデアコンテスト データ可視化

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