<!DOCTYPE>
<html>
<head>
<script src="../script/jquery.min.js" type="text/javascript"></script>
<script src="../script/angular.min.js" type="text/javascript"></script>
<script src="../script/chart.js" type="text/javascript"></script>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('myCntrl', function ($scope) {
data: [10,20,30,40,50,60];
var chart = {
labels: ["Jan","Feb","Mar","April","May","June"],
datasets: [
{
label: "My First Angula Chart",
fillColor: "#578ebe",
strokeColor: "rgba(24, 107, 2, 0.8)",
pointColor: "rgba(24, 107, 2, 0.9)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(24, 107, 2, 1)",
data: data
},
]
};
var canvasChart = document.getElementById("canvasChart").getContext('2d');
new Chart(canvasChart).Line(chart);
});
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCntrl">
<canvas id="canvasChart" width="1000" height="350"></canvas>
</div>
</body>
</html>Lets get started with simple creating charts in AngularJS using the simple code.
