title: how to Create AngularJS charts with dynamic data
body: <p>Hi im trying having a webpage that displays the sentiments of tweets of politicians. I am trying to create a chart for the sentiment statistics. I am using Zingchart and i am able to create for static data but i am not able to create for dynamic data.</p>
  
  <p>This is the code that i used to insert static data with array chartdata.</p>
  
  <pre><code>   &lt;div class="row"&gt;
      &lt;div class="col-sm-12"&gt;
        &lt;div ng-init="chartdata = [[1167],[456],[990]]"&gt;
          &lt;zingchart id="chart-1" zc-values="chartdata" zc-json="myJson" 
           zc-width="100%" zc-height="568px"&gt;&lt;/zingchart&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/xB5Yz.png" rel="noreferrer">static pie chart</a></p>
  
  <p>It works fine like this but i want to use data from my angularjs instead of the static values.
  For example: Im trying to do something like this but it does not work</p>
  
  <pre><code>  &lt;div class="row"&gt;
        &lt;div class="col-sm-12"&gt;
          &lt;div ng-init="chartdata =[[{{politicianData.stats.total_positive}}],[{{politicianData.stats.total_negative}}],[{{politicianData.stats.total_neutral}}]]"&gt;
            &lt;zingchart id="chart-1" zc-values="chartdata" zc-json="myJson" zc-width="100%" zc-height="568px"&gt;&lt;/zingchart&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>How to get the data from the promise array data from the angular controller?   </p>
  
  <p>this is my politician-controller:</p>
  
  <pre><code>    angular.module('myapp')
      .controller('PoliticianController', function($scope, PoliticianData, Politician, searchService, utilService) {
  var politicianData = new Politician(PoliticianData);
  
          politicianData.$promise.then(function (result) {
  
              $scope.politicianData = result;
    });
  $scope.myJson = {
                              globals: {
                              shadow: false,
                              fontFamily: "Verdana",
                              fontWeight: "100"
                                          },
                                          type: "pie",
                                          backgroundColor: "#fff",
  
                                          legend: {
                                              layout: "x5",
                                              position: "50%",
                                              borderColor: "transparent",
                                              marker: {
                                                  borderRadius: 10,
                                                  borderColor: "transparent"
                                              }
                                          },
                                          tooltip: {
                                              text: "%v requests"
                                          },
                                          plot: {
                                              refAngle: "-90",
                                              borderWidth: "0px",
                                              valueBox: {
                                                  placement: "in",
                                                  text: "%npv %",
                                                  fontSize: "15px",
                                                  textAlpha: 1,
                                              }
                                          },
                                          series: [{
                                              text: "Positive",
                                              backgroundColor: "#FA6E6E",
                                          }, {
                                              text: "Negative",
                                              backgroundColor: "#D2D6DE"
                                          }, {
                                              text: "Neutral",
                                              backgroundColor: "#28C2D1"
                                          }]
                                      };
  
      });
  </code></pre>
  
  <p>And this is the politician.html page</p>
  
  <pre><code>&lt;span&gt;{{politician.first_name}} {{politician.last_name}}&lt;/span&gt;
                      &lt;/td&gt;
                      &lt;td&gt;{{politicianData.stats.total}}&lt;/td&gt;
                      &lt;td&gt;{{politicianData.stats.twitter.total}}&lt;/td&gt;
                      &lt;td&gt;{{politicianData.stats.rss.total}}&lt;/td&gt;
                     &lt;td&gt;{{politicianData.stats.total_negative}}&lt;/td&gt;
                     &lt;td&gt;{{politicianData.stats.total_positive}}&lt;/td&gt;
                     &lt;td&gt;{{politicianData.stats.total_neutral}}&lt;/td&gt;
  </code></pre>
  
  <p>
      
        
      
    </p>
  
  <p>PoliticianData.stats.total_positive displays the count correctly and i want to use the same data as input values to my chart.
  How do I do that?</p>