Post
Ask Question

AngularJS Simple ChartCreation

  1. <!DOCTYPE>  
  2. <html>  
  3.     <head>  
  4.         <script src="../script/jquery.min.js" type="text/javascript"></script>  
  5.         <script src="../script/angular.min.js" type="text/javascript"></script>  
  6.         <script src="../script/chart.js" type="text/javascript"></script>  
  7.         <script type="text/javascript">  
  8.         var app = angular.module('myApp', []);  
  9.         app.controller('myCntrl', function ($scope) {  
  10.             data: [10,20,30,40,50,60];  
  11.             var chart = {  
  12.                 labels: ["Jan","Feb","Mar","April","May","June"],  
  13.                 datasets: [  
  14.                 {  
  15.                     label: "My First Angula Chart",  
  16.                     fillColor: "#578ebe",  
  17.                     strokeColor: "rgba(24, 107, 2, 0.8)",  
  18.                     pointColor: "rgba(24, 107, 2, 0.9)",  
  19.                     pointStrokeColor: "#fff",  
  20.                     pointHighlightFill: "#fff",  
  21.                     pointHighlightStroke: "rgba(24, 107, 2, 1)",  
  22.                     data: data  
  23.                 },  
  24.             ]  
  25.         };  
  26.         var canvasChart = document.getElementById("canvasChart").getContext('2d');  
  27.         new Chart(canvasChart).Line(chart);  
  28.     });  
  29.     </script>  
  30.     </head>  
  31.     <body>  
  32.         <div ng-app="myApp" ng-controller="myCntrl">  
  33.             <canvas id="canvasChart" width="1000" height="350"></canvas>  
  34.         </div>  
  35.     </body>  
  36. </html>