Real time colored bar chart

Question

I would like to display real time information about lights.

I have a log file containing a serie of 1 and 0. Each one representing a light. This file is updated every second.

I would like to display this as a horizontal bar chart.

This chart would update every second with "blocks" representing 1sec. If the lights is on the block would be green and the next coming block will stay green until it turns off. Then the coming blocks are red.

On the left part of the chart, the new data will appears every second pushing the rest of the data to the right.

The color should not be on ALL the chart but only on the corresponding block.

I found about angular-chart-directive but I cannot find a way to accomplish what I want. (Yes, I am using AngularJS)

I cannot find example on internet (Is there a name for this kind of chart ?)

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> 

How can I use a stackable bar chart with different color ?

THINKING EDIT

Chart library is maybe not the best idea. I thought about using a simple table with a limit number of column. The visual of the real time update will be less good.

About ChartJS, I cannot find a way to defined the colors of the stackable blocks. I can add dynamically data but block get random colors

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]);

}

For the moment, my chart is updated every time I click on the button (to simulate the real time update). I just need to color the new data. Is there a way to push an object containing the value (which is always 1 for the 1sec) + the color ?

EDIT : Trying with table

The table is not the good solution. Each cell represents 1 sec and 1 color. If I want to display the historic for 2 minutes, I need 120 cells and I cannot display so much cells.

Answer 1

I finnaly did it using a table. The lights are updated from my controller every second. Each light has a colors array containing number - each number has its color

<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>

Each second is represented by a small div displayed as table-cell

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

It is not as beautiful as a graph but it does what I wanted to do