Eu quero mudar o gráfico para cada cidade ou subcidade selecionada

Desenvolvi uma aplicação simples com o AngularJS e quero adicionar um gráfico simples baseado neste site Js Charts

Este é o meu 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" } ] } ] 

Eu chamo meus dados aqui.

  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 :

       
{{ item3.id }} {{ item3.name }} {{ item3.price }}

o resultado :

insira a descrição da imagem aqui

Quero extrair da cidade do elemento do name do atributo

Eu quero mudar o gráfico para cada cidade ou subcidade selecionada. Por exemplo, se eu selecionar a subcidade é sub A1 , preciso obter um gráfico como:

insira a descrição da imagem aqui

Por favor me ajude !

ATUALIZAÇÃO :

Eu tentei usar apenas um arquivo de origem de dados

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

Eu chamei meus dados aqui:

 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 :

       
{{ item3.id }} {{ item3.name }} {{ item3.price }}

Mas ainda não funciona, não foi possível carregar o gráfico

Eu tenho como um erro:

TypeError: Não é possível ler a propriedade ‘type’ de undefined

ATUALIZAÇÃO 2 :

Eu configurei isso em um plunkr: plnkr .

ATUALIZAÇÃO 3

Por favor, você pode me dizer como posso remover este Powered by ZingChart

insira a descrição da imagem aqui

Bem, se eu entendi bem, então você precisa de algo a seguir:

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

Eu modifiquei um pouco seu controlador (e a página html). Aqui está um exemplo – plunker .

As dificuldades (como posso ver) estavam no seu arquivo data.json . Tem uma estrutura estranha. Ele combina os parâmetros do gráfico e os dados em si. (no meu exemplo eu removi os parâmetros do gráfico e os codifiquei dentro do controlador, mas não é necessário).

Espero que ajude.

O ZingChart quer que você forneça valores em matrizes, ou uma matriz de matrizes, se você quiser plotar várias linhas no gráfico. Seus dados estão sendo carregados corretamente, então tudo que você precisa fazer é enviar os valores desejados para seus respectivos arrays e passar essa matriz de arrays para o gráfico.

Eu adicionei ng-change="extractSubsities(selectedCity)" à sua checkbox de seleção para que ele atualize o gráfico sempre que você alterar a seleção.

Em seguida, adicionando um simple forEach à sua function extractSubsities para gerar as matrizes a partir dos dados atualmente selecionados, obtém o que acredito que você está procurando.

 $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] } 

}

A diretiva zingchart deve ficar assim: Plunkr: Clique aqui