Primeiramente, boa noite.
Estou tendo dificuldades para exibir os gráficos gerados pelo angular-charts. página da biblioteca: http://jtblin.github.io/angular-chart.js/
Segui o passo-a-passo minuciosamente, vi e revi todo o código que eu digitei, não consigo identificar nenhum problema. Procurei diversas fontes, mas nenhuma conseguiu fazer o bendito gráfico exibir. Estou querendo usar o estilo "doughnut" para o dashboard de um projeto meu.
OBS: Não há erros exibindo no modo desenvolvedor, todas as bibliotecas estão apropriadamente importadas no projeto!
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>