AngularJS Ressource with ChartAngular (Morris.JS Directive)

Question

I'm using this AngularJS directive for Morris-Charts: https://github.com/BilalBudhani/ChartAngular

I can use this directive from my html-page like this:

<donutchart id="TicketStatistik" data-options="chart_options"></donutchart>

I have a AngularJS Resource defined like this:

   .factory('barChartData', [
    '$resource', function($resource) {
        return $resource('./api/chart',
            { },
            { 'query': { method: 'GET' } }
        );
    }
])

This is the AngularJS Controller:

.controller('DonutChartCtrl', function ($scope) {     
   $scope.chart_options = {
        data: [
            { label: "Download Sales", value: 12 },
            { label: "In-Store Sales", value: 30 },
            { label: "Mail-Order Sales", value: 20 }
        ]
    };
})

How can I manage, that I can query my resource barChartData for the datasource of my DonutChartCtrl?

Thanks in advance

Answer 1

You need to inject the factory dependency in the controller. Like:

.controller('DonutChartCtrl', function ($scope, barChartData)

And then you can use the functions inside the controller. e.g.:

 $scope.chart_list = barChartData.query();