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

Question

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

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

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>

result :

I want to extract from the attribute name element city

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

Please help me!

UPDATE :

I tried to use only one source data file

 [{ "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 named my details 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 not working, he was unable to load the chart

I have an error:

TypeError: Unable to read the 'type' property from undefined

UPDATE 2 :

I installed this in plunkr: plnkr .

UPDATE 3

Please tell how I can remove this Powered by ZingChart

+4

javascript angularjs charts zingchart

Abderrahim May 16 '16 at 14:35

source share

2 answers

ZingChart wants you to give it values in arrays or an array of arrays if you want it to display multiple lines in a chart. Your data loads correctly, so all you have to do is click the values you need into the corresponding arrays and pass this array of arrays to the chart.

I added ng-change="extractSubsities(selectedCity)" in the selection box so that it updates the chart whenever you change the selection.

Then adding a simple forEach function to your extractSubsities function to generate arrays from the currently selected data gives you what I think you're looking for.

 $scope.extractSubsities = function(itemSelected) { if(itemSelected && itemSelected.elements){ $scope.data = itemSelected.elements; $scope.myData = itemSelected.elements console.log(itemSelected.elements) var price = [] var qte = [] itemSelected.elements.forEach(function(v) { price.push(v.price) qte.push(v.qte) }) $scope.myData = [price, qte] }

}

The zingchart directive should look like this: <zingchart id = "myChart" zc-values = "myData" zc-height = 500 zc-width = 600 ></zingchart> Plunkr: Click here

+3

tpie May 17 '16 at 20:11

source share

MaKCbIMKo · Accepted Answer · 2016-05-17 20:07

Well, if I understand you correctly, you need something like the 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 changed your controller (and html page) a bit. Here is an example - plunker .

The difficulties (as I see) were in your data.json file. It has a strange structure. It combines chart parameters and data. (in my example, I removed the chart parameters from it and hard-coded them inside the controller, but this is not necessary).

Hope this helps.

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

More articles: