Abderrahim Abderrahim - 6 months ago 31
Javascript Question

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

I developed a simple application with AngularJS and I want to add a simple chart based on this website Js Charts

This is my data.json:

[
{
"name": "city A",
"elements": [
{
"id": "c01",
"name": "name1",
"price": "15",
"qte": "10"
},
{
"id": "c02",
"name": "name2",
"price": "18",
"qte": "11"
},
{
"id": "c03",
"name": "name3",
"price": "11",
"qte": "14"
}
],
"subsities": [
{
"name": "sub A1",
"elements": [
{
"id": "sub01",
"name": "nameSub1",
"price": "1",
"qte": "14"
},
{
"id": "sub02",
"name": "nameSub2",
"price": "8",
"qte": "13"
},
{
"id": "sub03",
"name": "nameSub3",
"price": "1",
"qte": "14"
}
]
},
{
"name": "sub A2",
"elements": [
{
"id": "ssub01",
"name": "nameSsub1",
"price": "1",
"qte": "7"
},
{
"id": "ssub02",
"name": "nameSsub2",
"price": "8",
"qte": "1"
},
{
"id": "ssub03",
"name": "nameSsub3",
"price": "4",
"qte": "19"
}
]
},
{
"name": "sub A3",
"elements": [
{
"id": "sssub01",
"name": "nameSssub1",
"price": "1",
"qte": "11"
},
{
"id": "sssub02",
"name": "nameSssub2",
"price": "2",
"qte": "15"
},
{
"id": "sssub03",
"name": "nameSssub3",
"price": "1",
"qte": "15"
}
]
}
]
},
{
"name": "city B",
"elements": [
{
"id": "cc01",
"name": "name11",
"price": "10",
"qte": "11"
},
{
"id": "cc02",
"name": "name22",
"price": "14",
"qte": "19"
},
{
"id": "cc03",
"name": "name33",
"price": "11",
"qte": "18"
}
]
},
{
"name": "city C",
"elements": [
{
"id": "ccc01",
"name": "name111",
"price": "19",
"qte": "12"
},
{
"id": "ccc02",
"name": "name222",
"price": "18",
"qte": "17"
},
{
"id": "ccc03",
"name": "name333",
"price": "10",
"qte": "5"
}
]
}
]


I call my data here.

angular.module('app', [])
.controller('MainController', ['$scope', '$http', function($scope, $http) {
$http.get('js/controllers/data.json').then(function(response) {
$scope.cities = response.data;
$scope.selectedCity = $scope.cities[0];
$scope.data = $scope.selectedCity.elements;
});

$scope.myJson = {
"type": "line",
"plotarea": {
"adjust-layout":true /* For automatic margin adjustment. */
},
"scale-x": {
"label": { /* Add a scale title with a label object. */
"text":"Above is an example of a category scale",
},
/* Add your scale labels with a labels array. */
"labels":["name1","name2","name3"]
},
"series": [
{"values":[15,18,11]},//here the prices of city selected
{"values":[10,11,14]}//here the qte of city selected
]
};

$scope.extractSubsities = function(itemSelected) {
if (itemSelected && itemSelected.elements) {
$scope.data = itemSelected.elements;
}
}
}]);


index.html :

<body ng-controller="MainCtrl">
<select ng-model="selectedCity" ng-change="extractSubsities(selectedCity)" ng-options="item as item.name for item in cities track by item.name" ng-init="selectedCity = cities[0];extractSubsities(selectedCity)">
</select>

<select ng-show="selectedCity.subsities" ng-model="selectedSubCity" ng-change="extractSubsities(selectedSubCity)" ng-options="item2 as item2.name for item2 in selectedCity.subsities track by item2.name">
<option style="" value=""></option>
</select>

<table>
<tr ng-repeat="item3 in data track by item3.id">
<td>{{ item3.id }}</td>
<td>{{ item3.name }}</td>
<td>{{ item3.price }}</td>
</tr>
</table>

<zingchart id = "myChart" zc-json = "myJson" zc-height = 500 zc-width = 600 ></zingchart>
</body>


the result:

enter image description here

I want to extract from the the attribute
name
element's city

I want to change the chart for each city or subcity selected. For example if I select the subcity is
sub A1
I need to get a chart like :

enter image description here

Please help me !

UPDATE :

I tried to use only one source file of data

[{
"type": "line",
"plotarea": {
"adjust-layout": true
},
"scale-x": {
"label": {
"text": "├ęchelle essence gazoile"
},

"labels": ["sub01", "sub02", "sub02"]
},
"series": [{
"values": [1, 8, 1]
}, {
"values": [14, 13, 14]
}],

"name": "city A",
"elements": [{
"id": "c01",
"name": "name1",
"price": "15",
"qte": "10"
}, {
"id": "c02",
"name": "name2',
"price": "18,
"qte": "11"
}, {
"id": "c03",
"name": "name3",
"price": "11",
"qte": "14"
}],
"subsities": [{
"name": "sub A1",
"elements": [{
"id": "sub01",
"name": "nameSub1",
"price": "1",
"qte": "14"
}, {
"id": "sub02",
"name": "nameSub2",
"price": "8",
"qte": "13"
}, {
"id": "sub03",
"name": "nameSub3",
"price": "1",
"qte": "14"
}]
}, {
"name": "sub A2",
"elements": [{
"id": "ssub01",
"name": "nameSsub1",
"price": "1",
"qte": "7"
}, {
"id": "ssub02",
"name": "nameSsub2",
"price": "8",
"qte": "1"
}, {
"id": "ssub03",
"name": "nameSsub3",
"price": "4",
"qte": "19"
}]
}, {
"name": "sub A3",
"elements": [{
"id": "sssub01",
"name": "nameSssub1",
"price": "1",
"qte": "11"
}, {
"id": "sssub02",
"name": "nameSssub2",
"price": "2",
"qte": "15"
}, {
"id": "sssub03",
"name": "nameSssub3",
"price": "1",
"qte": "15"
}]
}]
}, {
"name": "city B",
"elements": [{
"id": "cc01",
"name": "name11",
"price": "10",
"qte": "11"
}, {
"id": "cc02",
"name": "name22",
"price": "14",
"qte": "19"
}, {
"id": "cc03",
"name": "name33",
"price": "11",
"qte": "18"
}]
}, {
"name": "city C",
"elements": [{
"id": "ccc01",
"name": "name111",
"price": "19",
"qte": "12"
}, {
"id": "ccc02",
"name": "name222",
"price": "18",
"qte": "17"
}, {
"id": "ccc03",
"name": "name333",
"price": "10",
"qte": "5"
}]
}];


I called my data here :

angular.module('app', []).controller('MainController', ['$scope', '$http', function($scope, $http) {

$http.get('js/controllers/data.json').then(function(response) {
$scope.cities = response.data;
$scope.myJson=response.data;
$scope.selectedCity = $scope.cities[0];
$scope.data = $scope.selectedCity.elements;
}, function(error) { console.log(error); });

$scope.name = 'World';
$scope.data;

$scope.extractSubsities = function(itemSelected) {
if(itemSelected && itemSelected.elements){
$scope.data = itemSelected.elements;
}

}

}]);


index.html :

<body ng-controller="MainCtrl">
<select ng-model="selectedCity" ng-change="extractSubsities(selectedCity)" ng-options="item as item.name for item in cities track by item.name" ng-init="selectedCity = cities[0];extractSubsities(selectedCity)">
</select>

<select ng-show="selectedCity.subsities" ng-model="selectedSubCity" ng-change="extractSubsities(selectedSubCity)" ng-options="item2 as item2.name for item2 in selectedCity.subsities track by item2.name">
<option style="" value=""></option>
</select>

<table>
<tr ng-repeat="item3 in data track by item3.id">
<td>{{ item3.id }}</td>
<td>{{ item3.name }}</td>
<td>{{ item3.price }}</td>
</tr>
</table>
</div>
<zingchart id = "myChart" zc-json = "myJson" zc-height = 500 zc-width = 600 ></zingchart>
</body>


But still doesn't work it couldn't load the chart

I have as an error :


TypeError: Cannot read property 'type' of undefined


UPDATE 2 :

I set this up in a plunkr: plnkr.

UPDATE 3

Please can you tell me how can I remove this
Powered by ZingChart


enter image description here

Answer

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.