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:
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 :
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
Solution 1:
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.
Solution 2:
ZingChart wants you to give it values in arrays, or an array of arrays if you want to have it plot multiple lines in the chart. Your data is getting loaded correctly, so all you have to do is push the values you want into their respective arrays and pass that array of arrays to the chart.
I added ng-change="extractSubsities(selectedCity)" to your select box so that it will update the chart whenever you change the selection.
Then adding a simple forEach to your extractSubsities function to generate the arrays from the currently selected data gets you what I believe you are 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]
}
}
zingchart directive should look like this:
<zingchart id = "myChart" zc-values = "myData" zc-height = 500 zc-width = 600 ></zingchart>
Plunkr: Click here