Use c3.js instead of chart.js.

package.json

@@ -47,6 +47,7 @@
     "bootbox": "^4.4.0",
     "bootstrap": "^3.3.7",
     "bootstrap-additions": "^0.3.1",
+    "c3": "^0.4.13",
     "chartjs-plugin-annotation": "^0.5.5",
     "font-awesome": "^4.7.0",
     "highcharts-ng": "^1.1",

src/main.less

@@ -2,6 +2,8 @@
 
 @import '~angular-ui-notification/src/angular-ui-notification';
 
+@import (inline) '~c3/c3.css';
+
 @import (inline) '~bootstrap-additions/dist/bootstrap-additions.css';
 
 .italic {
@@ -11,3 +13,7 @@
 .stroke {
     text-decoration: line-through;
 }
+
+.c3-ygrid-line.zeroline line {
+    stroke: orange;
+}

src/operations/balance-chart.component.js

@@ -18,131 +18,121 @@
 /* jshint node: true */
 'use strict';
 
-var moment = require('moment');
+var moment = require('moment'),
+    c3     = require('c3');
 
 var angular = require('angular');
 
-var balanceChartTmpl   = require('./balance-chart.tmpl.html');
+var ngResource = require('angular-resource');
 
-var ngResource = require('angular-resource'),
-    ngChartJs    = require('angular-chart.js'),
-    chartJs    = require('chart.js'),
-    chartJsAnnotation = require('chartjs-plugin-annotation');
-
-chartJs.plugins.register([
-    'annotation'
-]);
 
 var balanceChartModule = angular.module('balanceChartModule', [
-    ngResource,
+    ngResource
-    ngChartJs
 ])
 
 .component('balanceChart', {
-    templateUrl: balanceChartTmpl,
+    template: '<div></div>',
     bindings: {
         minDate: '<',
         maxDate: '<'
     },
-    controller: function($routeParams, $log, Balances) {
+    controller: function($routeParams, Balances, $element, $log) {
         var vm = this;
 
-        vm.options = {
-            scales: {
-                yAxes: [{
-                    id: 'y-axis-left',
-                    type: 'linear',
-                    display: true,
-                    position: 'left'
-                }, {
-                    id: 'y-axis-right',
-                    type: 'linear',
-                    display: true,
-                    position: 'right',
-                    stacked: false
-                }],
-                xAxes: [{
-                    type: 'time',
-                    time: {
-                        unit: 'day',
-                    },
-                    stacked: true,
-                    ticks: {
-                        autoSkippadding: 10
-                    }
-                }]
-            },
-            annotation: {
-                annotations: [{
-                    type: 'line',
-                    scaleID: 'y-axis-left',
-                    value: -200,
-                    borderColor: '#FF0000',
-                    borderWidth: 4
-                }]
-            }
-        };
-
-        vm.colors = [
-            '#4e74ff', '#ff6363', '#268c26'
-        ];
-
-        vm.datasetOverride = [{
-            label: "Balance",
-            borderWidth: 3,
-            type: 'line',
-            yAxisID: 'y-axis-left'
-        }, {
-            label: "Expenses",
-            borderWidth: 3,
-            barThickness: 3,
-            type: 'bar',
-            yAxisID: 'y-axis-right'
-        }, {
-            label: "Revenues",
-            type: 'bar',
-            yAxisID: 'y-axis-right'
-        }];
-
-        vm.data = {
-            data: [[], [], []],
-            labels: []
-        };
-
         vm.loadData = function() {
-            $log.log(vm.minDate, vm.maxDate);
+            Balances.query({
-
-            vm.data = Balances.query({
                 id: $routeParams.accountId,
-                begin: vm.minDate.format('YYYY-MM-DD'),
+                //begin: vm.minDate.format('YYYY-MM-DD'),
-                end: vm.maxDate.format('YYYY-MM-DD')
+                //end: vm.maxDate.format('YYYY-MM-DD')
-            }).$promise.then(function(results) {
+            }, function(results) {
-                var labels   = [],
+                var headers = [['x', 'balances', 'expenses', 'revenues']];
-                    balances = [],
-                    expenses = [],
-                    revenues = [];
 
-                angular.forEach(results, function(result) {
+                var rows = results.map(function(result) {
-                    labels.push(result.operation_date);
+                    return [
-                    balances.push(result.balance);
+                        result.operation_date,
-                    expenses.push(result.expenses);
+                        result.balance,
-                    revenues.push(result.revenues);
+                        result.revenues,
+                        result.expenses
+                    ];
                 });
 
-                vm.data = {
+                vm.chart.load({
-                    data: [
+                    rows: headers.concat(rows)
-                        balances,
+                });
-                        expenses,
-                        revenues
-                    ],
-                    labels: labels
-                };
-
-                return vm.data;
             });
         };
 
         vm.$onInit = function() {
+            $log.log($element);
+
+            vm.chart = c3.generate({
+                //bindto: $element[0],
+                bindto: $element[0].children[0],
+                size: {
+                    height: 500,
+                //    witdh: 800,
+                },
+                data: {
+                    x: 'x',
+                    rows: [],
+                    axes: {
+                        expenses: 'y2',
+                        revenues: 'y2'
+                    },
+                    type: 'bar',
+                    types: {
+                        balances: 'area'
+                    },
+                    groups: [
+                        ['expenses', 'revenues']
+                    ]
+                },
+                axis: {
+                    x: {
+                        type: 'timeseries',
+                        tick: {
+                            format: '%Y-%m-%d',
+                            rotate: 50,
+                        }
+                    },
+                    y: {
+                        label: {
+                            text: 'Amount',
+                            position: 'outer-middle'
+                        }
+                    },
+                    y2: {
+                        show: true,
+                        label: {
+                            text: 'Amount',
+                            position: 'outer-middle'
+                        }
+                    }
+                },
+                grid: {
+                    x: {
+                        show: true,
+                    },
+                    y: {
+                        show: true,
+                        lines: [
+                            { value: 0, axis: 'y2' },
+                            { value: 0, axis: 'y', class: 'zeroline'}
+                        ]
+                    }
+                },
+                tooltip: {
+                    format: {
+                        value: function(value, ratio, id, index) {
+                            return value + '€';
+                        }
+                    }
+                },
+                subchart: {
+                    show: true
+                }
+            });
+
             vm.loadData();
         };
 
@@ -156,16 +146,6 @@ var balanceChartModule = angular.module('balanceChartModule', [
             id: '@id'
         }
     );
-})
-    
-.config(function (ChartJsProvider) {
-    ChartJsProvider.setOptions({
-        colors : [
-            '#803690', '#00ADF9', '#DCDCDC',
-            '#46BFBD', '#FDB45C', '#949FB1', '#4D5360'
-        ],
-        responsive: true
-    });
 });
 
 module.exports = balanceChartModule;

src/operations/balance-chart.tmpl.html

@@ -1,10 +0,0 @@
-<div>
-    <canvas id="balances-chart" class="chart-bar"
-        height='80'
-        chart-data="$ctrl.data.data"
-        chart-labels="$ctrl.data.labels"
-        chart-colors="$ctrl.colors"
-        chart-options="$ctrl.options"
-        chart-dataset-override="$ctrl.datasetOverride">
-    </canvas>
-</div>