Chart using AngularJS - CanvasJS JavaScript Charts

Chart using AngularJS - CanvasJS JavaScript Charts

HTML

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<html ng-app="canvasjs">
  <head>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js" crossorigin="anonymous"></script>
    <script data-require="[email protected]" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
    <script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
  </head>
  <body ng-controller="MainCtrl">
    <p>{{name}}</p>
    <div dynamic-element></div>
    <div id='container'></div>
  </body>
</html>

JavaScript

var app = angular.module('canvasjs', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'CanvasJS - AngularJS';
});

app.directive("dynamicElement", function($compile){
  return{
        link: function(scope, ele){
          var dom = '<div id="chartContainer"></div>';
          var compiled = $compile(dom)(scope);
          angular.element($('#container')).prepend(compiled);
          
          //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 ={  
          	zoomEnabled: true,
            zoomType: "xy",            
            axisY:{
            	includeZero: false,
            },
          	data: [{
          		type: "line",
          		//dataPoints : dps
          	}]
          };
          var chart = new CanvasJS.Chart("chartContainer", chartOptions);
          chart.render(); 
            
            
    }
  }
});