How to produce a highchart (using angular js) with json data coming from an Ajax request

Question

My question is related to the link How to handle Highcharts events from an AngularJS directive?. What if I want to have the highchart generated from dynamic data? my chart object is defined/configured as below, chart: { type: 'bar' }, series: [{ name: 'A,B,C,D', score: [1,2,2,3] }], legend: { enabled: false }

I want to feed the corresponding 'name' and 'score' data dynamically from json string obtained from Ajax request and is of the form,

[{"Name":"A","Score":1},{"Name":"B","Score":2}]

Please let me know if i need to provide any other details.

Many Thanks.

Re-framing the question:

I want to create a highchart using angular js. My javascript file is

var app = angular.module('charts', []);
app.directive('highchart', function () {
return {
    restrict: 'E',
    template: '<div></div>',
    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) {

$scope.overSpeedWorstRecords = [];

$scope.handleOverSpeedWorstRecords = function (data, status) {
    $scope.overSpeedWorstRecords = data;      
}


$http.get('http://localhost:12345/abc/pqr').success($scope.handleOverSpeedWorstRecords).error("error message");


$timeout($scope.fetch, 1000);


$scope.renderChart = {
    chart: {
        type: 'bar'
    },
    series: [{
         name: 'A,B,C,D',
        score: [1,2,2,3]
    }],
    legend: {
        enabled: false
    }
};
});

I am getting my json data in overSpeedWorstRecords through an Ajax query ($http.get). Additionally, I have defined a chart object with 'name' and 'score' hardcoded. With this setup I am having the highchart loaded with hardcoded data and I am getting the json data as well which I can access in the HTML as follows,

<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Dashboard Application</title>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  <script src="http://code.highcharts.com/highcharts.js"></script>
  <script type="text/javascript" src="Scripts/DashboardCtrl.js"></script>  
 </head>
 <body>
  <section ng-app="charts">
   <div ng-controller="Ctrl">
        <highchart chart='{{renderChart}}'></highchart>
        <table>
            <tr ng-repeat="record in overSpeedWorstRecords">
                <td>{{record.Name}}</td>
                <td>{{record.Score}}</td>
            </tr>
        </table>
   </div>
  </section>
 </body>
</html>

However, I want to feed the json data which I am getting through the Ajax call, to the chart object to create the bar chart dynamically.

Please let me know if I need to elaborate the problem further.

Questions must demonstrate a minimal understanding of the problem being solved. Tell us what you've tried to do, why it didn't work, and how it should work. See also: [Stack Overflow question checklist](http://meta.stackexchange.com/questions/156810/stack-overflow-question-checklist) — Stewie, Jul 03 '13 at 15:34

score 9 · Accepted Answer · edited Apr 29 '16 at 09:40

Solution to the Problem:-

I solved the problem by myself. I am posting this solution for my future reference and in case it helps somebody having the same requirement.

The javascript was modified so that the Name and Score could be accessed from the json data. They were stored in the 'name' and 'score' arrays which were passed to the chart option object in order to render the highchart.

var app = angular.module('charts', []);

app.directive('highchart', function () {
return {
    restrict: 'E',
    template: '<div></div>',
    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('http://localhost:1234/abc/pqr').success(function (data, status) {

    var score = [];
    for (var i = 0; i < data.length; i++) {
        score.push(data[i].Score);   
    }

    var name = [];
    for (var i = 0; i < data.length; i++) {
        name.push(data[i].Name);
    }

    $scope.renderChart = {
        chart: {
            type: 'bar'
        },
        xAxis: {
            categories: name
        },
        series: [{
            data: score
        }],
        legend: {
            enabled: false
        }
    };
}).error("error message");
$timeout($scope.fetch, 1000);
});

instead of using the passed 'attrs' attribute to watch for changes, you can use the directive's scope attribute instead. This allows for you to either pass a literal or a scope variable from your controller. This used to be cause an error, but now has been fixed https://github.com/angular/angular.js/pull/5385 — Anthony Chua, Jan 04 '14 at 07:44

How to produce a highchart (using angular js) with json data coming from an Ajax request

1 Answers1

Linked