Basic Column Chart - CanvasJS JavaScript Charts

Basic Column Chart - CanvasJS JavaScript Charts

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js" crossorigin="anonymous"></script>
    <script data-require="angular.js@1.4.x" 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>
    <body ng-controller="adminDashboardController">
<div id="container" style="height: 360px; width: 100%;"></div>
</body>

JavaScript

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

app.controller('adminDashboardController', 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",            
          	data: [{
          		type: "line",
          		dataPoints : dps
          	}]
          };
          var chart = new CanvasJS.Chart("chartContainer", chartOptions);
          chart.render(); 
            
            
    }
  }
});