how to Create AngularJS charts with dynamic data

Question

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.

This is the code that i used to insert static data with array chartdata.

   <div class="row">
    <div class="col-sm-12">
      <div ng-init="chartdata = [[1167],[456],[990]]">
        <zingchart id="chart-1" zc-values="chartdata" zc-json="myJson" 
         zc-width="100%" zc-height="568px"></zingchart>
      </div>
    </div>
  </div>

static pie chart

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

  <div class="row">
      <div class="col-sm-12">
        <div ng-init="chartdata =[[{{politicianData.stats.total_positive}}],[{{politicianData.stats.total_negative}}],[{{politicianData.stats.total_neutral}}]]">
          <zingchart id="chart-1" zc-values="chartdata" zc-json="myJson" zc-width="100%" zc-height="568px"></zingchart>
        </div>
      </div>
    </div>

How to get the data from the promise array data from the angular controller?

this is my politician-controller:

    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"
                                        }]
                                    };

    });

And this is the politician.html page

<span>{{politician.first_name}} {{politician.last_name}}</span>
                    </td>
                    <td>{{politicianData.stats.total}}</td>
                    <td>{{politicianData.stats.twitter.total}}</td>
                    <td>{{politicianData.stats.rss.total}}</td>
                   <td>{{politicianData.stats.total_negative}}</td>
                   <td>{{politicianData.stats.total_positive}}</td>
                   <td>{{politicianData.stats.total_neutral}}</td>

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?

Answer 1

• Create a service with factory
• Call that service for data
• Use only zingchart directive
• When scope data changed, chart will be open.

Example:

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

myModule.controller('myController', function($scope, chartService) {
  $scope.chartdata = chartService.getDataWithService();
});

myModule.factory('chartService', function($http) {
  return {
    getDataWithService: function() {
      var url = "yourServiceURL";
      return $http.get(url);
    },
    getData: function() {
      return {
        type: 'line',
        series: [{
          values: [54, 23, 34, 23, 43]
        }, {
          values: [10, 15, 16, 20, 40]
        }]
      };
    }
  };
});

html:

 <zingchart id="chart-1" zc-values="chartdata" zc-json="myJson" zc-width="100%" zc-height="568px"></zingchart>