title: How to Bind Data Of angular-Charts Dynamically
body: <p>I am using <a href="http://chinmaymk.github.io/angular-charts/" rel="nofollow noreferrer"><code>angular-charts</code></a> directives in my application and it works well when we set the data initially.But when i read the data from json file and assign the data to the chart, it just generates x axis and y axis but not the legends.Here is my code,</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code> &lt;div id="content" ng-controller="MainCtrl1" class="box-content"&gt;   
      &lt;div style="position:relative"&gt;
       &lt;div  data-ac-chart="'bar'"    data-ac-data="widget.data"  data-ac-config="config"  class="chart"&gt; 
       &lt;/div&gt;
    &lt;/div&gt;    
  </code></pre>
  
  <p>Here is the model where i read the data from a file,</p>
  
  <pre><code> &lt;div class="col-lg-6 col-md-6"&gt;
           &lt;div class="form-group"&gt;
                 &lt;div  &gt;
                &lt;input type="file" on-read-file="showContent($fileContent)" /&gt;
           &lt;/div&gt;
    &lt;/div&gt;     
  </code></pre>
  
  <p><strong>App.JS:</strong></p>
  
  <pre><code>  $scope.data = {
       "series": ["Northern", "Western", "Southern", "East", "Center"],
       "data": [ {
        "x": "Mahinda",
        "y": [90, 800, 600,100,900]
      }, {
        "x": "Maithiri",
        "y": [351,439,380,800,300]
      }, {
       "x": "Others",
       "y": [140, 33,230, 879,43]
     }]
   };
  </code></pre>
  
  <p>Here am assigning the data to the widget,</p>
  
  <pre><code>$scope.addBarChart = function() {
    $scope.dashboard.widgets.push({
      name: "General election",
      sizeX: 110,
      sizeY: 50,
      type:"Bar",
      data:$scope.data
    });
  };
  </code></pre>
  
  <p>This works well, and this is the output.
  <img src="https://i.stack.imgur.com/6CaHu.png" alt="enter image description here"></p>
  
  <p>Then am reading the data from a json file and assigning to the data object of widget,</p>
  
  <pre><code>  $scope.showContent = function($fileContent){
          $scope.widget.data = $fileContent;
      };
  </code></pre>
  
  <p>Here is the output:</p>
  
  <p><img src="https://i.stack.imgur.com/ZGJuj.png" alt="enter image description here"></p>
  
  <p>There is no errors on the console as well.</p>