Line Chart in AngularJS v1 - CanvasJS JavaScript Charts

Line Chart in AngularJS v1 - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://code.angularjs.org/1.4.12/angular.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

<div ng-app="canvasjs" ng-controller="adminDashboardController">
  <div id="chartContainer" style="height: 360px; width: 100%;"></div>
</div>

JavaScript

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

myapp.controller("adminDashboardController", ["$scope",function($scope){
  var dps = [{x: 1, y: 10}, {x: 2, y: 13}, {x: 3, y: 18}, {x: 4, y: 20}, {x: 5, y: 17},{x: 6, y: 10}, {x: 7, y: 13}, {x: 8, y: 18}, {x: 9, y: 20}, {x: 10, y: 17}];
  var chartOptions ={  
    title: {
    	text: "Line Chart in AngularJS v1"
    },         
    data: [{
      type: "line",
      dataPoints : dps
    }]
  };
  var chart = new CanvasJS.Chart("chartContainer", chartOptions);
  chart.render(); 
}]);