リアルタイムのカラーバーチャート

Question

ライトに関するリアルタイムの情報を表示したいと思います。

私は、1と0のセリフを含むログファイルを持っています。それぞれが光を表しています。このファイルは毎秒更新されます。

私はこれを横棒グラフとして表示したいと思います。

このチャートは1秒を表す「ブロック」で毎秒更新されます。ライトが点灯している場合、ブロックは緑色になり、次のブロックは消灯するまで緑色のままです。それから来るブロックは赤です。

チャートの左側の部分には、新しいデータが毎秒右へのデータの残りの部分を押して表示されます。

色はすべてのチャートに表示するのではなく、対応するブロックのみにする必要があります。

私は周りの角度チャートディレクティブ見つかりましたが、私は私が望むものを達成する方法を見つけることができません。

私は、インターネット上の例を見つけることができません（はい、私はAngularJSを使用しています）（チャートのこの種の名前はありますか？）

CONTROLLER

$scope.labels = ['A', 'B', 'C', 'D']; 
$scope.data = [[59, 80, 81, 56]]; 

HTML

を

<canvas id="base" class="chart-horizontal-bar" chart-data="data" chart-labels="labels" ></canvas> 

異なる色のスタッカブル棒グラフを使用するにはどうすればよいですか？

思考EDIT

チャートライブラリは、おそらく最高のアイデアではありません。私は列の制限数を持つ単純なテーブルを使用することを考えました。リアルタイム更新のビジュアルはあまり良くありません。

ChartJSについて、私はスタック可能なブロックの色を定義する方法を見つけることができません。私は、データが、ブロックが現時点ではランダムな色

PROGRESS EDIT

HTML

<canvas id="base" class="chart-horizontal-bar" chart-data="data" chart-labels="labels" chart-options="options"></canvas> 
<button class="ui fluid button" ng-click="push()">PUSH</button> 

CONTROLLER

$scope.labels = ['A', 'B', 'C', 'D']; 
$scope.type = 'StackedBar'; 
$scope.options = { 
    responsive:true, 
    animation : false, 
    scaleShowGridLines : false, 
    scales: { 
     xAxes: [{ 
      stacked: true, 
     }], 
     yAxes: [{ 
      stacked: true 
     }] 
    }, 
}; 


$scope.data = []; 

$scope.push = function(){ 
    if($scope.data.length >= 10) //Do not show more than 10sec in past 
     $scope.data.pop(); 
    $scope.data.unshift([1,1,1,1]); 

} 

を得る動的に追加することができ、私のチャートが更新されます私がbをクリックするたびにutton（リアルタイム更新をシミュレートするため）。新しいデータを色付けするだけです。値を含むオブジェクトをプッシュする方法はありますか（1秒間は常に1）+カラーですか？

EDIT：テーブル

テーブルにしようとは良い解決策ではありません。各セルは1秒と1色を表します。私が歴史的なものを2分間表示したいのであれば、私は120個の細胞が必要なので、それほど多くの細胞を表示することはできません。

Answer 1

私はテーブルを使ってfinnalyしました。ライトは私のコントローラから毎秒更新されます。それぞれの光は、番号を含む色配列を有し、 - 各数値は、その色

<table class="ui celled table" ng-hide="loadingLights"> 
    <tr ng-repeat="l in lights track by $index"> 
     <td style="width: 10%;">{{l.name}}</td> 
     <td style="width: 90%;"> 
      <div ng-repeat-start="c in l.colors track by $index" class="status-box" ng-class="{'redStatus' : c == '0', 'greenStatus' : c == '2', 'orangeStatus' : c == '3'}"></div> 
      <div ng-repeat-end class="empty-status-box"></div> 
     </td> 
    </tr> 
</table> 

を有し、各第二小DIVで表されるtable-cell

.status-box { 
    width: 1rem; 
    height: 2rem; 
    margin-right: 0.5rem; 
    display: table-cell; 
} 

として表示それはグラフのようにきれいではないが、それがありません私がしたいこと