How can I get a chart from a matrix
<p>Hello everybody I am using AngularJS. I need to get a chart depends on the values of the matrix related to the choice selected.</p>

<p><strong>The HTML:</strong></p>

<pre><code>&lt;body ng-controller="MainCtrl"&gt;
  &lt;select ng-model="selectedCity" ng-change="extractSubsities(selectedCity)" ng-options="item as item.name for item in cities track by item.name"&gt;
  &lt;/select&gt;

  &lt;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"&gt;
  &lt;/select&gt;

  &lt;table&gt;
    &lt;tr ng-repeat="item3 in data track by item3.id"&gt;
      &lt;!--but here I need to iterat the selectedSubCity too when I select DropDown 2--&gt;
      &lt;td&gt;{{ item3.id }}&lt;/td&gt;
      &lt;td&gt;{{ item3.name }}&lt;/td&gt;
      &lt;td&gt;{{ item3.price }}&lt;/td&gt;
      &lt;td&gt;{{ item3.qte}}&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;

&lt;/body&gt;
</code></pre>

<p>And this is my script json :</p>

<pre><code>angular.module('app', []).controller('MainController', ['$scope', function($scope) {
      $scope.cities = [{
        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
        }]
      }];
      $scope.extractSubsities = function(itemSelected) {
        if (itemSelected &amp;&amp; itemSelected.elements) {
          $scope.data = itemSelected.elements;
        }
      }

    });
</code></pre>

<p>I need to show a graph (chart) when I chose a city or a subcity. I need to show a graph deponds on the price and qte so I need to show two columns for each city or subcity. for example when I chose city A in DropDown 1 and sub A1 in the DropDown 2 to see a graph like :</p>

<p><a href="https://i.stack.imgur.com/nvS8q.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nvS8q.png" alt="enter image description here"></a></p>