HTML

<div ng-app="Demo">
    <div ng-controller="DemoCtrl">
        <flow-chart flow-id="flowId" limit="50">
            <flow-chart-js
                value-properties="chart.valueProp"
                value-defaults="chart.valueDefaults"
                chart-type="line"
                chart-options="chart.options"
                series="chart.series"
                legend="chart.legend">
            </flow-chart-js>
        </flow-chart>
    </div>
</div>

JS

angular.module('Demo', ['flowthings', 'ngFlowChart', 'ngFlowChartJs'])
    .config(function (flowthingsProvider) {
        flowthingsProvider.options.account = 'sljux';
        flowthingsProvider.options.token = 'm26E5C3BTxjt8QXsYxbqoL1egCTR';
    })
    .run(function(flowthings) {
        flowthings.ws.connect()
    })
    .controller('DemoCtrl', function ($scope) {
        $scope.flowId = 'f55e6cc2268056d46fb80581c';

        $scope.chart = {
            options: {
                animation: false,
                scaleShowHorizontalLines: true,
                scaleShowVerticalLines: false,
                pointDot: false,
                datasetStrokeWidth: 0.5
            },
            series: ['Inside Noise', 'Outside Noise'],
            valueProp: ['inside.noise', 'outside.noise'],
            valueDefaults: 0,
            legend: true
        }
    });

Angular Flow Chart

Real-time charts for IoT using Angular and flowthings.io. Uses the official flowthings angular client for communication with flowthings.io server.

Install via Bower

bower install angular-flow-chart --save

Include the scripts

<script src="bower_components/Chart.js/Chart.js"></script> <!-- Chart.js -->
<script src="bower_components/angular-chart.js/dist/angular-chart.min.js"></script> <!-- Angular Chart.js -->
<script src="bower_components/flowthings-browser/dist/flowthings-browser.min.js"></script> <!-- FlowThings Browser -->
<script src="bower_components/flowthings-angular/dist/flowthings-angular.min.js"></script> <!-- FlowThings Angular -->
<script src="bower_components/angular-flow-chart/dist/angular-flow-chart.min.js"></script> <!-- Angular Flow Charts -->

Include the ngFlowChart module as a dependency to your module, alongside flowthings for the official flowthings.io library:

angular.module('app', ['flowthings', 'ngFlowChart'])

Configure and start flowthings service (as per official docs):

angular.module('app')
    .config(function (flowthingsProvider) {
        flowthingsProvider.options.account = '< your username >';
        flowthingsProvider.options.token = '< your token >';
    })
    .run(function(flowthings) {
        flowthings.ws.connect()
    });

Use the <flow-chart></flow-chart> tag in your view, adding a chart plugin within: 

<flow-chart flow-id="'f123...'" limit="20">
    <flow-chart-js value-properties="['temperature', 'humidity']" chart-type="line"></flow-chart-js>
</flow-chart>

Angular Flow Chart accepts any JS chart library via a plugin. Example on top of the page uses ChartJS

Flow Chart

flowChart directive serves as a base for communication with flowthings.io server, initializes data and passes any incoming data to the chart. Any actual chart is handled by plugin directives transcluded within the <flow-chart></flow-chart> tag. You can add as many chart plugins as you want.

Options

Transclusion Controller

Events

For more info on how to build chart plugin, refer to Angular Flow ChartJS Plugin.