Angularjs - Problem with Angular-Charts

Question

First of all, good night.

I’m having trouble displaying the graphics generated by angular-Charts. library page: http://jtblin.github.io/angular-chart.js/

I followed the step-by-step closely, saw and reviewed all the code I typed, I can’t identify any problems. I’ve looked at a number of sources, but none of them have managed to get the damn chart to show. I’m wanting to use the "doughnut" style for the Dashboard of a project of mine.

NOTE: No errors showing in developer mode, all libraries are properly imported into the project!

app.controller("dashboardController", function($scope, $http, $location)
{
        //nota: captura data atual
        var data = moment();
        $scope.datafim = new Date(data);
        //nota: captura primeiro dia do mês
        var datainicio = moment().startOf('month');
        $scope.datainicio = new Date(datainicio);


        $scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales"];
        $scope.data = [[300, 500, 100]];
})

<br /> 
<div ng-class="['uk-grid']" ng-controller="dashboardController">	                
            <div ng-class="['uk-width-1-6']">
            	<p>Tipo de Despesa</p>
                <select ng-class="['uk-select','uk-form-width-medium','uk-form-small']">
                	<option>Receita</option>
                	<option>Despesa</option>
                </select>
            </div>
            <div ng-class="['uk-width-1-5']">
            	<p>Data Inicio:</p>
                <input ng-model="datainicio" ng-class="['uk-input uk-form-width-large uk-form-small']" type="date"></div>
            <div ng-class="['uk-width-1-5']">
            	<p>Data Final:</p>
                <input ng-model="datafim" ng-class="['uk-input uk-form-width-large uk-form-small']" type="date">
        	</div>
</div>
<br />
<button ng-class="['uk-button uk-button-primary']">Gerar</button> <br /><br />
<!-- link dos gráficos e como utiliza-los: http://jtblin.github.io/angular-chart.js/ -->
<div ng-class="['uk-grid']">
    <div ng-class="['uk-width-1-3']">
        <h3>Controle de Receita / Despesa</h3>
        <canvas 
            id="doughnut" 
            class="chart chart-doughnut"
            data="data" 
            labels="labels">
        </canvas> 
    </div>
</div>

Answer 1

Your variable $Scope.data could be the problem. Is like:

  $scope.data = [
    [300, 500, 100]
  ];

Should be:

$scope.data = [300, 500, 100];

Just reinforcing, make sure the files are in the code:

<script src="node_modules/chart.js/Chart.min.js"></script>
<script src="node_modules/angular-chart.js/dist/angular-chart.min.js"></script>

What if the module of Chart was inserted:

angular.module('myModule', ['chart.js']);

I hope I helped. Good luck! :)