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

Question

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

I want to change the chart for each city or subcity selected — Abderrahim, May 16 '16 at 16:39
first question: why you use `$scope.myJson` variable to display, but you modify `$scope.data` by `$scope.extractSubsities` function? — MaKCbIMKo, May 16 '16 at 17:15
@MaKCbIMKo you mean that I can move it into my data json and use only $scope.data instead of $scope.myJson ?!! — Abderrahim, May 16 '16 at 17:59
I mean that you need to use the same variable in both cases. If you can add the structure of your `data` that might help. — MaKCbIMKo, May 16 '16 at 18:47
Does it display the chart on the load? (if you could create jsfiddle - that might help) — MaKCbIMKo, May 17 '16 at 13:48
I believe that in your json you have an array, but you need an object — MaKCbIMKo, May 17 '16 at 13:57
you have a few different issues, I think, just in the way you are handling your data. You really should set this up in a plunkr. To get your chart to switch values, you need to do something like ng-click="myJson=item" in the tr tag or use ng-change if you want to use the dropdown. — tpie, May 17 '16 at 14:35
At first sight (haven't even read it all), you have a typo in `"id": "c02", "name": "name2', "price": "18, "qte": "11"` You are opening double quotes in name2, and closing with a single quote. — Anfelipe, May 17 '16 at 16:39
@MaKCbIMKo I set this in a plnkr http://plnkr.co/edit/NLO0xqyy7L7DHM4onOtQ?p=preview — Abderrahim, May 17 '16 at 17:10
@tpie set this in a plnkr http://plnkr.co/edit/NLO0xqyy7L7DHM4onOtQ?p=preview — Abderrahim, May 17 '16 at 17:10
@Abderrahim The powered by ZingChart can be removed with a license key after purchasing the library for commercial use. Otherwise the library is free to use with the watermark. https://www.zingchart.com/buy/ — mike-schultz, May 20 '16 at 15:01

score 5 · Accepted Answer · answered May 17 '16 at 20:07

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.

There is a small problem that a vertical line is not in order, if you see when you click on the city A the vertical line start with 15 , 18 , 11 , 10 and then 14 it doesn't keep the values in order. I need to have the values in order like 10, 11, 14, 15 and 18 — Abderrahim, May 19 '16 at 08:50
@Abderrahim - The dataset is being being read as an array of strings rather than numeric values, e.g. ["10", "11", "14"] rather than [10,11,14]. I added a parseInt in the changeCity function : http://plnkr.co/edit/i3UPTW99RFRFZ8E6NuZq?p=preview — mike-schultz, May 19 '16 at 15:43
@mike-schultz you're amazing just I need to parse a Float one (parseFloat), thank you so much — Abderrahim, May 20 '16 at 08:44
@mike-schultz Please take a look at this question maybe you have an idea http://stackoverflow.com/questions/37375696/i-want-to-make-a-json-call-to-a-url — Abderrahim, May 22 '16 at 15:20
@mike-schultz Please take a look at this question maybe you have an idea http://stackoverflow.com/questions/37375696/i-want-to-make-a-json-call-to-a-url — Abderrahim, May 22 '16 at 15:21

score 3 · Answer 2 · answered May 17 '16 at 20:11

3

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

answered May 17 '16 at 20:11

tpie

6,021
3
22
41

There is a small problem that a vertical line is not in order, if you see when you click on the city A the vertical line start with 15 , 18 , 11 , 10 and then 14 it doesn't keep the values in order. I need to have the values in order like 10, 11, 14, 15 and 18 – Abderrahim May 19 '16 at 08:50
OK, but that is just a matter of sorting the arrays - a very basic problem, to which I am confident stackoverflow has plenty of good answers to. Google would also get you an answer to that problem quickly. Your original post was regarding getting the chart working, which my answer does do. – tpie May 19 '16 at 14:00
http://stackoverflow.com/questions/1063007/how-to-sort-an-array-of-integers-correctly – tpie May 19 '16 at 14:01
Can you please edit your answer and fix this in your Plunkr please – Abderrahim May 19 '16 at 14:43
No, sorry. Stack Overflow is for help, not a free code writing service. I already fixed the problem you asked for help with. A simple thing like sorting an array is something you need to learn to do if you are writing JavaScript. I even provided you the link above. It's worth the 10 minutes it takes to research and learn how to do it. I addressed the problem you asked about. You should accept the answer. – tpie May 19 '16 at 14:44
1

I will try to understand it and then back to you @tpie – Abderrahim May 19 '16 at 15:27
2

The dataset is being being read as an array of strings rather than numeric values, e.g. ["10", "11", "14"] rather than [10,11,14]. ZingChart is treating the values as strings rather than the desired numeric values. Sorting is not the issue. – mike-schultz May 19 '16 at 15:46
@mike-schultz ZingChart is treating them as strings because they are strings in the dataset. He desires them to be sorted ascending, so he would need to do that. If the numbers are in fact strings in the dataset, he can simply convert it with the Number() method as they are pushed into the array, and then run a-b sort on that. – tpie May 19 '16 at 15:52

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

2 Answers2

Linked