I want to change the chart for each city or subcity selected

Well, If I understand you right then you need something following:

angular.module("myApp",['zingchart-angularjs'])
   .controller('MainController', ['$scope', '$http', function($scope, $http) {
      $scope.chartBase = {
        "type": "line",
        "plotarea": {
          "adjust-layout": true /* For automatic margin adjustment. */
        },
        "scale-x": {
          "label": { 
            "text": "Above is an example of a category scale" /* Add a scale title with a label object. */
          },
          "labels": ["name1", "name2", "name3"] /* Add your scale labels with a labels array. */
        },
        "series": [{
            "values": [15, 18, 11] //here the prices of city selected
          },{
            "values": [10, 11, 14] //here the qte of city selected
          }]
      };
      $scope.chartData = angular.copy($scope.chartBase);

      $http.get('data.json')
           .then(function(response) {
             $scope.cities = response.data; // save the request data
             $scope.selectedCity = $scope.cities[0]; // select the first one
             $scope.changeCity(); // update chart
            }, function(error) { console.log(error); });

      $scope.changeCity = function() {
        if($scope.selectedSubCity || $scope.selectedCity){ // if something has been selected
            $scope.data = ($scope.selectedSubCity || $scope.selectedCity).elements; // update elements field

            // initialize the array to be displayed in chart
            var labels = [];
            var price = {
              "values": []
            };
            var qte = {
              "values": []
            };

            // fill the arrays to be displayed from the selected city (sub city)
            angular.forEach($scope.data, function(item, index) {
              labels.push(item.name);
              price.values.push(item.price);
              qte.values.push(item.qte);
            });

            // put selected values to the field that is used to render the chart
            $scope.chartData["scale-x"].labels = labels;
            $scope.chartData.series = [ price, qte ];
        }
      }
   }]);

I modified a bit you controller (and html page). Here is an example – plunker.

The difficulties (as I can see) were in your data.json file. It has a weird structure. It combines the chart parameters and the data itself. (in my example I removed chart parameters from it and hardcoded them inside the controller. but it’s not necessary).

Hope it will help.

Leave a Comment