title: Drawing graphs in AngularJS and Chart.js
body: <p>So I'm using the following wrapper (<a href="https://github.com/lgsilver/angles" rel="nofollow">https://github.com/lgsilver/angles</a>) to use Chart.js in Angular.</p>
  
  <p>Keep in mind, everything is mock data at this point.</p>
  
  <p>In my HTML, I have an element:</p>
  
  <pre><code>&lt;canvas chart type="Line" options="options" data="showChart(selectedUser)" width="500" height="300"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>that takes the selectedUser and queries the service, returns the array and draws the graph. </p>
  
  <p>Inside my controller, I have the line which retrieves the data from the service</p>
  
  <pre><code> $scope.chartData = chartData.returnedData($scope.competitionId); //Gets chart data for each user from server
  </code></pre>
  
  <p>And of course the showChart() function (where I need the most help I believe).</p>
  
  <pre><code>$scope.showChart = function(user) {
          userId = user;
          for (var i = 0; i &lt; $scope.chartData.length; i++) {
              //var chartData = $scope.chartData[i];
          };
      };
  
  app.service("chartData", function() {
  
      this.returnedData = function(comp)  {
          return [{
              userId: 2,
              labels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],
              datasets: [{
                  fillColor: "rgba(151,187,205,0)",
                  strokeColor: "#e67e22",
                  pointColor: "rgba(151,187,205,0)",
                  pointStrokeColor: "#e67e22",
                  data: [4, 3, 5, 4, 6]
              }],
          }];
      };
  });
  </code></pre>
  
  <hr>
  
  <p>Currently, I get a blank. To test that the library is correctly loaded etc, if I have this inside my controller, it does correctly draw and display the graph. Notice the data="" element in the HTML now. </p>
  
  <pre><code>&lt;canvas chart type="Line" options="options" data="chartLine" width="500" height="300"&gt;&lt;/canvas&gt;
  
  $scope.chartLine = {
      labels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],
      datasets: [{
          fillColor: "rgba(151,187,205,0)",
          strokeColor: "#e67e22",
          pointColor: "rgba(151,187,205,0)",
          pointStrokeColor: "#e67e22",
          data: [4, 3, 5, 4, 6]
      }, {
          fillColor: "rgba(151,187,205,0)",
          strokeColor: "#f1c40f",
          pointColor: "rgba(151,187,205,0)",
          pointStrokeColor: "#f1c40f",
          data: [8, 3, 2, 5, 4]
      }, {
          fillColor: "rgba(197,187,102,0)",
          strokeColor: "#f1c40f",
          pointColor: "rgba(151,187,205,0)",
          pointStrokeColor: "#f1c40f",
          data: [8, 5, 1, 5, 4]
      }],
  };
  </code></pre>