Chartjs-Real time colored bar chart

by

0👍

✅

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

Leave a comment