<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/jtblin/angular-chart.js/master/dist/angular-chart.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="app">
<div ng-controller="ControladorPrincipal">
<canvas
class="chart chart-pie"
chart-data="datos"
chart-labels="etiquetas"></canvas>
<br>
<input placeholder="Etiqueta" type="text" ng-model="etiqueta" /><br><br>
<input placeholder="Valor" type="number" ng-model="valor" /><br><br>
<button ng-click="agregarDato(etiqueta, valor)">Agregar</button>
</div>
</body>
</html>
angular
.module("app", ['chart.js']) // Le decimos que usaremos a chart.js
.controller("ControladorPrincipal", ["$scope", function($scope) {
$scope.etiquetas = ['Gastos', 'Ventas', 'Compras'];
$scope.datos = [1244, 1500, 2053];
$scope.agregarDato = function(etiqueta, valor) {
if (etiqueta && valor) { //Comprobar si no son nulos o indefinidos
$scope.datos.push(valor);
$scope.etiquetas.push(etiqueta);
}
};
}]);
/* Styles go here */