title: Fill Chart js with $http.get() data
body: <p>Trying to get some data off of a webservice and display it in a chart. I figured chart js would be a good means to do so. (actually using tc-angular-chartjs). The <code>$http.get( )</code> call I am using to test is:</p>
  
  <pre><code>$http.get('http://myjson.com/1chr1').success(function(data2) {
    data2.forEach(function(r) {
      $scope.labels.push(r.name);
      $scope.scores.push(r.score);
    });
  });
  </code></pre>
  
  <p>and here is the whole js file for just the doughnut chart:</p>
  
  <pre><code>'use strict';
  angular
    .module( 'app.doughnut', [] )
    .controller( 'DoughnutCtrl', function ( $scope ) {
      $scope.labels = [];
      $scope.scores = [];
  
      $scope.data = [
        {
          value: 700,
          color:'#F7464A',
          highlight: '#FF5A5E',
          label: 'Red'
        },
        {
          value: 50,
          color: '#46BFBD',
          highlight: '#5AD3D1',
          label: 'Green'
        },
        {
          value: 100,
          color: '#FDB45C',
          highlight: '#FFC870',
          label: 'Yellow'
        }
      ];
  
      $scope.options =  {
  
        // Sets the chart to be responsive
        responsive: true,
  
        //Boolean - Whether we should show a stroke on each segment
        segmentShowStroke : true,
  
        //String - The colour of each segment stroke
        segmentStrokeColor : '#fff',
  
        //Number - The width of each segment stroke
        segmentStrokeWidth : 2,
  
        //Number - The percentage of the chart that we cut out of the middle
        percentageInnerCutout : 50, // This is 0 for Pie charts
  
        //Number - Amount of animation steps
        animationSteps : 100,
  
        //String - Animation easing effect
        animationEasing : 'easeOutBounce',
  
        //Boolean - Whether we animate the rotation of the Doughnut
        animateRotate : true,
  
        //Boolean - Whether we animate scaling the Doughnut from the centre
        animateScale : false,
  
        //String - A legend template
        legendTemplate : '&lt;ul class="tc-chart-js-legend"&gt;&lt;% for (var i=0; i&lt;segments.length; i++){%&gt;&lt;li&gt;&lt;span style="background-color:&lt;%=segments[i].fillColor%&gt;"&gt;&lt;/span&gt;&lt;%if(segments[i].label){%&gt;&lt;%=segments[i].label%&gt;&lt;%}%&gt;&lt;/li&gt;&lt;%}%&gt;&lt;/ul&gt;'
  
      };
  
    });
  </code></pre>
  
  <p>The issue I am running into is that most of these examples use the same format to supply the chart with data (static data with the same labels like value/label/color/highlight).</p>
  
  <p>For my needs the colors or highlight dont really matter but I need the data pulled from a wesbervice where the value I need for the chart is called <code>name</code> and the label for the chart is called <code>score</code>.</p>
  
  <p>So I was thinking I could do the <code>$http.get( )</code> call and put the labels and scores into 2 different arrays and then the data portion in the js would look something like:</p>
  
  <pre><code>$scope.data = {
      labels : ["option 1","option 2","option 3"],
      values : [ 10, 20, 30 ],
      datasets: [ value : values, color : #F7484A, highlight : #FF5A5E, label : labels]
  };
  </code></pre>
  
  <p>I saw something like this done for a Chart.js bar graph, but not for a doughnut graph, and I cannot seem to get it to work. Maybe it isnt possible?</p>
  
  <p>Are there any other alternatives? I mean I cannot be the only person who needs to display dynamic data into a nice responsive chart, but all of the examples use static data.</p>
  
  <p><strong>EDIT ANSWER</strong> I took dubhov's advice. Also found out my webservice link was messed up so I wasnt getting any data :p. Here is the new js for future reference:</p>
  
  <pre><code>'use strict';
  angular
    .module('app.doughnut', [])
    .controller('DoughnutCtrl', function($scope, $http) {
  
      $http.get('https://api.myjson.com/bins/1chr1').success(function(data2) {
        $scope.data = [];
        data2.forEach(function(r) {
          $scope.data.push({
            'value': r.score,
            'color': '#F7464A',
            'highlight': '#FF5A5E',
            'label': r.name
          });
        });
      });
  
  
      $scope.options = {
  
        // Sets the chart to be responsive
        responsive: true,
  
        //Boolean - Whether we should show a stroke on each segment
        segmentShowStroke: true,
  
        //String - The colour of each segment stroke
        segmentStrokeColor: '#fff',
  
        //Number - The width of each segment stroke
        segmentStrokeWidth: 2,
  
        //Number - The percentage of the chart that we cut out of the middle
        percentageInnerCutout: 50, // This is 0 for Pie charts
  
        //Number - Amount of animation steps
        animationSteps: 100,
  
        //String - Animation easing effect
        animationEasing: 'easeOutBounce',
  
        //Boolean - Whether we animate the rotation of the Doughnut
        animateRotate: true,
  
        //Boolean - Whether we animate scaling the Doughnut from the centre
        animateScale: false,
  
        //String - A legend template
        legendTemplate: '&lt;ul class="tc-chart-js-legend"&gt;&lt;% for (var i=0; i&lt;segments.length; i++){%&gt;&lt;li&gt;&lt;span style="background-color:&lt;%=segments[i].fillColor%&gt;"&gt;&lt;/span&gt;&lt;%if(segments[i].label){%&gt;&lt;%=segments[i].label%&gt;&lt;%}%&gt;&lt;/li&gt;&lt;%}%&gt;&lt;/ul&gt;'
  
      };
  
    });
  </code></pre>