Chart.js example

<!DOCTYPE html>
<html>

  <head>
    <title>Bar Chart</title>
    <script data-require="moment.js@*" data-semver="2.14.1" src="https://npmcdn.com/moment@2.14.1"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
    <script src="angles.js"></script>
    <meta name="viewport" content="initial-scale = 1, user-scalable = no" />
    <style>
			canvas{
			}
		</style>
  </head>

  <body>
    <canvas id="canvas" height="450" width="600"></canvas>
    <script>

		var model = {
	type: "bar",
	data: {
		labels: [1480572000000, 1477976400000, 1475298000000, 1472706000000, 1470027600000, 1467349200000, 1464757200000, 1462078800000, 1459486800000, 1456812000000, 1454306400000, 1451628000000],
		datasets: [{
			data: [9, 11, 47, 7, 20, 8, 20, 10, 8, 10, 8, 14],
			label: "DECLINED",
			borderColor: "#ff6600",
			backgroundColor: "#ff6600"
		}, {
			data: [14, 8, 53, 17, 20, 17, 10, 11, 10, 7, 14, 100],
			label: "APPROVED",
			borderColor: "#43a6d7",
			backgroundColor: "#43a6d7"
		}]
	},
	options: {
		responsive: true,
		legend: {
			labels: {}
		},
		scales: {
			xAxes: [{
				type: "time",
        gridLines: {
          offsetGridLines: true
        },
				time: {
					tooltipFormat: "MM-DD-YYYY ha",
					unit: "month"
				},
				barThickness: 25
			}],
			yAxes: [{
				ticks: {
					beginAtZero: true,
					max: 100
				},
				scaleLabel: {
					display: true,
					labelString: "Percentage of approvals"
				}
			}]
		}
	}
}


	new Chart(document.getElementById("canvas").getContext("2d"), model);
	
	</script>
  </body>

</html>

// Code goes here

/* Styles go here */

var angles = angular.module("angles", []);


angles.chart = function (type) {
	return { 
		restrict: "A",
		scope: {
			data: "=",
			options: "=",
			id: "@",
			width: "=",
			height: "="
		},
		link: function ($scope, $elem) {
			var ctx = $elem[0].getContext("2d");

			if ($scope.width <= 0) {
				$elem.width($elem.parent().width());
				$elem.height($elem.parent().height());
				ctx.canvas.width = $elem.width();
				ctx.canvas.height = ctx.canvas.width / 2;				
			} else {
				ctx.canvas.width = $scope.width || ctx.canvas.width;
				ctx.canvas.height = $scope.height || ctx.canvas.height;
			}

	
			var chart = new Chart(ctx);

			$scope.$watch("data", function (newVal, oldVal) { 
				// if data not defined, exit
				if (!newVal) return;
				
				chart[type]($scope.data, $scope.options);
			}, true);
		}
	}
}


/* General Chart Wrapper */
angles.directive("chart", function () { 
	return { 
		restrict: "A",
		scope: {
			data: "=",
			type: "@",
			options: "=",
			id: "@",
			width: "=",
			height: "="
		},
		link: function ($scope, $elem) {
			var ctx = $elem[0].getContext("2d");

			if ($scope.width <= 0) {
				$elem.width($elem.parent().width());
				$elem.height($elem.parent().height());
				ctx.canvas.width = $elem.width();
				ctx.canvas.height = ctx.canvas.width / 2;				
			} else {
				ctx.canvas.width = $scope.width || ctx.canvas.width;
				ctx.canvas.height = $scope.height || ctx.canvas.height;
			}

			var chart = new Chart(ctx);
			
			$scope.$watch("data", function (newVal, oldVal) {
				if ($scope.data !== undefined) { 
				  chart[$scope.type]($scope.data, $scope.options);
				}
			}, true);
		}
	} 
});


/* Aliases for various chart types */
angles.directive("linechart", function () { return angles.chart("Line"); });
angles.directive("barchart", function () { return angles.chart("Bar"); });
angles.directive("radarchart", function () { return angles.chart("Radar"); });
angles.directive("polarchart", function () { return angles.chart("PolarArea"); });
angles.directive("piechart", function () { return angles.chart("Pie"); });
angles.directive("doughnutchart", function () { return angles.chart("Doughnut"); });
/* BC */
angles.directive("donutchart", function () { return angles.chart("Doughnut"); });