Added support for multiple graphs

README.md

@@ -1,13 +1,68 @@
-## Flow ChartJS
-__flowChartJs__ is an example of chart plugin, using [ChartJS](https://github.com/nnnick/Chart.js) via [Angular Chart](http://jtblin.github.io/angular-chart.js/)
-
-### Options
-- `chartType`: string representing one of chart types supported by ChartJS (line, bar, radar, pie, polar-area, doughnut)
-- `chartOptions`: options to be passed to ChartJS
-- `valueProperty`: path to property of the data point object to be used as chart value. Should be in `path.to.prop` form
-- `valueDefault`: default value to be inserted if the data point object doesn't contain property in the given path. 
-Defaults to `null`, resulting in graph point not being drawn 
-- `labelProperty`: path to property of the data point object to be used as chart label. Should be in `path.to.prop` form.
+# Flow ChartJS
+__flowChartJs__ is an example of chart plugin for [Angular Flow Chart](https://github.com/Sljux/angular-flow-chart), 
+using [ChartJS](https://github.com/nnnick/Chart.js) via [Angular Chart](http://jtblin.github.io/angular-chart.js/)
+
+Install via Bower
+```sh
+bower install angular-flow-chartjs --save
+```
+
+Add script tag to your `index.html`
+```html
+<script src="bower_components/angular-flow-chartjs.js"></script>
+```
+
+Include the `ngFlowChartJs` module as a dependency to your module:
+```js
+angular.module('app', ['ngFlowChartJs', 'ngFlowChart'])
+```
+
+## Options
+- `chartType`: `string` representing one of chart types supported by ChartJS (line, bar, radar, pie, polar-area, doughnut)
+- `chartOptions`: options `object` to be passed to ChartJS
+- `valueProperties`: `string` or an `array of strings` each representing a path to property of the data point object to be used as graph value. 
+If array is passed, a graph will be drawn for each path. Should be in `path.to.prop` form
+- `valueDefaults`: `number` or an `array of numbers` to be used as a default if the data point object doesn't contain property in the given path.
+Defaults to `null`, resulting in graph points not being drawn. If a single value is passed, it will be used as default for all graphs
+- `labelProperty`: `string` representing a path to property of the data point object to be used as chart label. Should be in `path.to.prop` form.
 If nothing is passed, the labels are auto incremented integers starting at 0
-- `labelDefault`: used if `labelProperty` is passed. Default label value if the data point object doesn't contain property in the given label path
-- `series`, `click`, `hover`, `legend` and `colours` are directly passed to [Angular Chart](http://jtblin.github.io/angular-chart.js/) directive
+- `labelDefault`: used if `labelProperty` is passed. `Number` representing default label value if the data point object 
+doesn't contain property in the given label path
+- `series`, `click`, `hover`, `legend` and `colours` are directly passed to [Angular Chart](http://jtblin.github.io/angular-chart.js/) directive
+
+## Example usage
+```html
+<!-- main.html -->
+
+<flow-chart flow-id="flowId" limit="20">
+    <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>
+```
+
+```js
+/* main.js */
+
+angular.module('ngFlowThingsApp')
+    .controller('MainCtrl', function ($scope) {
+        $scope.flowId = '< your Flow ID >';
+
+        $scope.chart = {
+            options: {
+                animation: false
+            },
+            series: ['Inside Temperature', 'Outside Temperature'],
+            valueProp: ['inside.temperature', 'outside.temperature'],
+            /* or valueProp: 'inside.humidity' */
+            valueDefaults: 0,
+            /* or valueDefaults: [3, -7] */
+            legend: true
+        }
+    });
+```

dist/angular-flow-chartjs.js

@@ -9,17 +9,17 @@ function flowChartJsFactory() {
         require: '^flowChart',
         template: templateFunc,
         scope: {
-            chartType:     '@',
-            chartOptions:  '=',
-            valueProperty: '=',
-            valueDefault:  '=',
-            labelProperty: '=',
-            labelDefault:  '=',
-            series:        '=',
-            click:         '=?',
-            hover:         '=?',
-            legend:        '=',
-            colours:       '=?'
+            chartType:       '@',
+            chartOptions:    '=',
+            valueProperties: '=',
+            valueDefaults:   '=',
+            labelProperty:   '=',
+            labelDefault:    '=',
+            series:          '=',
+            click:           '=?',
+            hover:           '=?',
+            legend:          '=',
+            colours:         '=?'
         },
         link: link
     };
@@ -30,29 +30,33 @@ function flowChartJsFactory() {
         if (angular.isUndefined(chartType))
             return;
 
-        return '<canvas class="chart chart-' + chartType + '" data="[graphData]" ' +
+        return '<canvas class="chart chart-' + chartType + '" data="graphData" ' +
             'options="chartOptions" labels="labels" legend="legend" click="click" hover="hover" series="series" colours="colours"></canvas>';
     }
 
     function link(scope, element, attrs, flowChartCtrl) {
-        var isDefined = angular.isDefined;
+        var isDefined = angular.isDefined,
+            isArray   = angular.isArray,
+            forEach   = angular.forEach;
 
-        var valueProperty = formProperty(scope.valueProperty),
-            labelProperty = formProperty(scope.labelProperty),
-            valueDefault  = isDefined(scope.valueDefault) ? scope.valueDefault : null,
-            labelDefault  = isDefined(scope.labelDefault) ? scope.labelDefault : null,
+        var valueProperties = isArray(scope.valueProperties) ? scope.valueProperties : [scope.valueProperties];
+        valueProperties = valueProperties.map(formProperty);
+
+        var labelProperty = formProperty(scope.labelProperty),
+            valueDefaults = isDefined(scope.valueDefaults) ? scope.valueDefaults : null,
+            labelDefault  = isDefined(scope.labelDefault)  ? scope.labelDefault  : null,
             limit         = flowChartCtrl.limit;
 
         scope.graphData = [];
         scope.labels    = [];
 
         scope.$on('flowChart:init', function (e, data) {
-            scope.graphData = parseData(data, valueProperty, valueDefault);
-            scope.labels = labelProperty ? parseData(data, labelProperty, labelDefault) : range(scope.graphData.length);
+            scope.graphData = parseValues(data, valueProperties, valueDefaults);
+            scope.labels = labelProperty ? parseLabels(data, labelProperty, labelDefault) : range(Math.min(limit, data.length));
         });
 
         scope.$on('flowChart:newDrop', function (e, drop) {
-            var newItem  = extractProperty(drop, valueProperty, valueDefault),
+            var newItem  = extractProperty(drop, valueProperties, valueDefaults),
                 newLabel = labelProperty ? extractProperty(drop, labelProperty) : scope.labels[scope.labels.length - 1] + 1;
 
             scope.graphData.push(newItem);
@@ -68,21 +72,42 @@ function flowChartJsFactory() {
             if (!prop)
                 return '';
 
-            prop = prop.replace(/\./, '.value.');
-            prop = 'elems.' + prop + '.value';
+            prop = prop.replace('.', '.value.');
 
-            return prop;
+            return ['elems'].concat(prop.split('.'), ['value']);
         }
 
-        function parseData(data, property, defaultValue) {
-            return data.slice(-limit).map(function (item) { return extractProperty(item, property, defaultValue) })
+        function parseValues(data, property, defaultValues) {
+            data = data.slice(-limit);
+            var result = Array(property.length);
+
+            for (var i = 0; i < result.length; i++)
+                result[i] = Array(data.length);
+
+            forEach(data, function (item, i) {
+                forEach(property, function (prop, j) {
+                    var defaultValue = isArray(defaultValues) ? defaultValues[j] : defaultValues;
+                    result[j][i] = extractProperty(item, prop, defaultValue)
+                })
+            });
+
+            return result
         }
 
-        function extractProperty(object, path, defaultValue) {
-            var a = path.split('.');
+        function parseLabels(data, property, defaultValue) {
+            data = data.slice(-limit);
+            var result = Array(data.length);
 
-            for (var i = 0, n = a.length; i < n; ++i) {
-                var k = a[i];
+            forEach(data, function (item, i) {
+                result[i] = extractProperty(item, property, defaultValue)
+            });
+
+            return result
+        }
+
+        function extractProperty(object, path, defaultValue) {
+            for (var i = 0, n = path.length; i < n; ++i) {
+                var k = path[i];
 
                 if (k in object) {
                     object = object[k];