title: Populate Highchart using json data in Angular js
body: <p>I am trying to populate data from json file to Highchart. my example json file is same as Highchart example, my data.json would be:</p>
  
  <pre><code>{"yData":[{
              "name": "Tokyo",
              "data": [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
          }, {
              "name": "New York",
              "data": [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
          }, {
              "name": "Berlin",
              "data": [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
          }, {
              "name": "London",
              "data": [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
          }]}
  </code></pre>
  
  <p>My html file is </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
   &lt;head&gt;
    &lt;title&gt;High chart using directive&lt;/title&gt;
    &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"&gt;&lt;/script&gt;
    &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="http://code.highcharts.com/highcharts.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="script.js"&gt;&lt;/script&gt;  
   &lt;/head&gt;
   &lt;body&gt;
    &lt;section ng-app="charts"&gt;
     &lt;div ng-controller="Ctrl"&gt;
          &lt;highchart chart='{{renderChart}}'&gt;&lt;/highchart&gt;
          &lt;table&gt;
              &lt;tr ng-repeat="record in jsondatafeed"&gt;
                  &lt;td&gt;{{record.Name}}&lt;/td&gt;
                  &lt;td&gt;{{record.Score}}&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
     &lt;/div&gt;
    &lt;/section&gt;
   &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var app = angular.module('charts', []);
  
  app.directive('highchart', function () {
  return {
      restrict: 'E',
      template: '&lt;div&gt;&lt;/div&gt;',
      replace: true,
  
      link: function (scope, element, attrs) {
  
          scope.$watch(function () { return attrs.chart; }, function () {
  
              if (!attrs.chart) return;
  
              var charts = JSON.parse(attrs.chart);
  
              $(element[0]).highcharts(charts);
  
          });
      }
  };
  });
  
  
  app.controller('Ctrl', function ($scope, $http, $timeout) {
  $http.get('data.json').success(function (data, status) {
  
      var score = [];
      
  
      var name = [];
      for (var i = 0; i &lt; data.length; i++) {
          name.push(data[i].Name);
    for (var j = 0; j &lt; data.length; j++) {
          score.push(data[j].Score);   
      }
      }
  
      $scope.renderChart = {
          chart: {
              type: 'line'
          },
          xAxis: {
              categories:['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
          },
    yAxis: {
              title: {
                  text: 'Temperature (°C)'
              },
              plotLines: [{
                  value: 0,
                  width: 1,
                  color: '#808080'
              }]
          },
          series: [{
     name: name,
              data: score
          }],
    
    
          legend: {
              enabled: false
          }
      };
  }).error("error message");
  $timeout($scope.fetch, 1000);
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>Now i am able to populate the chart for one name only and data<a href="https://i.stack.imgur.com/n2LpZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/n2LpZ.png" alt="current output"></a></p>
  
  <p>but i need to feed all data from json file. what is the point i am missing here. 
  Regards,
  Vinoth Kannan P</p>