AngularJS - Angular-Charts Problem

0

First, good evening.

I'm having trouble displaying the graphics generated by angular-charts. library page: link

I followed the step-by-step carefully, I saw and reviewed all the code that I typed, I can not identify any problems. I looked for several sources, but none could make the blessed graph display. I'm trying to use the "donut" style for my project dashboard.

NOTE: There are no errors displaying 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>
    
asked by anonymous 14.08.2018 / 00:39

1 answer

1

Your variable $ scope.data may be the problem. It's like:

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

Should be:

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

Just reinforcing, check if 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>

And if the module of the chart has been inserted:

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

I hope I have helped. Good luck! :)

    
21.08.2018 / 16:13