Menu
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
997
Right-click your chart, and then choose Select Data. In the Legend Entries (Series) box, click the series you want to change. Click Edit, make your changes, and click OK. Changes you make may break links to the source data on the worksheet.
On the Design tab, in the Type group, click Change Chart Type. In the Change Chart Type dialog box, click a chart type that you want to use.
Move a chart to another worksheet Click anywhere in the chart. Under Chart Tools, on the Design tab, in the Location group, click Move Chart.
On the Format tab, in the Current Selection group, click Format Selection. In the Format <Chart Element> dialog box, click a category, and then select the formatting options that you want. Important: Depending on the selected chart element, different formatting options are available in this dialog box.
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.
77
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
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
